アメブロの新CSS編集用デザインで、フリースペースとCSSを使って、ヘッダーの上下にグローバルナビを1つずつ設置するカスタマイズ方法をご紹介します。
まずは基本のグローバルナビを設置
別の記事で紹介しているヘッダー下にグローバルナビを設置する方法の応用になります。
まずは、この方法でヘッダー下に基本のグローバルナビを設置してください。
上側のグローバルナビためのHTMLタグをフリースペースに記述
ヘッダー下側に基本のグローバルナビを設置できたら、上側のグローバルナビのための以下のようなHTMLタグをフリースペースに追加して下さい。
<nav id="gnav-top" class="gnav"><ul class="menu">
<li><a href="#">メニュー項目 1</a></li>
<li><a href="#">メニュー項目 2</a></li>
<li><a href="#">メニュー項目 3</a></li>
<li><a href="#">メニュー項目 4</a></li>
<li><a href="#">メニュー項目 5</a></li>
<li><a href="#">メニュー項目 6</a></li>
<li><a href="#">メニュー項目 7</a></li>
</ul></nav>
これを必要に応じて修正しますが、基本的にはヘッダー下のグローバルナビと同様ですので、やり方は割愛します。
なお、id
属性だけは別の値に変更する必要があります。
基本のグローバルナビはgnav-main
でしたが、今回の上側のグローバルナビはgnav-top
とすることにします。
また、ボタン数も7つに変更してみました(これは自由です)。
修正ができたら、保存して下さい。
上側のグローバルためのCSSを追加
次は、CSSの編集です。
以下のようなコードをCSSの末尾に追加して下さい。
/*********************************************************
新CSS:ヘッダー上に2つめのグローバルナビを設置する
*********************************************************/
/* 各種設定 */
:root {
--gnav-top-h: 40px; /* グローバルナビの高さ */
--gnav-top-bg: #333333; /* グローバルナビの背景色 */
}
#gnav-top {
--gnav-x: 0px; /* 横位置調整 */
--gnav-y: -290px; /* 縦位置調整 */
--gnav-h: var(--gnav-top-h);
--gnav-w: 1120px; /* グローバルナビの横幅(コンテンツ幅) */
--gnav-bg: var(--gnav-top-bg);
--gnav-bd: #ffffff; /* 枠線の色 */
--gnav-btn-n: 7; /* ボタンの数 */
--gnav-btn-fg: #ffffff; /* ボタンの文字色 */
--gnav-btn-bg: #333333; /* ボタンの背景設定 */
--gnav-btn-fg-h: #ffffff; /* ボタンの文字色(ホバー時) */
--gnav-btn-bg-h: #3366cc; /* ボタンの背景設定(ホバー時) */
}
/* ヘッダー上にナビの設置場所を確保 */
.skin-bgHeader:before {
display: block;
content: '';
height: var(--gnav-top-h);
background: var(--gnav-top-bg);
}
基本のグローバルナビの設定の多くを流用して、異なる部分だけを記述するような形になっています。
コード中の「各種設定」のところで色や高さなどを変更できるのも、基本のグローバルナビと同様です。
例として、高さは基本よりも低い40px
、色も黒っぽい別の色#333333
に変えてみました。
「縦位置調整」の値は、「-1×(ヘッダーの高さ+下側のグローバルナビの高さ)」ピクセルとなりますが、場合によっては調整が必要になると思います。
保存して確認
CSSにコードを追加し、必要な修正ができたら保存して表示確認をします。
グローバルナビがヘッダーの上下に上手く表示できていれば成功です。
まとめ
以上、アメブロの新CSS編集用デザインで、ヘッダーの上下にグローバルナビを設置する方法をご紹介しました。
まとめると、
- ヘッダー下に基本のグローバルナビを設置
- 上側の追加グローバルナビ用のHTMLをフリースペースに保存
- 上側の追加グローバルナビ用のCSSをコピペして必要に応じて修正
- 保存して確認
という手順になります。
なお、サブメニューを追加する方法も、上下どちらのグローバルナビに対しても使えます(CSSは一つでOK)。
また、これを応用すると、画面の下側にメニューを増設するといったことも可能です。
よかったら参考にして下さい。