PR

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

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

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

初回のご利用料金が最大30%オフ!

キャンペーン期間中に、新規にお申し込みいただいたサーバーアカウント
スタンダードプラン12ヵ月契約:20%OFF・・ 1,100円   →   880円

キャンペーン期間:2024年1月29日(月)12:00 ~ 2024年2月26日(月)12:00まで

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

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

エックスサーバー

 

スポンサーリンク

Cocoonボックスメニューの設定と使い方(動画)

「Cocoonボックスメニューの設定と使い方(動画)」は、こちら

スポンサーリンク

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

アイコンのフォント設定

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

「全体」タブの選択

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

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

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

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

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

新規メニューの作成

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

メニューの選択

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

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

メニュー名の入力

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

WordPress Cocoon メニュー名の入力画面

表示オプションの設定

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

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

メニュー項目の追加

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

WordPress Cocoon メニューの選択画面

個別メニューの設定

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

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

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

アイコンの一覧画面

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

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

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

アイコンの個別ページ

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

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

メニューの保存

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

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

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

サイドバーに追加

ウィジェットの追加

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

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

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

WordPress Cocoon メニュー名の選択画面

サイドバーの確認

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

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

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

アイコンの色の変更

変更CSSの確認

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

CSSのソース表示画面

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

子テーマのCSSの変更

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

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

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

WordPress Cocoon ウィジェットの設定画面

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

CSS変更のソース表示画面

初回のご利用料金が最大30%オフ!

キャンペーン期間中に、新規にお申し込みいただいたサーバーアカウント
スタンダードプラン12ヵ月契約:20%OFF・・ 1,100円   →   880円

キャンペーン期間:2024年1月29日(月)12:00 ~ 2024年2月26日(月)12:00まで

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

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

エックスサーバー