アメブロの新CSS編集用デザインで、フリースペースとCSSを使ったグローバルナビをヘッダーの上側に設置するカスタマイズ方法をご紹介します。
まずは基本のグローバルナビを設置
別の記事で紹介しているヘッダー下にグローバルナビを設置する方法の応用になります。
まだグローバルナビを設置していない場合は、まずはそちらからご覧ください。
CSSにコードを追加
ヘッダー下にグローバルナビを設置できたら、CSSを編集して上側に移動させます。
以下のようなコードをCSSの末尾に追加して下さい。
/*********************************************************
新CSS：グローバルナビをヘッダーの上に移動させる
*********************************************************/
:root {
--gnav-y: -230px; /* 縦位置調整 */
}
/* ヘッダー上にナビの設置場所を確保 */
.skin-bgHeader:before {
display: block;
content: '';
height: var(--gnav-h);
background: var(--gnav-bg);
}
/* ヘッダー下にナビの設置場所を削除 */
.skin-bgHeader:after {
content: none;
}縦位置調整の-230pxは、グローバルナビをヘッダーの高さ分上に移動させる設定ですのが、ヘッダー画像を設置するなどしてデフォルトから変更している場合は、その高さに-1を掛けたピクセル数を設定して下さい。
さらに、もし、最初からヘッダー下に付いている(ブログトップ、記事一覧などのリンクと検索ボックスが入っている)標準のナビゲーションバーを消すカスタマイズをしている場合は、縦位置調整のピクセル数を+75すると良いと思います。
例えばヘッダーの高さが300pxで標準ナビを消している場合は、-300 + 75なので、-225pxに設定します。
その他、カスタマイズ状況に応じて位置が変わる場合は、適宜変更して下さい。
保存して確認
CSSにコードを追加し、必要な修正ができたら保存して表示確認をします。
グローバルナビがヘッダーの上側に上手く表示できていれば成功です。
まとめ
以上、アメブロのCSS編集用デザインで、ヘッダーの上側にグローバルナビを設置する方法をご紹介しました。
まとめると、
- ヘッダー下にグローバルナビを設置
- CSSをコピペ＆編集してヘッダーの上に移動
- CSSを保存して確認
という手順になります。
なお、サブメニューを追加する方法などの応用も、基本的にヘッダー下に設置した場合と同様に使えます。
よかったら参考にして下さい。
