【Cocoon】スマホ用ボタンを表示する方法｜ヘッダー・フッターモバイルボタンの設定手順

今回は、ワードプレステーマ「Cocoon」のカスタマイズのうち、スマホ表示用のボタンを設定する方法について解説していきます。

Cocoonでは、スマホやタブレットでブログを見たときに、画面の上部や下部にメニュー・検索・ホームなどのボタンを表示できます。

「スマホからブログを見る人にも、使いやすいサイトにしたい！」

という方におすすめのカスタマイズです。

当サイトでは、下の画像のように表示させています。

【上部（ヘッダーモバイル）ボタン】：赤枠内のボタンです。

【下部（フッターモバイル）ボタン】：赤枠内のボタンです。

本記事では、こうしたCocoonのモバイル用ボタンを設定する手順を、実際の設定画面を使いながらご紹介していきます。

「Cocoonを使い始めたばかりで、どこから設定すればいいかわからない」という方も、順番に進めれば設定できます。

それでは、どうぞ！

Cocoonのスマホ用ボタンの完成イメージ

まずは、今回設定するスマホ用ボタンのイメージを確認しておきましょう。

ヘッダーモバイルボタン（上部）

私は、左から、

①「メニュー」
②「ロゴ」
③「検索」

を設定しています。

フッターモバイルボタン（下部）

フッター側には、左から、

①「メニュー」
②「ホーム」
③「検索」
④「トップ」
⑤「サイドバー」

を設定しています。

Cocoonでスマホ用ボタンを設定する前の準備

ここから、実際に設定していきます。

まずは、事前準備を2つ行います。

①表示するボタンを決める

「ヘッダーモバイルボタン」と「フッターモバイルボタン」を作成するにあたり、それぞれどのボタンを表示するか、あらかじめ決めておきます。

もちろん、あとから変更することもできます。

最初は、私が設定している内容をそのまま参考にしてもOKです。

②カスタムリンクを有効にする

続いて、事前準備の2つ目です。

ワードプレス管理ページの、

「外観」→「メニュー」

を選択します。

次に、上部の「表示オプション▼」を押し、「カスタムリンク」にチェックを入れます。

ヘッダーモバイルボタンを設定する方法

それでは、まず「ヘッダーモバイルボタン」を作成していきます。

※ヘッダーモバイルボタンを表示する必要がない方は、こちらの章は読み飛ばしてOKです。

ヘッダーモバイルボタンの作成手順は、次のとおりです。

メニューの作成 → メニュー項目の追加 → メニュー設定

順番に進めていきましょう。

---

「【Cocoon】初心者におすすめのカスタマイズ10選｜ブログを見やすくする設定方法」

Cocoonには、スマホ用ボタン以外にも、ブログを見やすくするための便利なカスタマイズがあります。

「ほかにもCocoonをカスタマイズしたい！」という方は、実際にやってよかったカスタマイズをこちらにまとめています。

フッターモバイルボタンを設定する方法

続いて、「フッターモバイルボタン」を作成していきます。

こちらですね。

手順は、「ヘッダーモバイルボタン」と同様です。

メニューの作成 → メニュー項目の追加 → メニュー設定

の順番で進めていきます。

Cocoon設定でスマホ用ボタンを表示する

「ヘッダーモバイルボタン」と「フッターモバイルボタン」のメニューが完成しました。

あとは、「Cocoon設定」を行えば、モバイルボタンを表示できます。

ここまで設定しても、Cocoon設定で表示するようにしていなければ、ボタンは表示されません。

最後の設定まで、もう少し頑張りましょう！

Cocoon設定の手順

ワードプレス管理ページから、

「Cocoon設定」→「モバイル」

を選択します。

「モバイル」タブを開いたら、モバイルメニューの「ヘッダー・フッターモバイルボタン」を選択します。

設定が完了したら、「変更をまとめて保存」を押します。

これで、スマホ表示したときにモバイル用のボタンが表示されているはずです。

ヘッダー・フッターのどちらか一方だけ表示したいときは？

「上下にボタンを表示するのではなく、どちらか一方だけ表示したい」

という場合もあると思います。

Cocoonでは、ヘッダー・フッターのどちらか一方だけを表示する設定もできます。

ヘッダーモバイルボタンだけ表示する場合

「Cocoon設定」→「モバイル」を開き、

「ヘッダーモバイルボタン」

を選択します。

フッターモバイルボタンだけ表示する場合

同じく「Cocoon設定」→「モバイル」を開き、

「フッターモバイルボタン」

を選択します。

自分のブログに合うほうを選んでみてください。

Cocoonのスマホ用ボタンをさらにカスタマイズしたいときは？

ここまで設定すると、スマホ画面にメニューや検索などのボタンを表示できるようになります。

ただ、実際に設定してみると、

「文字色を変えたい」
「背景色を変えたい」
「ロゴの大きさを変えたい」

など、さらにカスタマイズしたくなることもあると思います。

実は、ヘッダーモバイルボタンは、使用しているCocoonのスキンによって色などの見た目が変化します。

Cocoonのスキンを変更してみる

Cocoonには、ブログのデザインを簡単に変更できる「スキン」が用意されています。

「どのスキンを選べばいいかわからない」という方は、こちらの記事も参考にしてみてください。

【関連記事：【Cocoon】スキンどれ選ぶ？特徴と評判をまとめてみた！】

スキンを変更するだけでも、ブログ全体の雰囲気が大きく変わります。

文字色や背景色、ロゴの大きさなどを変更したい場合

さらに細かくカスタマイズしたい場合は、ikuzoさんの記事が参考になります。

▼さらにカスタマイズしたい方は、参考にしてみてください。
【外部リンク：ikuzoさん「Cocoonヘッダーモバイルボタンのカスタマイズ」】

私も、こちらの記事を参考にさせていただきました。

Cocoonのカスタマイズをもっとしたい方へ

今回は、Cocoonのスマホ用ボタンを表示する方法をご紹介しました。

Cocoonには、今回ご紹介したモバイルボタン以外にも、ブログを見やすくしたり、使いやすくしたりするカスタマイズがあります。

「もっとCocoonを使いやすくしたい！」

という方は、私が実際にやってよかったカスタマイズをまとめた記事も参考にしてみてください。
【【Cocoon】初心者におすすめのカスタマイズ10選｜ブログを見やすくする設定方法】

また、サイドバーを見やすくしたい場合は、アイコンボックスを使ったカスタマイズもおすすめです。
【【Cocoon】サイドバーにボックスメニューを表示する方法｜アイコン付きメニューの作り方】

まとめ｜Cocoonのスマホ用ボタンを設定してブログを見やすくしよう

今回は、Cocoonでスマホ表示用のボタンを設定する方法をご紹介しました。

設定の流れをまとめると、次のとおりです。

最初は少し難しく感じるかもしれませんが、一つずつ進めていけば大丈夫です。

スマホからブログを見る人も多いので、モバイル画面を使いやすくしておくと、ブログの回遊もしやすくなります。

ぜひ、自分のブログに合ったスマホ用ボタンを設定してみてください。

▼ Cocoonのカスタマイズをもっと知りたい方は、こちらの記事もどうぞ。