【WordPressテーマCocoon】ボックスメニューの設定と使い方

ちょっとおしゃれなボックス型のメニューをサイドバーに設置してみました。
アイコンは、FontAwesome4、FontAwesome5より選択して入力します。また、アイコンの代わりに画像を使用することもできるので、自由にカスタマイズが楽しめます。ボックスメニューの設定と使い方を説明します。

ボックスメニューの完成図

12ヶ月以上の新規契約で、最大45,000円キャッシュバック
キャンペーン期間:2021年11月18日(木)18:00 ~ 2021年12月2日(木)18:00まで

プラン契約特典の「独自ドメイン永久無料特典」

サーバーご契約者様が、独自ドメインを1つ無料でご利用いただけます。
「.com」や「.net」などの人気ドメインが、サーバー契約が続く限り永久無料です。

エックスサーバー

 

スポンサーリンク

Cocoonボックスメニューの作成

アイコンのフォント設定

Cocoonでは、 Font Awesome4、Font Awesome5のアイコンフォントをどちらにするかを設定できます。アイコンを使用する時には設定を確認しておきましょう。

「全体」タブの選択

アイコンのフォント設定の画面推移

サイトアイコンフォントの選択

画面をスクロールして、サイトアイコンフォントの項目を探して、アイコンフォントを選択します。FontAwesome5がお薦めです。

サイトアイコンフォントの選択画面

選択後は、「変更をまとめて保存」をクリックします。

新規メニューの作成

ボックスメニューを使用するには、WordPressでメニューを作成して、ウィジェットのボックスメニューをサイドバー等に挿入して使用します。

メニューの選択

WordPressの管理画面の外観からメニューを選択して、新しくメニューを作成します。

新規メニューの作成ボタン

メニュー名の入力

ここでは、わかりやすく「ボックスメニュー」としました。

メニュー名の入力画面

表示オプションの設定

メニューを作成したら「表示オプション」から「CSSクラス」と「説明」を有効にしておきます。

表示オプションの設定画面

メニュー項目の追加

「メニュー項目を追加」から作成したいメニューを選択していきます。

メニューの選択画面

個別メニューの設定

個々のメニューに対して「タイトル(ナビゲーションラベル)」,「アイコン(CSS class)」,「サブキャプション(説明)」を入力します。
ここでは、「ホーム」メニューの設定について説明しますので、「WordPress」~「サーバー」メニューについては、同様に設定してください。

個別メニューの設定画面
  • ナビゲーションラベル
    ナビゲーションラベルはメニュータイトルになります。
  • CSS class(オプション)
    Font Awesome4、Font Awesome5より選択したアイコンのクラスを入力します。
  • 説明
    サブキャプションです。
CSS class(オプション)の検索

Font Awesome5でアイコンを設定する場合は、アイコンページからアイコンを選択します。

アイコンの一覧画面

スクロールして、アイコンを選択します。

アイコンの選択画面
アイコンのクラス名のコピー

アイコンを選択すると、個別ページが表示されますので、アイコンのクラス名をコピーします。

アイコンの個別ページ

CSS class(オプション)に張り付けると<i class=”fas fa-home”>と貼られるのでクラス名のみ(fas fa-home)で、不要な箇所は削除します。

CSS class(オプション)の入力項目

メニューの保存

個別メニューの設定が全て終わりましたら、「メニューの保存」をクリックします。

「メニューの保存」ボタン

Cocoonボックスメニューの設置

サイドバーに追加

ウィジェットの追加

ウィジェットの追加画面遷移

「ボックスメニュー」の選択

メニューで設定した「ボックスメニュー」を選択します。

メニュー名の選択画面

サイドバーの確認

サイドバーに設置されました。

ボックスメニュー完成画面

Cocoonボックスメニューのカスタマイズ

アイコンの色の変更

変更CSSの確認

Cocoon フォーラムで「わいひら」さんが、アイコンや、ホバー枠の色を変更するcssを記述されているのでそちらを使用して変更します。

CSSのソース表示画面

注意:
ボックスメニューのアイコンの色は、「キーカラーを変更すると、色が反映される」とCocoonのボックスメニューの解説で記載されていますが、キーカラーを変更すると、サイト全体の色も変更となりますので、CSSで変更します。

子テーマのCSSの変更

CSSの表示
子テーマのCSSの表示画面
CSSの変更
CSS変更のソース表示画面

留意:
ボックスメニューも複数作成できますので、それぞれのボックスメニューでアイコンの色を変える場合は、メニュー作成時のアイコンフォントのクラス名を入力した箇所に、任意のクラス名を追加して、そのクラス名で子テーマCSSで色を指定します。

<メニューにクラス名を追加>

ウィジェットの設定画面

<CSSの追記>
子テーマのcssへ追記して任意のclass名で色を記述します。

CSS変更のソース表示画面

12ヶ月以上の新規契約で、最大45,000円キャッシュバック
キャンペーン期間:2021年11月18日(木)18:00 ~ 2021年12月2日(木)18:00まで

プラン契約特典の「独自ドメイン永久無料特典」

サーバーご契約者様が、独自ドメインを1つ無料でご利用いただけます。
「.com」や「.net」などの人気ドメインが、サーバー契約が続く限り永久無料です。

エックスサーバー

 

WordPress
スポンサーリンク
シェアする
管理人
gungii

どうも、こんにちは!gungii(ガンジー)と申します。
2012年頃、一度に大腸がんと前立腺がんを患い、2ヶ月位入院していた為、職場の部下より、゛がんの爺さん゛とのあだ名をつけられ、以降、gungii(癌爺)と名乗っています。2021年06月でリタイアして、リタ活中です。パソコン大好きシニアが、これまでインプットしてきた経験と知識をアウトプットすることで、皆さんのお役に立てればうれしく思います。

gungiiをフォローする
gungiiのなるほどHack&Tips

コメント