アメブロのヘッダーの上下にグローバルナビを設置するカスタマイズ方法

アメブロの新CSS編集用デザインで、フリースペースとCSSを使って、ヘッダーの上下にグローバルナビを1つずつ設置するカスタマイズ方法をご紹介します。

1 まずは基本のグローバルナビを設置
2 上側のグローバルナビためのHTMLタグをフリースペースに記述
3 上側のグローバルためのCSSを追加
4 保存して確認
5 まとめ
6 関連記事

まずは基本のグローバルナビを設置

別の記事で紹介しているヘッダー下にグローバルナビを設置する方法の応用になります。

まずは、この方法でヘッダー下に基本のグローバルナビを設置してください。

ヘッダー下にグローバルナビを設置する方法

アメブロの新CSS編集用デザインで、フリースペースとCSSを使ってヘッダー下にグローバルナビを設置するカスタマイズ方法について解説します。5つボタンのシンプルなものからボタン数や色など好みで変更することが可能です。

上側のグローバルナビための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編集用デザインをベースにアメブロをカスタマイズするために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×(ヘッダーの高さ＋下側のグローバルナビの高さ)」ピクセルとなりますが、場合によっては調整が必要になると思います。