【Cocoon】ヘッダーモバイルボタンの設定方法【初心者向け】

この記事では、Cocoonの「ヘッダーモバイルボタン」を利用して、ブログの見た目を整える方法を紹介する。

完成イメージ

中央にロゴ、左右にメニューと検索を配置してみた。整ったサイトでよく見る構図だと思う。

今回は調べながらやったので1～2時間はかかったが、この記事の通りにやってくれれば30分くらいで終わる作業だと思う。ぜひやってみてほしい。

モバイルのついでに、パソコンで見たときの画面もこんな感じにしておく。

ロゴを用意する必要がある。自分はcanvaで作ったが、作り方はなんでもいい。

サイズは「400px」×「80px」の長方形にするとちょうどよかった。ファイル形式はjpgかpngが推奨。

ブログの設定を弄るとき、LiteSpeed Cacheが有効化されていると反映されるのが遅くなり、確認が面倒になる。

設定を弄っている間はLiteSpeed Cacheを無効化しておく。

ブログへのアクセス速度を上げてくれる便利なプラグインなので、設定が終わったあとは再度「有効化」しておこう。

01. ヘッダーの設定画面を開く

ヘッダーの設定を行う

ここまでで、ブログのヘッダー部分にロゴが追加されているはず。

03. メニューの設定画面を開く

STEP 01
WordPressの管理画面から、「外観」→「メニュー」を開く
STEP 02
「新しいメニューを作成しましょう。」をクリック
STEP 03
メニュー名を「ヘッダーモバイルボタン」にする。
メニュー設定で「ヘッダーモバイルボタン」にチェックを付ける。
→ 「メニューを作成」をクリックする。
STEP 04
画面左の「カスタムリンク」をクリック
STEP 05
URLに「#menu」、リンク文字列に「MENU」を入力し、「メニューに追加」をクリック
STEP 06
同様に、下記2つを入力。それぞれ「メニューに追加」をクリックする。
URL「#logo」リンク文字列「LOGO」
URL「#search」リンク文字列「SEARCH」
STEP 07
ここまで実施すると、下のような画面になる。「メニューを保存」をクリックする。

設定は、これでほぼ完了。モバイルで確認すると、下のような画面になっているはず。

メニュー・検索部分の色が気になるので、以下で調節する。

ヘッダーモバイルボタンの色を調節する