サイト作成 24日目✨✨
今日は佐々木税理士事務所のグローバルメニューを完成させたよ😀
今まで、ブログパーツにロゴと画像とボタン2つを入れ込んで、
カスタムHTMLでヘッダー内部に入れてたんたけど、
そうするとロゴの部分に空白が空いちゃってて、それをなくすためにCSS調べてたり、
ヘッダーロゴの設定の部分に画像として全部入れ込んでみたりしてたんだけど、
そこにはHTMLを入れるところがなくて全然出来なくて、
結構お手上げ状態だったんだけど、今日やっと解決したよ😁
ヘッダーロゴの設定→ロゴ画像設定に普通にロゴを入れて、
ロゴ以外の画像とボタン2つのリッチカラムで作ったものを
ブログパーツに入れ込んでそれをカスタムHTMLでヘッダー内部に入れて
CSSでヘッダー内部のウィジェットを3列から2列に並べるCSSを
追加CSSのところから入れ込んで、ロゴとブログパーツを1列にしたよ❗️
ヘッダー内部のウィジェットを3列から2列に並べるCSSはこれ ↓
【ヘッダー内部ウィジェット（３列から２列）に並べる】
@media (min-width: 960px) {
.-parallel .l-header__logo {
width: 40%;
}
.l-header.-parallel .w-header {
width: 60%;
}
}
ずっとヘッダーのロゴ部分を消す方法で探してたし考えてたから、
それぞれを所定の場所に入れて3列を2列にするみたな発想が全然思いつかなくて
そう言うやり方もあるのかって思ったし、1つのやり方に固着するんじゃなくて
もっと違う目線から考えながらやらなくちゃいけないなって思ったよ👍👍
昨日、出来なかったタブにアイコンを入れるやり方も、昨日はHTMLを編集して出来ない、、
ってなってたけど普通にタブにクラスとアイコン入れるだけっていう簡単なものだったから、
色々な目線から考えて、できるだけ簡単にできる方法でもっと考えてみようと思ったよ❗️❗️
タブにアイコンを入れるのはこんな感じ ↓
［icon class=”fas fa-fish”］をタブ1とタブ2の文字の前に入れ込むだけ❗️❗️❗️
本当にこんなに簡単だと思ってなくて、HTMLまで編集して、
全然出来なくて悩んでたのにってちょっと落ち込んじゃった😨
本当もっと色々な目線から考えてやるべきだって改めて思った😵
メガメニューは、結局ブログパーツでメニューに入れ込んでる画像の部分を
真ん中に持ってくる方法が分からなくて出来なかったんだけど、
隣接セレクタのCSSを入れて全ての項目の両側にボーダーを入れたり、
文字の前にアイコン入れたり、画像にリンクを貼ったりとできることをして完成に近づけたよ😁
隣接セレクタ 全ての項目の両側にボーダーと
それぞれの項目の間にだけボーダーを入れるCSSはこれ ↓
【隣接セレクタ】 全ての項目の両側にボーダー
li {
border-left: 1px solid #333;
border-right: 1px solid #333;
}
li+ li {
border-left: 0;
border-right: 1px solid #333;
}
【隣接セレクタ】それぞれの項目の間にだけボーダー
li+ li {
border-left: 1px solid #333;
}
それから、アイキャッチ画像を全部作り直してたんだけど、
24日分+3つ分の約1ヶ月分のアイキャッチ画像を作り直したから、結構大変だったよ😵😵
あとはいつも通り、ブログランキングサイトの登録をして、ランサーズで営業をかけたりしたよ👍
今日は今まで出来なくて、結構時間をかけて調べていた、
グローバルメニューだったり、タブだったりが出来て、
完全にやり方が分かったしこういうやり方があるんだって、とても勉強になった❗️
結構時間かけても解決できないと結構悲しくなってくるから、今日全部分かって本当によかった😁
明日からも頑張ろうと思うよ❗️❗️
2022.12.15