こんにちは、まちゃりさです。
今回は、ワードプレステーマ「Cocoon」のカスタマイズのうち、スマホ表示用のボタン設定について解説していきます。
スマホ表示用のボタンとは、モバイル機器でサイトを見たときに上下に表示されるボタンのことです。
スマホやタブレットでブログサイトを見るときに便利です！
当サイトでは、下の画像のように表示させています。
上部（ヘッダーモバイル）ボタン 
下部（フッターモバイル）ボタン
左側の赤枠が上部に表示しているボタン（ヘッダーモバイルボタン）で、右側の赤枠が下部に表示しているボタン（フッターモバイルボタン）です。
本記事では、こうしたモバイル用のボタンを設定する手順をご紹介していきます。
最後まで、一緒に頑張りましょう！！
それでは、どうぞ！
事前準備①：イメージを決める
「ヘッダーモバイルボタン」と「フッターモバイルボタン」を作成するにあたり、それぞれのイメージをあらかじめ決めておきます。
最初はよくわからないと思うので、私がつくった通りに真似してみるのもOKです。
参考【ヘッダーモバイルボタン】（上部）の設定
左から、①「メニュー」、②「ロゴ」、③「検索」を設定しています。
参考【フッターモバイルボタン】（下部）の設定
左から①「メニュー」、②「ホーム」、③「検索」、④「トップ」、⑤「サイドバー」を設定しています。
実際にやってみると、何となくわかってきます。まずはやってみましょう！
事前準備②：カスタムリンクの設定
続いて、事前準備の2つ目です。
ワードプレス管理ページの「外観」→「メニュー」を選択します。
上部の「表示オプション▼」を押し、「カスタムリンク」に チェックを入れます。
これで事前準備はOKです！
メニューの作成と設定
それでは、「ヘッダーモバイルボタン」、「フッターモバイルボタン」を作っていきます。
「ヘッダーモバイルボタン」のメニュー作成と設定
最初に「ヘッダーモバイルボタン」を作成していきます。
ヘッダーモバイルボタンの作成手順は、次のとおりです。
- メニューの作成
- メニュー項目の追加
- メニュー設定
【STEP１．メニューの作成】
まず、メニューの作成をします。
- 手順１[新しいメニューを作成しましょう]を押します。
- 手順２メニュー名にそれらしい名前を付けて[メニューを作成]を選択します。
私はシンプルに「ヘッダーモバイルボタン」で作りました。
- 手順３[メニューを保存]を押します。
【STEP２．メニュー項目の追加】
続いて、作成したメニューに項目を追加していきます。
「独自ボタン」には、次の種類が用意されています。
| URLコマンド | リンク文字列の例 | ボタンの役割 |
| #menu | メニュー | グローバルメニューをスライドインで表示 |
| #home | ホーム | フロントページへのリンクボタン |
| #share | シェア | シェアボタンを表示 |
| #search | 検索 | 検索フォームを表示 |
| #toc | 目次 | 目次に移動 |
| #top | トップ | ページトップに移動 |
| #prev | 前へ | 現在表示中の投稿ページの前のページを表示 |
| #next | 次へ | 現在表示中の投稿ページの次のページを表示 |
| #comments | コメント | コメント欄へ移動 |
| #logo | サイト名入力 | 横幅広めのサイトロゴが表示されるボタンを表示 |
カスタムリンクのURLに、定義されたURLコマンド（文字列）を貼り付けることで利用できます。
#は半角でないと上手くいかないので注意！
- 手順１メニュー項目（メニュー）を追加
カスタムリンクのURLに「#menu」、文字列「メニュー」で「メニューに追加」をクリック。
メニュー部分を作ります 
- 手順２メニュー項目（ロゴ）を追加
URL「#logo」、文字列「ロゴ」で「メニューに追加」をクリック。
ヘッダーロゴ部分を作ります 
参考Cocoon設定の「ヘッダー」タブにある「ヘッダーロゴ」で画像を設定しておくと画像が縮小化され、テキストより綺麗に表示されます。
ヘッダーロゴの設定 - 手順３メニュー項目（検索）を追加
最後に「#search」、リンク文字列に「検索」と入れて「メニューに追加」を押します。
検索部分を作ります 
3つの項目をすべて追加すると、このようになります。
参考：リンク文字列は「メニュー」→「MENU」など、お好みのものに変更可能です。
参考：メニュー項目は並び替えることもできます。
【STEP３．メニュー設定】
「ヘッダーモバイルボタン」に チェックを入れて「メニューを保存」を押せば、メニューの完成です。
ヘッダーモバイルボタンの設定は、OK！
「フッターモバイルボタン」のメニュー作成と設定
続いて、「フッターモバイルボタン」を作成していきます。
こちらですね。
手順は、「ヘッダーモバイルボタン」と同様です。
- メニューの作成
- メニュー項目の追加
- メニュー設定
【STEP１．メニューの作成】
- 手順１ワードプレス管理ページの「外観」→「メニュー」を選択します
- 手順２[新しいメニューを作成しましょう]を押します
- 手順３メニュー名にそれらしい名前を付けて[メニューを作成]を選択します。
※こだわらない人は「フッターモバイルボタン」と入れます
- 手順４[メニューを保存]を押します
【STEP２．メニュー項目の追加】
続いて、作成したメニューに項目を追加していきます。
- 手順１メニュー項目（メニュー）を追加
カスタムリンクのURLに「#menu」、文字列「メニュー」で「メニューに追加」をクリック。
- 手順２メニュー項目（ホーム）を追加
カスタムリンクのURLに「#home」 、文字列「ホーム」で「メニューに追加」をクリック。
- 手順３メニュー項目（検索）を追加
カスタムリンクのURLに「#search」 、文字列「検索」で「メニューに追加」をクリック。
- 手順４メニュー項目（目次）を追加
カスタムリンクのURLに「#toc」 、文字列「目次」で「メニューに追加」をクリック。
- 手順５メニュー項目（トップ）を追加
カスタムリンクのURLに「#top」 、文字列「トップ」で「メニューに追加」をクリック。
- 手順６メニュー項目（サイドバー）を追加
カスタムリンクのURLに「#sidebar」 、文字列「サイドバー」で「メニューに追加」をクリック。
【STEP３．メニュー設定】
全て追加したら、最後に「フッターモバイルボタン」に チェックを入れて「メニューを保存」を押せばメニューの完成です。
これで、90%完了です！あと少し！！
Cocoon設定
「ヘッダーモバイルボタン」、「フッターモバイルボタン」のメニューが完成しました。
あとは「Cocoon設定」を行えば、モバイルボタンを表示できます。
「Cocoon 設定」の「モバイル」タブをクリックします。
モバイルメニューの「ヘッダー・フッターモバイルボタン」を選択します。
設定が完了したら「変更をまとめて保存」を押します。
これで、モバイル用のボタンが表示されているはずです。
設定手順は以上です！お疲れさまでした！
さらにカスタマイズしたい・・・
例えば、「文字色」や「背景色」、「ロゴの大きさ」を変えたいという場合も出てくると思います。
実は、ヘッダーモバイルボタンは使用しているスキンによって色が変化するようです。
Cocoonのスキン、どんなものがある？
文字色や背景色、ロゴの大きさなどの変更をしたい場合は、ikuzoさんの記事が役に立ちます。
▼さらにカスタマイズする場合、参考にしてみてください。
参考記事
今回の記事は、Cocoon作成者のわいひらさんとikuzoさんの記事を参考に作成しました。
コメント