サイト作成 12日目✨✨
今日は、コーポレートサイトの方の模倣練習で
グローバルナビにブログパーツを入れる作業とメガメニューを中心にやったよ✨
グローバルナビにブログパーツを入れてみたんだけど、
1つ画像を作って、カラムひいて、画像とボタンを差し込んで、
そこまで、スルッと出来たんだけど、そこからのサイズ感の調整が難しくて、
結構、時間かかっちゃったな💦💦
それから、メガメニューを入れたかったから、
調べて、HTMLをCSSを外観のウィジェットから入れてみたよ😆😆
HTML
<header>
<nav class=”global_menu”>
<ul>
<li class=”menu”>
<a href=”#”>Parent Menu</a>
<ul class=”child_menu”>
<li><a href=”#”>Child Menu</a></li>
<li><a href=”#”>Child Menu</a></li>
<li><a href=”#”>Child Menu</a></li>
<li><a href=”#”>Child Menu</a></li>
</ul>
</li>
<li class=”menu”>
<a href=”#”>Parent Menu</a>
<ul class=”child_menu”>
<li><a href=”#”>Child Menu</a></li>
<li><a href=”#”>Child Menu</a></li>
<li><a href=”#”>Child Menu</a></li>
<li><a href=”#”>Child Menu</a></li>
</ul>
</li>
<li class=”menu”>
<a href=”#”>Parent Menu</a>
<ul class=”child_menu”>
<li><a href=”#”>Child Menu</a></li>
<li><a href=”#”>Child Menu</a></li>
<li><a href=”#”>Child Menu</a></li>
<li><a href=”#”>Child Menu</a></li>
</ul>
</li>
</ul>
</nav>
</header>
CSS
.global_menu { /* メニュー全体のスタイル */
width: 100%;
position: relative;
color: #ffff; /* 文字色 */
background: #1e73be; /* 背景色 */
text-align: center;
}
.global_menu li {
display: inline-block;
}
.global_menu a { /* 各項目のスタイル */
display: block;
padding: 10px 30px;
}
.menu:hover > a {
background: #ffb6c1;
}
.child_menu > li > a { /* 子項目のスタイル */
font-size: 0.8em;
}
.child_menu > li > a:hover { /* 子項目のスタイル（ホバー時） */
background: #ffb6c1;
}
.child_menu { /* 下層メニューのスタイル */
width: 100%;
position: absolute;
top: 100%; /* 親項目の直下に配置 */
left: 0;
padding: 30px;
color: #0a0a0a; /* 文字色 */
background: #ffff; /* 背景色 */
visibility: hidden; /* 下層メニューを非表示 */
}
.menu:hover .child_menu { /* 下層メニューのスタイル（親項目ホバー時） */
visibility: visible; /* 下層メニューを表示 */
}
.child_menu a:hover {
color: #fff;
}
これを、ヘッター内部に入れてみたんだけど場所が少し違くて、
でも、場所的に、グローバルナビに入ってるっぽいから、
色々、グローバルナビを2つ作るCSSとかないかな、、、🤔🤔🤔
って思いながらずっと調べてたんだけど、全然見つけられなくて、、😅
とりあえず、全然見つからなかったから、ブログパーツにHTML入れて
メインビジュアルのところにブログパーツIDで入れ込んでみたんだけど、
メインビジュアルのメインテキストの上にすることが出来なくて、
どうにか、やり方ないかなって思っているところ❗️❗️
ただ、グローバルナビの下の辺りでメインビジュアルの1番上だから、
ヘッダーの内部の時よりは近しい形なのかなとは思っているよ👍
後は、メインビジュアルの方に入れている方がサイズ感の調整とかできるから、
そうかも❗️❓って気持ちになってる😆
メニューとかウィジェットから編集できる方が、圧倒的に分かりやすいし、
こんな私でも理解できるから、引き続きどちらからも知らべてみようと思うよ😁
今日までのコーポレートサイトはこんな感じ ↓
後は、昨日から探してた記事スライダーのタイトルのものなんだけど、
そんな感じのCSSは見つかったものの、上手く反映されないのか、
更新したサイトで違いが見れなかったので、また、違うものを探して見るよ✨
あ、あとサイトのアイキャッチ画像も少しずつ直してみてる💪
今は、今までのアイキャッチ画像と新しく作ったものがあるから、
どっちが見やすいとかあれば教えてほしいな😆😆
よろしくね〜❗️
2022/12/3