🇺🇸 English
Cocoon「ボックスメニュー」の作り方
ブログのサイドバーにあるカテゴリー一覧、文字ばかりで少し寂しい印象になっていませんか？無料テーマ「Cocoon」には、アイコン付きでタイル状に美しく整理できるボックスメニューという素晴らしい機能が標準で備わっています。
視覚的に分かりやすくなるため、読者さんを迷わせずにお目当てのカテゴリへ案内できるようになりますよ。今回は、初心者の方でも迷わず作れる基本の設置手順と、個性を出せるカラーカスタマイズのおまけ付きで詳しく解説します！
ステップ1：メニューの新規作成と項目の登録
まずは、ボックスメニューとして表示させたい中身を組み立てていきましょう。
- 「外観」➔「メニュー」を開く：WordPressの管理画面からアクセスします。
-
メニューを新規作成：1「新しいメニューを作成しましょう」をクリックする。2 「カテゴリー用メニュー」などわかりやすい名前を入力します。3 「メニューを作成」をクリックします。
-
カテゴリーを追加：4画面左側の「カテゴリー」一覧から、サイドバーに表示したい項目にチェックを入れて5「メニューに追加」をクリックします。
-
画面上部の表示オプションを開く：「リンクターゲット」と「CSSクラス」と「説明」にチェックをつけます。
ステップ2：お洒落なアイコンと説明文を添える
Cocoonのボックスメニューの最大の魅力は、アイコンとサブタイトルを表示できる点です。追加した各メニュー項目の右側にある矢印を開いて、設定を行いましょう。
-
「メニューの書式」を設定：1各項目を開くと表示される「CSS class」の欄に、Font Awesomeのクラス名（例：
fa fa-paletteなど）を入力します。2「説明」欄にアイコンの下に表示したいサブタイトルを入力します（空欄でも可）。
-
他のカテゴリーにもアイコンと説明を入力：今回追加した「カテゴリー」は３つでした。しかし、サイドバーに表示させるボックスメニューの場合は、バランスという観点から原則として「偶数」が基本となります。3表示させたいカテゴリーが少ない場合は、固定ページやカスタムリンクを追加して「偶数」にしましょう。最後に4「メニューを保存」をクリックします。
ステップ3：ウィジェットでサイドバーに設置する
作ったメニューを、実際にサイドバーに表示させます。
- 「外観」➔「ウィジェット」を開く：管理画面からウィジェットの設定画面に進みます。
-
「ボックスメニュー」を配置：1利用できるウィジェット一覧から「[C] ボックスメニュー」を探し、「サイドバー」を選んで「ウィジェットを追加」します。
-
タイトルの入力：2タイトルを入力し3手順１で設定したメニュー名を選択します。➔ 最後に「保存」をクリックします。
-
完成：サイドバーにこのように表示されていれば成功です！
アイコンとホバー枠線のカスタマイズをしよう
デフォルトの優しいオレンジ色も素敵ですが、「自分のブログのテーマカラーに合わせたい！」という方のために、ピンポイントで着せ替えるカスタムCSSをご紹介します。
以下のコードを子テーマの「style.css」または「追加CSS」にそのまま貼り付けるだけで、文字のバランスを壊すことなく、アイコンとマウスホバー時の枠線が美しいブルー系へとカスタマイズされますよ！
/* ==========================================================================
サイドバー：ボックスメニューのアイコン＆ホバー影カラー変更
========================================================================= */
/* 通常時のアイコンの色を変更する（例：スチールブルー） */
.box-menu-icon {
color: #4682b4; /* ★カラー変更はここ */
}
/* マウスを載せたとき（ホバー時）の枠線（影）*/
.nwa .box-menu:hover {
box-shadow: inset 2px 2px 0 0 #4682b4, 2px 2px 0 0 #4682b4, 2px 0 0 0 #4682b4; /* ★と同じカラーにする */
}
ぜひお好きなカラーでお試しください！
Cocoonではウィジェットのタイトルの先頭に「!」マークをつけると、管理画面でタイトルが確認できて、サイト内では非表示になりますのでお試しください！
送信中です
※コメントは最大500文字、1回まで送信できます
コメント Leave a Comment