「グローバルナビのデザインどうしよう。」
「カスタマイズの方法を知りたい!」
自分流にカスタマイズすることでさらに魅力的なサイト になります。
本記事は、
- PC(パソコン)用グローバルナビの設定
- SP(スマホ)用グローバルナビの設定
を画像を使いながら解説します。
また、カスタマイズに必要なCSSも公開していますので、
時間を使いたくない人はコピペ してみてください!
では、解説していきます。
PC用グローバルナビの設定
当サイトのグローバルナビ はこんな感じ。 主な変更点 は、- 背景色
- 文字色
- Fontawesome
を変更、追加しています。
グローバルナビを追加しよう
まずは、 メニューに表示するテキスト、リンクを入力 していきます。
管理画面から 「外観」→「メニュー」をクリックします。
次に、 「新規メニューを作成」 をクリックします。
今回は 「hedder-menu」 としています。
右上、 「メニューを作成」ボタンをクリック します。
すると、メニューが作成されます。
メニューにテキストとリンクを追加 していきます。
- URL
- リンク文字列(表示したい文字)
を入力します。
メニューが作成できたら、
ヘッダーナビにチェックを入れ、メニューを保存 します。
ちゃんと 表示されているか確認 しましょう。
表示されていたら次に進みましょう。
グローバルナビ背景色・文字色の設定
次に グローバルナビの背景色、文字色 を変更していきます。
管理画面から 「Cocoon設定」→「Cocoon設定」
→「ヘッダー」を選択 します。 下のほうにグローバルナビメニュー色 という欄があるので、そこを変更していきます。
ちなみにこのサイトでは
- グローバルナビ色:#0D0B2B
- 文字色:#fff
としています。
グローバルナビの幅を調整する
ナビの横幅を調整 することができます。 グローバルナビ色を設定した箇所のすぐ下 で設定できます。 「メニュー幅をテキストに合わせる」にチェック を入れます。 「メニュー幅をテキストに合わせる」のチェックを外した場合 はこんな感じになります。FontAwesomeを使ってオシャレにする
FontAwesomeとは、 ウェブページ上で
文字と同じように表示できるアイコン のことです。
画像でアイコンを貼るのと違い、
- 拡大してもぼやけない
- 色もサイズも変更可能
です。
では、使い方を解説します。
下記コードを、
「管理画面」→「外観」→「テーマの編集」→「header.php」
の一番下 に貼り付けます。
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
下記サイトから使いたいアイコンを探します 。見つけてきた <i class=”○○”></i>をコピー します。
「管理画面」→「メニュー」→ 「メニュー」の
ナビゲーションラベルのテキスト前に張り付け ます。
ここまでで、 PC用のグローバルナビは設定は終了 です。
続いて、モバイル用のグローバルメニューの設定を行います。
モバイル用グローバルナビの設定
自分のサイトをスマホで見てください 。こんな感じに表示されているはずです。
当サイトは、以下のデザインに変更しました。
横並びで表示させなくていい人は、特に設定する必要はありません。
では、スライド表示にする方法を解説します。
コピペだけなのでやってみてください。
スライドで表示する
下記、ソースコードをコピーして、
「外観」→「テーマ編集」→「style.css」に追記 してください。
/* モバイルトップメニュー */
@media screen and (max-width: 480px){
ul.menu-mobile{
overflow-x: auto;
overflow-y: hidden;
display: flex !important;
flex-wrap: nowrap;
font-size: 14px;
justify-content: flex-start;
padding: 0 1em;
-webkit-overflow-scrolling: touch;
position: relative;
}
ul.menu-mobile > li{
padding-right: 1em;
white-space: nowrap;
}
ul.menu-mobile .item-label{
white-space: nowrap;
font-size: 14px;
}
}
コピペできたら表示を確認しておきましょう。
これで、モバイル用のグローバルナビの設定も終了です。
まとめ
今回は、当サイトで利用しているグローバルナビに
設定手順を解説しました。
他のサイトのデザインも見ながら、
自分のサイトにあったデザインにカスタマイズしてみてください。
コメント