アメブロ新CSS：グローバルナビを更にカスタマイズする簡単な例

当サイトのヘッダー下にグローバルナビを設置する方法で設置したグローバルナビに、簡単なCSSのコードを追加して更にカスタマイズする例をいくつかご紹介します。

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

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

1 別記事でご紹介しているカスタマイズ方法
2 ボタンの左右の区切り線を消す
3 左右のボタンが無い部分は消す
4 ボタンの区切り線をグラデーションにしてみる
5 ボタンに枠線をつけて一つ一つ独立させる
6 まとめ
7 関連記事

別記事でご紹介しているカスタマイズ方法

「サブメニューを追加」、「ヘッダーの上に移動」、「ヘッダーの上下に設置」の各カスタマイズ方法は別記事にてご紹介しています。

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

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

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

アメブロの新CSS編集用デザインで、フリースペースとCSSを使ってヘッダーの上にグローバルナビを設置するカスタマイズ方法について解説します。ヘッダー下に設置する方法を流用して上側に移動させます。

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

アメブロの新CSS編集用デザインで、フリースペースとCSSを使ってヘッダーの上と下に合わせて2つのグローバルナビを設置するカスタマイズ方法について解説します。ヘッダー下に設置する基本的な方法を流用して上側にも追加します。

ボタンの左右の区切り線を消す

ボタンの左右の区切り線を無くすには、以下のようなコードをCSSの末尾に追加します。

/* ボタンの左右の区切り線を消す */
.gnav .menu {
  border-right: none;
}
.gnav .menu li >a,
.gnav .menu li >span {
  border-left: none;
}

もともとは、区切り線として、グローバルナビの本体の右側と各ボタンの左側に境界線を表示していましたが、それを無くしています。

左右のボタンが無い部分は消す

画面の端まで伸びる左右のボタンの無い部分のの表示が不要な場合は、以下のようなコードをCSSの末尾に追加します。

/* 左右のボタンが無い部分は消す */
.skin-bgHeader:after {
  background: transparent;
}

元々は、グローバルナビを設置するために確保したスペースの背景をグローバルナビの本体と同じ色で塗りつぶしていましたが、それを透明に変更しています。

ボタンの区切り線をグラデーションにしてみる

画像のように、ボタンの区切り線をグラデーションにして、あまり主張しすぎないようにしてみます。

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

/* ボタンの区切り線をグラデーションにしてみる */
#gnav-main {
  --gnav-bg: linear-gradient(#6699ff 10%, #bbddff 50%, #6699ff 90%); /* 区切り線のグラデーション */
}
#gnav-main .menu {
  border: none;
  padding-right: 1px;
}
#gnav-main .menu li >a,
#gnav-main .menu li >span {
  border: none;
  margin-left: 1px;
}

元々は、グローバルナビの本体と左右のボタンが無い部分(グローバルナビ設置用のスペースの背景)を同じ色で塗っていましたが、グローバルナビの本体のみグラデーションに変えています。

また、区切り線の部分を線ではなく余白(paddingやmargin)で確保することで、グローバルナビ本体のグラデーションが線として透けて見えるようにしています。

ボタンに枠線をつけて一つ一つ独立させる

グローバルナビの本体は表示せず、一つ一つのボタンに枠線をつけて独立したボタンを並べたようにしてみます。

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

/* 一つ一つのボタンに枠線をつけて独立させる */
:root {
  --gnav-y: -15px; /* 縦位置調整 */
  --gnav-bg: transparent; /* グローバルナビの背景色 */
  --gnav-bd: #999999; /* 枠線の色 */
  --gnav-btn-fg: #666666; /* ボタンの文字色 */
  --gnav-btn-bg: #ffffff; /* ボタンの背景設定 */
}
.skin-bgHeader:after {
  margin-bottom: 15px; /* グローバルナビの下に余白を取る */
}
#gnav-main .menu {
  border: none;
}
#gnav-main .menu li {
  padding:0 3px;
}
#gnav-main .menu li >a,
#gnav-main .menu li >span {
  border: 1px solid var(--gnav-bd);
}

ボタンとボタンの間に余白を設定し、区切り線を消してボタン毎に外枠の線を付け、標準ナビゲーションバーにくっつかないよう余白を確保しています。

ボタンの色も変えてみました。