ヒビラボでは、Cocoonをカスタマイズする方法やCSSコード（コピペ可）をまとめています。
Cocoonでは、簡単にブログのモバイル表示を最適化できます。
この記事では、モバイル表示に関する設定やCSSカスタマイズ方法をまとめました。
モバイル表示は超重要！
ブログのモバイル表示はとても重要です。
WordPressのブログはPCで作成する場合が多いにもかかわらず、スマホで読む人が圧倒的に多いからです。
さらに、Googleなどの検索エンジンは、モバイルに最適化（モバイルフレンドリー）されたサイトを高く評価して検索結果の上位に表示させます。
ブログを書いた後はスマホやタブレットで表示を確認する作業が不可欠です。
このブログのモバイル表示カスタマイズ
このブログでは、ヘッダーモバイルボタンとスライドインメニューを設置し、CSSカスタマイズしています。
↑ヘッダーモバイルボタン設定で、モバイルヘッダーにロゴ・メニュー・検索ボタンを表示させます。
↑スライドインメニューは初期状態では何も表示されません。スライドインメニューの設定で、メニューを表示させます。
↑さらに、フッターメニューを一列にしています。表示がそのままでも気にならない場合やメニュー数が偶数のときはしなくていいカスタマイズでしょう。
ヘッダーモバイルボタンを設定する
ヘッダーモバイルボタンを設定する方法は以下のとおりです。
【Cocoon設定】→【Cocoon設定】→【モバイル】を選択します。
【モバイルメニュー】の【ヘッダーモバイルボタン】にチェックを入れて保存します。
なんかほかにもいっぱい設定あるけど、しなくていいの？
モバイル表示の設定はたくさんあるよ！
記事ではこのブログと同じようにする設定を紹介するけど、色々試してみてね！
モバイルスライドインメニューを設定する
モバイルスライドインメニューを設定する方法は以下のとおりです。
【外観】→【メニュー】→【新しいメニューを作成しましょう】でメニューを作成します。
【メニュー名】をモバイルスライドインメニューに変更し、左の【メニュー項目】で表示するメニューのチェックを入れて【メニューに追加】をクリックします。
【メニュー設定】の【モバイルスライドインメニュー】にチェックを入れて【メニューを保存】をクリックします。
モバイル表示の色をCSSカスタマイズする
モバイル表示の色を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進数の#ffffffとかじゃないね。
どういうこと！？
色をRGBAで指定すると、色の透明度も指定できるよ！
今回は半透明にしたかったからこういう風に書いているんだ！
下記のサイトで16進数カラーコードからRGBA値へ変換できます。
TECH-UNLIMiTED：カラーコード変換ツール
フッターメニューのモバイル表示を一列にする
フッターメニューが奇数のときはちょっと違和感があるので、一列にする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%; /*フッターメニューの文字の大きさを変更*/
}
}まとめ：モバイル表示を整えて、見やすいブログを作ろう
モバイル表示を整えることで、読者の満足度が高まり、検索エンジンにも高く評価されるようになります。
CSSカスタマイズはコピペするだけでできるので、色々試して楽しんでみてくださいね。
