ここでアフィリエイターデビューしませんか?
このサイトで学べることは?

【Cocoon】コピペで楽々!グローバルナビをおしゃれにカスタマイズしませんか?

2.サイトの作り方
スポンサーリンク
この記事は 約7 分で読めます。

「グローバルナビのデザインどうしよう。」
「カスタマイズの方法を知りたい!」

デザイン的にも他のテーマに引けをとらないCocoon ですが、
自分流にカスタマイズすることでさらに魅力的なサイト になります。

本記事は、

  • 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">

下記サイトから使いたいアイコンを探します

Search for Font Awesome | 日本語でアイコンフォントを簡単検索
Font Awesomeのアイコンフォントを日本語、英語、カタカナで簡単に検索することができる便利なウェブサービスです。

見つけてきた <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;
	}
}

コピペできたら表示を確認しておきましょう。

これで、モバイル用のグローバルナビの設定も終了です。

まとめ

今回は、当サイトで利用しているグローバルナビに
設定手順を解説しました。

他のサイトのデザインも見ながら、
自分のサイトにあったデザインにカスタマイズしてみてください。

 

コメント