当ブログでは、Cocoonを初期状態からカスタマイズする方法（コピペ可）をまとめています。
Cocoonでは、簡単にブログのモバイル表示を最適化できます。
この記事では、モバイルスライドインメニュー・ヘッダーモバイルボタンを設定する方法、モバイルヘッダーの色をCSSで変更するカスタマイズ、フッターメニューのモバイル表示を一列にする方法などをまとめました。
モバイル表示は超重要！
ブログのモバイル表示はとても重要です。
WordPressのブログはPCで作成する場合が多いにもかかわらず、スマホで読む人が圧倒的に多いからです。
さらに、Googleなどの検索エンジンは、モバイルに最適化（モバイルフレンドリー）されたサイトを高く評価して検索結果の上位に表示させます。
ブログを書いた後はスマホやタブレットで表示を確認する作業が不可欠です。
このブログのモバイル表示カスタマイズ
このブログでは、ヘッダーモバイルボタンとスライドインメニューを設置し、CSSカスタマイズしています。
ヘッダーモバイルボタン設定で、モバイルヘッダーにロゴ・メニュー・検索ボタンを表示させます。
ヘッダーモバイルボタンの追加ででてきたヘッダーのメニューボタンは初期状態では何も表示されません。
スライドインメニューの設定で、メニューを表示させます。
さらに、フッターメニューを一列にしています。表示がそのままでも気にならない場合やメニュー数が偶数のときはしなくていいカスタマイズでしょう。
ヘッダーモバイルボタンを設定する
ヘッダーモバイルボタンを設定する方法は以下のとおりです。
【Cocoon設定】→【Cocoon設定】→【モバイル】を選択します。
【モバイルメニュー】の【ヘッダーモバイルボタン】にチェックを入れて保存します。
なんかほかにもいっぱい設定あるけど、しなくていいの？
モバイル表示の設定はたくさんあるよ！
記事ではこのブログと同じようにする設定を紹介するけど、色々試してみてね！
モバイルスライドインメニューを設定する
モバイルスライドインメニューを設定する方法は以下のとおりです。
【外観】→【メニュー】→【新しいメニューを作成しましょう】でメニューを作成します。
【メニュー名】をモバイルスライドインメニューに変更し、左の【メニュー項目】で表示するメニューのチェックを入れて【メニューに追加】をクリックします。
【メニュー設定】の【モバイルスライドインメニュー】にチェックを入れて【メニューを保存】をクリックします。
モバイル表示の色をCSSカスタマイズする
モバイル表示の色をCSSカスタマイズできます。
モバイルヘッダーの文字と背景の色を変える
/*ヘッダーの文字と背景の色を変える*/
.mobile-header-menu-buttons, .mobile-menu-buttons, .menu-button {
color: #8195a2;
background-color: #f4f7f7;
}モバイルスライドインメニューをカスタマイズ
/*スライドインメニューをカスタマイズ*/
.navi-menu-content{
background-color: rgba(244,247,247,0.8); /*背景色を変える※16進数#○○○でも指定可*/
}
色の設定が16進数じゃないね。
どういうこと！？
色をRGBで指定すると、色の透明度も指定できるよ！
今回は半透明にしたかったからこういう風に書いているんだ！
フッターメニューのモバイル表示を一列にする
フッターメニューが奇数のときはちょっと違和感があるので、一列にするCSSを追加しました。
気にならない場合やメニューが偶数のときはそのままでOK
フッターメニューのモバイル表示を一列にする方法は、Cocoonフォーラムに解決策がありました。
Cocoonフォーラム：モバイルのフッターメニューを1列にしたい
/*フッターメニューを一列にする*/
@media screen and (max-width: 834px){
.navi-footer-in>.menu-footer{
flex-wrap: nowrap; /*フッターメニューを一列に*/
justify-content: center;
}
.navi-footer-in a{
font-size: 90%; /*フッターメニューの文字の大きさを変更*/
}
}
