支援者募集中!仕事依頼はこちら

Cocoonのスマホメニューを横にスクロールできるようにカスタマイズ!

Cocoon利用者に贈るスマホメニューカスタマイズ Cocoon

こんにちは、ぽんひろ(@ponhiroo)です。

WordPressのCocoon利用者を対象に、スマホでヘッダーメニューを表示させ、横にスクロールできるようにする方法を紹介します!

完成系はこんな感じです。

cocoonスマホヘッダーナビ完成図

これをヘッダーの下に表示させます。

それではやり方を見ていきましょう!

追記:モバイルヘッダーメニューを使った方法を追記しました。(2019/5/12)

※1か2どちらか一つで行ってください。

編集するファイル
  • style.css

Cocoonスマホメニューを横スクロールにカスタマイズ

方法1.PCとスマホのメニューを使い回して作る方法

モバイルヘッダーメニューは使わずにPCとスマホのメニューを使い回す方法です。

ヘッダーメニュー設定

WordPress管理画面→外観→メニューを選択します。

メニュー名を入力し、メニューを作成します。
メニュー設定1

すでにメニューがある方はそれを編集してください。

ヘッダーナビにチェックを入れ、メニューに入れたい項目を左から選択します。

メニュー設定2

5つ選択するとこんな感じで表示されます。問題なければメニューを保存を選択します。

メニュー設定3

ちなみにドラックをすれば順番を入れ替えることができます。

メニュー設定4

これでメニューの設定は終了です。アレンジ方法は後ほど説明します。

コードをコピペで終わり!

コードをCSSの編集画面にコピペします。CSSの編集画面は二つありますが、どちらでも大丈夫です。

コピペする場所
  1. WordPress管理画面外観テーマエディタースタイルシート(子テーマ)
  2. WordPress管理画面外観→カスタマイズ追加CSS

下記コードをコピペしてください。

#header-container .navi-in > ul li {
   height: auto;
   font-weight: 600;
   line-height:1.3;
}
#header-container #navi{
   background:#89c997; /* 背景色 */
}
#header-container #navi a{
   color:#fff; /* 文字色 */
   padding:0.8em 1em;
}
#header-container #navi a:hover{
   color:#89c997; /* マウスホバー時の文字色 */
}
#header-container .navi-in > ul .sub-menu{
   background:#89c997; /* サブメニュー背景色 */
}
#header-container .navi-in > ul > .menu-item-has-children > a::after {
   top: 0.8em;
   font-size: 1.2em;
   font-weight: 600;
}
#header-container .sub-menu .caption-wrap{
   padding-left:1em;
}
.navi-in > ul .menu-item-has-description > a > .caption-wrap{
   height:auto;
}
@media screen and (max-width: 1030px){
   .navi-in > .menu-header{
	display:-webkit-box;
  	display:-ms-flexbox;
  	display:flex;
	overflow-x: scroll;
	white-space: nowrap;
	-webkit-box-pack: start;
	-ms-flex-pack: start;
	justify-content: flex-start;
        flex-wrap: nowrap;
	-ms-flex-wrap: nowrap;
	flex-wrap: nowrap;
   }
   #header-container #navi a{
	font-size:0.8em;
	padding: 1em 1.2em; /* 余白 */
   }
   #header-container .navi-in > ul > .menu-item-has-children > a::after{
	display:none;
   }
}

これで出来ているはずです!

色を変えたい場合は注釈の通りにカラーコードを変更してください。

方法2.PCとスマホのメニューをわけて作る方法

モバイルヘッダーメニューを使ってPCとスマホのメニューをそれぞれ別で作る方法です。

モバイルヘッダーメニュー設定

WordPress管理画面→外観→メニューを選択します。

新しいメニューを作成します。
Cocoonモバイルメニュー設定手順1

名前を入力し作成します。
Cocoonモバイルメニュー設定手順2

メニューに入れたいコンテンツを設定後、モバイルヘッダーナビにチェックを入れ、メニューを保存します。

Cocoonモバイルメニュー設定手順3

コードをコピペで終わり!

コードをCSSの編集画面にコピペします。CSSの編集画面は二つありますが、どちらでも大丈夫です。

コピペする場所
  1. WordPress管理画面外観テーマエディタースタイルシート(子テーマ)
  2. WordPress管理画面外観→カスタマイズ追加CSS

下記コードをコピペしてください。

