Cocoonのボックスメニュー｜Font Awesomeアイコンと枠線の色を変更する方法（CSSコピペOK）

Cocoonのボックスメニューに「Font Awesomeのアイコン」を使うと、
デフォルトでは色がオレンジになります。

その色を変える方法です。

前提条件

以下のわいひらさんのサイトの手順で、２－7番まで進んでおいてください。

アイコンや画像が使える「ボックスメニュー」ショートコードの使い方

アイコンフォントや画像用いて、視覚的にわかりやすいボックスタイプのメニューを表示するショートコード機能の説明です。

つまり、

ボックスメニューを作成して、
Font Awesomeサイトから好きなアイコンのコードをメニュー画面にコピペして
メニューを保存してある、状態です。

いくみ

その後、アイコンと枠線の色を変える方法は、たったの２ステップ！

ボックスメニューのアイコンと枠線の色の変更方法

Step 1
好きな色のカラーコードを選ぶ。
Step 2
そのカラーコードを含めたCSSをコピペ。

これで「ボックスメニューのアイコンと枠の色」を一気に変えられます。

ボックスメニューによって違う色をつけたいときに使える方法も載せました。できあがり例はこちらです。（目次４）

好きな色（カラーコード）を選ぶ
色を変更するためのCSSコード（コピペOK）
1. CSSを貼り付ける場所（Cocoon設定）
プレビューで確認
ボックスごとに色を変えたい
おわりに

好きな色（カラーコード）を選ぶ

まずはアイコン・枠線に使いたい色のカラーコードを選びましょう。

「カラーコード」は以下のようなサイトにたくさん載っています。

アイコンと枠に違う色を設定することもできます。

色を変更するためのCSSコード（コピペOK）

以下をそのままコピーして、赤字の部分を自分が選んだカラーコードに変更します。

.box-menu-icon{
  color: #2ca9e1;
}

.box-menu:hover {
    box-shadow: inset 2px 2px 0 0 
#2ca9e1,2px 2px 0 0 #2ca9e1,2px 0 0 0 #2ca9e1,0 2px 0 0
    #2ca9e1;
}

（引用元：Cocoonフォーラム　 [解決済] ボックスメニューのキーカラーを変更したい）

いくみ

アイコンが１か所、枠線は４か所ですね。

CSSを貼り付ける場所（Cocoon設定）

１．[外観]メニューから[テーマエディター]を選びます。

２．右サイドの[スタイルシート]をクリック。

３．[子テーマ用のスタイルを書く]とあるセクションの[必要ならばここにコードを書く]とある下に貼り付けます。

４．記述エリアの下にある[ファイルを更新]ボタンをクリック。正しく記述できていると、以下のようなメッセージがでます。

いくみ

アッと言う間！

プレビューで確認

記事の編集画面に、ボックスメニュー用のショートコードを入力してみましょう。

ショートコードは以下です。””の中身をご自分のメニュー名にかえてくださいね。

[box_menu name="ボックスメニュー用に作ったメニューの名前を入れる"]

例：[box_menu name="Box - manuals"]

下書きとして保存してプレビューを開くと・・・！

いくみ

色が変わっているはずです！

サイドバーなど、ウィジェットで試してもOKです。

ウィジェットの使い方は以下のわいひらさんのサイトにあります。

「ボックスメニュー」ウィジェットの使い方

アイコンフォントや画像を利用したユーザーの利便性が高いボックス型メニューを作成する方法です。

ボックスごとに色を変えたい

以下のように２つのメニューを作って、それぞれのボックスメニューで色を変えたいときの手順をまとめました。

Font Awesomeアイコン色の変更方法

Step 1
メニュー画面でCSSクラス（任意の文字列）を追加。
（同じ色にしたいアイコンに同じ文字列を追加。）
Step 2
好きな色の名前を選ぶ。
Step 3
文字列と好きな色をCSSファイルに記述。

いくみ

以下で詳しく解説します。

Step 1： CSSクラス（文字列）を追加する

以下の手順で２－５まで終わらせます。

アイコンや画像が使える「ボックスメニュー」ショートコードの使い方

アイコンフォントや画像用いて、視覚的にわかりやすいボックスタイプのメニューを表示するショートコード機能の説明です。

すると、以下のような感じになっているはずです。

メニューの名前があって、ボックスメニューにしたいページやカテゴリーがまとまっている状態です。すでにアイコンのコードも入っています。

それぞれのページの▼をクリックして、１つ１つ作業していきます。

[CSS class (オプション)]に入力してあるFont Awesomeのコードの後ろに、スペース１つと任意の文字列を追加します。

いくみ

ご自分がわかりやすい文字列にするといいですね。

文字列の中にはスペースは含めません。

この文字列（CSSクラス）が、色の指定・変更をするときの印になります。

同じ色にしたいアイコンに、同じ文字列（CSSクラス）を追加ます。

後で、『任意の文字列（例：my-box）がついているアイコンはピンクにしてね！』などと設定できます。

いくみ

文字列を追加できたら、[メニューを保存]ボタンをクリックしておきましょう。

Step 2：色を選ぶ

アイコンを何色にするかを選びます。

この方法では、「カラーコード」ではなく、「色の名前」を選びます。

私は以下のサイトを参照させていただきました。

「fontawesomeで使える色名」というセクションをご覧ください。

fontawesomeの色指定｜CSSを使わない表示方法とカラチャート

fontawesomeはCSSで表示させるだけでなく、その他にも様々な方法があります。特にCSSを読み込む事でページスピードがダウンするようなら方法も考え穴押す必要がありますね。

私は「Salmon」を選びました。

Step 3： CSSファイルにコピペ

Step１の文字列とStep２の色の名前をCSSファイルに記述します。

以下をコピーして、『my-box』と『salmon』の部分をご自分で使った文字列・選んだ色の名前に置き換えてください。

.my-box {color: salmon}

貼り付ける場所は以下です。

１．[外観]メニューから[テーマエディター]を選びます。

２．右サイドの[スタイルシート]をクリック。

３．[子テーマ用のスタイルを書く]とあるセクションの[必要ならばここにコードを書く]とあるセクションに貼り付けます。

前述の方法と合わせて使う場合、以下のようになっていると思います。

４．記述エリアの下にある[ファイルを更新]ボタンをクリック。

複数の文字列（『 my-box1』『 my-box2』『 my-box3』『 my-box4』など）で複数色にする方は、複数種類の文字列と色の組み合わせを記述します。

例：

.my-box {color: salmon}
.my-box1 {color: lightseagreen}
.my-box2 {color: orange}

枠線の色は、「目次2番コピペするCSS」にあるコードを使って変更しましょう。

できあがり例です。

おわりに

色が変わったときの感動といったら・・・。

無論、どのように記述するかを私が知っていたわけもなく。

２つ目の方法は、以下のサルワカさんのサイトを参照して学びました。

【保存版】Font Awesomeの使い方：Webアイコンフォントを使おう

導入方法から基本的な使い方、「Font Awesome Animation」でさまざまなアニメーション効果を加える方法まで丁寧に解説します。

いくみ

ありがとうございました。

Font Awesomeアイコンを使うと、CSSファイルの色名を１か所で変えるだけで、該当のアイコン色が全部変わるので、とても便利ですね！

それぞれのボックスメニューごとで、4色作ってみました♪。

ブログメニュー

ブログマニュアル

その他おススメ

当ブログ情報

アイキャッチ画像は

mcmikeによるPixabayからの画像