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

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

2.サイトの作り方
スポンサーリンク

PC用グローバルナビメニューの設定

当サイトのグローバルナビはこんな感じ。

グローバルナビの背景色、文字色、Fontawesomeを追加しています。

グローバルナビを追加しよう

まずは、メニューに表示するテキストなど入力していきます。

ダッシュボードから外観→メニュー、

新規メニューを作成をクリック、

メニュー名を入力、名前はhedder-menuとしています。

右上、メニューを作成ボタンを押すとメニューが作成されます。

メニューにテキストとリンクを追加していきます。

左のカスタムリンクから、URLとリンク文字列(表示したい文字)を入力します。

3つほどメニューを作成しました。

ヘッダーナビにチェックを入れ、メニューを保存します。

いったん確認。

ちゃんと表示されていますね。

グローバルナビ背景色の設定

次にグローバルナビの背景色、文字の色を変更していきます。

ダッシュボード上のCocoon設定→Cocoon設定、

ヘッダーを選択します。

下のほうにグローバルナビメニュー色という欄がありますので、

そこを変更していきます。

ちなみにこのサイトのグローバルナビ色は#0D0B2B ,文字色は#fffです。

グローバルナビの幅を調整する

ナビの横幅を調整することができます。これはメニューが多くなりそうなら設定しておいたほうがいいです。

グローバルナビメニュー色を設定した箇所のすぐ下で設定できます。

メニュー幅をテキストに合わせるのチェックを外した場合はこんな感じになります。

FontAwesomeを使ってオシャレにする

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;
	}
}

まとめ

基本的にカスタマイズする箇所は、ヘッダーナビ(グロナビ)、フッターナビ、サイドバーとなります。

サイドバーをカスタムしたい人はこちらを参考にしてください

フッターをカスタムしたい人はこちらを参考にしてください

コメント