#header-container .navi-in > ul li {
   height: auto;
   font-weight: 600;
   line-height:1.3;
}
#header-container #navi{
   background:#89c997; /* 背景色 */
}
#header-container #navi a{
   color:#fff; /* 文字色 */
   padding:0.8em 1em;
}
#header-container #navi a:hover{
   color:#89c997; /* マウスホバー時の文字色 */
}
#header-container .navi-in > ul .sub-menu{
   background:#89c997; /* サブメニュー背景色 */
}
#header-container .navi-in > ul > .menu-item-has-children > a::after {
   top: 0.8em;
   font-size: 1.2em;
   font-weight: 600;
}
#header-container .sub-menu .caption-wrap{
   padding-left:1em;
}
.navi-in > ul .menu-item-has-description > a > .caption-wrap{
   height:auto;
}
@media screen and (max-width: 1030px){
	#header-container .menu-mobile{
		display:none;
	}
	.navi-in > .menu-mobile{
		display:-webkit-box;
  		display:-ms-flexbox;
  		display:flex;
		overflow-x: scroll;
		white-space: nowrap;
		-webkit-box-pack: start;
		-ms-flex-pack: start;
		justify-content: flex-start;
     		flex-wrap: nowrap;
		-ms-flex-wrap: nowrap;
		flex-wrap: nowrap;
	}
	#header-container #navi a{
		font-size:0.8em;
		padding: 1em 1.2em;
	}
	#header-container .navi-in > ul > .menu-item-has-children > a::after{
		display:none;
	}
	#navi .navi-in > .menu-mobile li {
		height: auto;
             	line-height: 1.8;
}
}

わかりやすさ、使いやすさを上げる

ヘッダーメニューがスクロールできるのは経験上自然とわかる場合がありますが、中には気付かない人ももちろんいます。

ですので、わかりやすさ(ユーザビリティ)を考えたときに少し工夫する必要があります。

例えば、下記2つを見てください。

ユーザビリティ変更前

ユーザビリティ変更後

微妙な違いですが後者の方は文字が見切れています。そのため、ユーザーは続きがあるんだなと気付けます。

これはメニューの文言によって変わってくるので、もし前者のようになっている場合はCSSを少し編集する必要があります。

その場合は注釈で /* 余白 */とかいてある後ろの1.2emの数値を変更してみてください。

メニューをカスタマイズ

ここからはメニューのカスタマイズ方法を紹介します。

  • アイコンをいれる
  • 英語をいれる
  • サブメニューをいれる

アイコンを入れる

当サイトのようにアイコンを入れたい場合は「fontawesome」を使います。

ちなみにオリジナルのアイコンを入れることも可能です。需要があれば記事にします!

まず、アイコンを選びましょう!アイコンは下記リンク先から選びます。

Font Awesome Icons
Font Awesome, the iconic font and CSS framework

試しに家のマークを表示してみましょう。家のマークを選択するとこのような画面になります。

下の方にあるコードをコピーします。

fontawesome設定

これをWordPressのメニュー設定画面のメニュー名の前に貼り付けます。

fontawesome設定2

するとこのようにアイコンが表示されます。

fontawesome設定3

アイコンの色や大きさなどCSSを変更したい場合は下記コードに書き込みます。

#header-container #navi .fa{
 ここにスタイルを書く
}

英語を入れてカッコイイ感じにする

これはWordPressに元から備わってるのでわざわざ紹介する必要はないかもしれませんが、意外と知らない人もいるかと思うので紹介します!

イメージはこんな感じです。
英語をいれたグローバルナビ

WordPressのメニュー設定画面の上部の表示設定を選択。

メニュー キャプション設定1

説明という項目にチェック。

メニュー キャプション設定2

すると説明欄が出てくるのでそこに文字を入力すればOKです!

メニュー キャプション設定3

サブメニューを表示させる

これも元々ある機能ですが、一応説明します!

ちなみに今回のスマホ用ヘッダーメニューには非対応です。PCで見た時だけ表示されます。

イメージはこんな感じです。
サブメニューイメージ

やり方は簡単!WordPressのメニュー設定画面を開き、ドラックをすればOKです。説明しづらいのでこちらを見てください。

動かない!できない!わからない!は気軽にご連絡を!

環境によって上手く動かない可能性があるため、もしお困りなことがあればコメント欄、Twitter、お問い合わせフォームからご連絡ください。

当サイトのようなヘッダー固定にしたい場合は下記記事をご覧ください。

Cocoonカスタマイズ他にもやってます!

他にもいろいろCocoonカスタマイズをやってますので良かったらご覧ください!

あわせて読む Cocoonカスタマイズをまとめ!おしゃれなものや機能性をあげるものなど!

Cocoonカスタマイズまとめ!おしゃれなものや機能性をあげるものなど!
Cocoonのカスタマイズまとめです。おしゃれなものから機能性をあげるものまで紹介します。プロフィール、タブ切り替え、トップページ、リスト、ボックス、スマホのメニュー固定方法なども紹介していきます。

コメント

ページトップへ