こんにちは、シャトーブリアンです。
WordPressに慣れてくると、いろいろとやってみたいことが増えてくる！
WordPressテーマ「Cocoon」のちょっとしたカスタマイズをメモしています。
今回は「フッターモバイルボタン」のカスタマイズ！
Cocoon「フッターモバイルボタンをカスタマイズする方法」
フッターモバイルボタンとは、スマホなどの下に出てくる案内ボタンのことです。ここに配置したいボタンやそのアイコンを設定していきます。
完成イメージ
Before
↓
After
カスタマイズは２ステップでできます。
・モバイルメニューボタンの選択
・アイコンの変更
１、ボタンの選択
まずは、モバイルメニューをどこに表示するか？というのを選択しておきます。今回は画面一番下のフッターに表示させます。
スマホで見たときのココです！
1、Cocoon設定の「モバイル」を押す
2、モバイルメニューの「フッターモバイルボタン」を選択
どんなボタンを表示する？
「ホーム、検索、シェア」など、表示できるボタンがいくつかあり、配置したい数や順番など、ボタンを自由に設定することができます。
例：Cocoon のサイト
例：このブログ
まずは、ボタンを作る前に１つ準備作業をしておきます。
1、外観の「メニュー」を押す
2、右上の「表示オプション▼」を押し、詳細メニュー設定を表示の「CSSクラス」にチェックを入れる
これで準備はOKです！
画面はこのままで、次はボタンを配置していきましょう♪
ボタンを作る
表示したいボタンを作っていきます。
何を表示させたいかわからないときは、一覧から選ぶこともできます。
1、メニュー構造のメニュー名に名前をつけ「メニューを作成」を押す
今回は「モバイルフッターメニュー 」という名前にしてみました。
2、左のメニュー項目から、ボタンにしたいものを選んで「メニューに追加」を押す
メニューに追加をすると、右側のメニュー構造に追加したメニューが表示されます。
URLコマンド一覧があるので、そこから選んで入れるだけ！
例えば、ホームボタンを作りたいとき。
カスタムリンク▼を押し、URLとリンク文字列を入力して、「メニューに追加」を押す。
リンク文字列：ボタンアイコンの下に表示させたい言葉
URLコマンド一覧
メニュー構造の上から順番に、モバイルでは左から表示されます。順番を変えたいときは項目をドラック＆ドロップで動かせます。
アイコンの変更
デフォルトのアイコンはこんな感じ。
これを自分の好きなアイコンに変更することができます。
アイコンをコピーして貼り付けるので、WordPress画面はそのままにして、別画面でアイコンを探しに行きましょう！
アイコン探し！
アイコンにあるコードをコピーして、先ほど作ったボタンに貼り付ける形になります。
いろんなサイトがありますが、こちらのサイトは使いやすい♪
このサイトの使い方はシンプル！
１、一覧から好きなアイコンを選ぶ
２、アイコンの名前の部分を押してclass名をコピー
青い部分押すとコピーされます。
こちらでコピーしたもをWordPressに貼り付けるので、設定したいアイコンがいくつかある場合はこちらの画面もそのままにしておきましょう。
WordPressに戻って…
メニュー構造の中に先ほど作ったボタンがあります。
ホームボタンを例に、選んだアイコンのコードを貼り付けていきましょう。
１、「カスタムリンク▼」を押す
２、「CSS class 」のところに「fa」と入れ、スペースを１つ入れてアイコン一覧でコピーしたものを貼り付ける
このアイコンの場合「fa-star」というコードがコピーされています。CSS classは「fa fa-star」となります。
同じようにアイコンを変えたいボタン全部にコードを貼り付けます。
これで自分好みのボタンが作成できました！
最後に作ったモバイルフッターメニューの表示位置を選択します。
メニュー設定の「フッターモバイルボタン」を選択し、「メニューを保存」を押す。
これで完成です！
スマホなどから確認してみてください♪
できた！
ボタンの色を変える方法
フッターモバイルボタンの色をお好きな色に変えることもできます。色の変更はCSSで行います。
完成イメージ
Before
↓
After
黒色だったのをサイトに馴染む色に合わせてみました。（アイコンは途中で変更したので Before と違うアイコンになっています…）
色を決める
まずは、変えたい色を探そう！
見つかったら色のコードをメモしておきます。
サイトの色と合わせたい場合
サイトのカラーと合わせたい場合は、Cocoon設定からお使いのサイトキーカラーを確認することができます。
1、Cocoon設定の「全体」を押す
2、サイトキーカラーの「色を選択」を押して、横に出てくる色のコードをメモしておく
好きな色から選びたい
カラーピッカーを使って自分の好きな色を探すことができます。
こちらのサイトは使いやすいですよ♪
HTML Color Codes
このサイトの使い方はシンプル！
１、カラーピッカーの下の丸を動かす
２、画面の好きな色のところを押す
３、カラーコードをコピー
CSSで色を変更
変えたい色の準備ができたら、WordPressのCSSで色を変更していきます。CSSは必ず子テーマに書き込みましょう！
1、外観の「テーマエディター」を押す
初めてCSSに書き込む場合には注意が出てくるので、よく読んで、OKだったら進もう♪
2、コードを追加
下記のコードを追加します。
CSSは最後の行から１行あけて書いてくださいね♪
.mobile-menu-buttons .home-menu-button > a {
color: #24d9e2;
}
モバイルメニューボタンの「ホームボタンの色を変えるよ！」というコードです。
このコードをコピーして貼り付けることができます。
ボタンの数だけCSSに貼り付けます。４つボタンがある場合は４つ同じものを貼り付けてください。
3、赤いところを変更する
コードの赤い部分を変更していきます。
home：どこのボタンか（URLコマンドの＃のうしろ。＃home →home）
＃24d9e2：カラーコード
URLコマンド一覧
こんな風になりましたか？
4、「ファイルを更新」を押す
完成です！
ちゃんと変更されたかスマホなどで確認してみよう♪
できたー！
文字色いろいろ
