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

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

新CSS編集用デザイン向けはこちら

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

どのページにも目立つ位置に表示できますので、各種告知記事や、問い合わせ、予約フォーム等のコンタクト手段など、重要なページへのリンクを案内するのに役立ちます。

当記事では、ヘッダーの下に5つボタンのとてもシンプルなグローバルナビの設置方法をお伝えしますが、ボタン数や色など変更しやすい形にしてありますので、よろしければ、お好みで変えてみて下さい。

グローバルナビは、グローバルメニュー、ヘッダーメニュー、メニューバーなど、様々な呼ばれ方をしていますが、当サイトではグローバルナビと呼んでいます。

1 グローバルナビ用のHTMLをフリースペースに保存
2 グローバルナビ用のCSSを追加
3 保存して確認
4 まとめ
5 関連記事

グローバルナビ用のHTMLをフリースペースに保存

まず、フリースペースに以下のようなグローバルナビ用のHTMLタグを追加してください。

<nav id="gnav-main" class="gnav"><ul class="menu">
  <li><a href="#1">メニュー項目1</a></li>
  <li><a href="#2">メニュー項目2</a></li>
  <li><a href="#3">メニュー項目3</a></li>
  <li><a href="#4">メニュー項目4</a></li>
  <li><a href="#5">メニュー項目5</a></li>
</ul></nav>

フリースペース内のどの位置に置くかは特に決まっていませんが、他のタグと混同しないように、先頭か最後が分かりやすくて良いのではないでしょうか。

追加できたら、以下の情報を参考に必要に応じて修正します。

<li>の行がそれぞれ1つのボタンになります。
<li>の行を増やすことでボタンの数も増やすことができます（ただしボタンの数に合わせて後記のCSSの内容を修正する必要があります）。
アメブロの画面では、<li>の行が上から順に、それぞれボタンとして左から右へ並んで表示されます。
「#1」～「#5」には（#と数字を消して）それぞれのボタンをクリックした時に移動するリンク先のURLを設定して下さい。
「メニュー項目1」～「メニュー項目5」は、それぞれのボタンに表示したい内容（文字列）に変更して下さい。

修正できたら、保存して下さい。

グローバルナビ用のCSSを追加

次は、CSSを編集します。

CSSを編集する手順：カスタマイズで必須の基本操作です！

CSS編集用デザインをベースにアメブロをカスタマイズするためにCSSを編集するときの手順について解説します。アメブロのカスタマイズ時には必須で頻繁に行う作業ですのでマスターしておくことをお勧めします。

以下のようなコードをCSSの末尾に追加して下さい。

/*********************************************************
  旧CSS：ヘッダー下にグローバルナビを設置する
 *********************************************************/
/* 各種設定 */
:root {
  --gnav-x: 0px; /* 横位置調整 */
  --gnav-y: 0px; /* 縦位置調整 */
  --gnav-h: 60px; /* グローバルナビの高さ */
  --gnav-w: 980px; /* グローバルナビの横幅(コンテンツ幅) */
  --gnav-bg: #6699ff; /* グローバルナビの背景色 */
  --gnav-bd: #ffffff; /* 枠線の色 */
  --gnav-btn-n: 5; /* ボタンの数 */
  --gnav-btn-fg: #ffffff; /* ボタンの文字色 */
  --gnav-btn-bg: #6699ff; /* ボタンの背景設定 */
  --gnav-btn-fg-h: #ffffff; /* ボタンの文字色(ホバー時) */
  --gnav-btn-bg-h: #3366cc; /* ボタンの背景設定(ホバー時) */
}
/* 原点位置 */
.skinContentsArea {
  position: relative;
}
/* ヘッダー下にナビの設置場所を確保 */
.skinHeaderFrame:after {
  display: block;
  content: '';
  height: var(--gnav-h);
  background: var(--gnav-bg);
}
/* グローバルナビを設置 */
.gnav {
  position: absolute;
  top: calc(0px - var(--gnav-h));
  left: var(--gnav-x);
  width: var(--gnav-w);
  background: var(--gnav-bg);
}
.gnav, .gnav * {
  box-sizing: border-box !important;
}
.gnav >br, .gnav >br~br,
.gnav ul >br, .gnav li >br,
.gnav ul >br~br, .gnav li >br~br {
  display: none;
}
.gnav .menu {
  display: flex;
  margin: auto;
  width: var(--gnav-w);
  border-right: 1px solid var(--gnav-bd);
}
.gnav .menu >li {
  width: calc(100% / var(--gnav-btn-n));
  height: var(--gnav-h);
  line-height: 1.25;
  text-align: center;
  overflow: hidden;
}
.gnav .menu li >a,
.gnav .menu li >span {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--gnav-h);
  text-decoration: none;
  color: var(--gnav-btn-fg);
  background: var(--gnav-btn-bg);
  border-left: 1px solid var(--gnav-bd);
}
.gnav .menu li >a:hover,
.gnav .menu li >span:hover {
  opacity: 1.0;
  cursor: pointer;
  color: var(--gnav-btn-fg-h);
  background: var(--gnav-btn-bg-h);
}

コード中の「各種設定」のところで色や高さなど変更できます。

ボタン数が5でない場合もフリースペースのタグに合わせて変更して下さい。

なお、このままではコンテンツ部との間に余白が全くなく、窮屈に感じるかもしれませんので、その場合は次のコードも追加して調整してみて下さい。

/* グローバルナビ下の余白を調整 */
.skinContentsArea {
  padding-top: 10px; /* コンテンツ部上の余白 */
}

これで、以下の画像のように、グロバルナビとコンテンツ部の間に少し余白をあけて設置できます。

保存して確認

CSSにコードを追加し、必要な修正ができたら保存して表示確認をします。

グローバルナビが上手く表示できていれば成功です。

まとめ

以上、アメブロの旧CSS編集用デザインで、シンプルなグローバルナビを設置する方法をご紹介しました。

まとめると、

グローバルナビ用のHTMLをフリースペースに保存
グローバルナビ用のCSSをコピペして必要に応じて修正
保存して確認

という手順になります。

ここからデザインを変えたり、サブメニューを追加したり、複数のメニューバーを設置したりといった応用もできますので、また機会がありましたら、そのあたりに関しても紹介していきたいと思います。

よかったら参考にして下さい。

旧CSS：グローバルナビにサブメニューを追加する方法

アメブロの旧CSS編集用デザインで、フリースペースとCSSを利用して設置したグローバルナビにプルダウン型のサブメニューを追加するカスタマイズ方法を解説します。

グローバルナビ用のHTMLをフリースペースに保存

グローバルナビ用のCSSを追加

保存して確認

まとめ

関連記事