アメブロのCSS編集用デザインで、フリースペースとCSSを使ってグローバルナビを設置するカスタマイズ方法をご紹介します。
どのページにも目立つ位置に表示できますので、各種告知記事や、問い合わせ、予約フォーム等のコンタクト手段など、重要なページへのリンクを案内するのに役立ちます。
当記事では、ヘッダーの下に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」は、それぞれのボタンに表示したい内容（文字列）に変更して下さい。
修正できたら、保存して下さい。
複数行表示にしたい場合
なお、当記事でご紹介するグローバルナビは、ボタンに表示したい言葉が長くボタンの横幅に収まらない場合、ボタン内で折り返されて複数行表示するようになっています。
ただし、そのままでは改行(<br>)が効きません。
改行したい位置が決まっている場合は、以下の「メニュー項目4」のようにボタン内のテキスト全体を<span>のような表示への影響が出にくいタグで囲み、その上で改行したい位置に<br>タグを記述して下さい。
<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"><span>メニュー項目4<br>2行目の表示</span></a></li>
<li><a href="#5">メニュー項目5</a></li>
</ul></nav>
グローバルナビ用のCSSを追加
次は、CSSを編集します。
以下のようなコードをCSSの末尾に追加して下さい。
/*********************************************************
新CSS：ヘッダー下にグローバルナビを設置する
*********************************************************/
/* 各種設定 */
:root {
--gnav-x: 0px; /* 横位置調整 */
--gnav-y: 0px; /* 縦位置調整 */
--gnav-h: 60px; /* グローバルナビの高さ */
--gnav-w: 1120px; /* グローバルナビの横幅(コンテンツ幅) */
--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; /* ボタンの背景設定(ホバー時) */
}
/* ヘッダー下にナビの設置場所を確保 */
.skin-bgHeader:after {
display: block;
content: '';
height: var(--gnav-h);
background: var(--gnav-bg);
}
/* グローバルナビを設置 */
.gnav {
position: absolute;
top: calc(-115px - var(--gnav-h) + var(--gnav-y));
left: auto;
right: auto;
width: var(--gnav-w);
background: var(--gnav-bg);
}
/* フリースペースの配置に応じて横位置を設定 */
.skin-columnA .skin-blogSubA .gnav,
.skin-columnC .skin-blogSubB .gnav,
.skin-columnD .skin-blogSubA .gnav {
left: var(--gnav-x);
}
.skin-columnB .skin-blogSubA .gnav,
.skin-columnC .skin-blogSubA .gnav,
.skin-columnD .skin-blogSubB .gnav,
.skin-columnE .skin-blogSubA .gnav {
right: var(--gnav-x);
}
.skin-columnE .skin-blogSubB {
right: calc(var(--gnav-x) - 400px);
}
.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でない場合もフリースペースのタグに合わせて変更して下さい。
もし、標準のナビゲーションバーを非表示にしてある場合は、縦位置調整用の--gnav-yを0pxから75pxにするとうまく収まると思います。
保存して確認
CSSにコードを追加し、必要な修正ができたら保存して表示確認をします。
グローバルナビが上手く表示できていれば成功です。
まとめ
以上、アメブロのCSS編集用デザインで、シンプルなグローバルナビを設置する方法をご紹介しました。
まとめると、
- グローバルナビ用のHTMLをフリースペースに保存
- グローバルナビ用のCSSをコピペして必要に応じて修正
- 保存して確認
という手順になります。
ここからデザインを変えたり、サブメニューを追加したり、位置を変えたり、複数のメニューバーを設置したりといった応用もできます。
よかったら参考にして下さい。
