色々な方のブログを拝見していたらサイドバーにブログのカテゴリーをイラストアイコン付きでおしゃれに表示しているのを発見しました。
↑こんな感じです。こちらは私のサイトのものですが初めてこれを見たとき見やすくていいな！私もやってみたい！と思いました。
ということで本日はサイドバーのカテゴリー表示のカスタマイズ方法について記載していきます。カスタマイズというと難しいコード等を使うのかと思っていましたがそういったものは使わず初心者の私でも出来ました。
スマホやタブレットでも作ることが出来ましたので、参考になれば幸いです。
これ、なんていうの？
この表示のことを「ボックスメニュー」というそうです。主な手順は
- ボックスメニューを作成する
- ボックスメニューをウィジェットでサイトに表示させる
とてもシンプルです。それではやってみましょう！
ボックスメニューを作成する
メニューに表示させたい項目を決める
まずは「ダッシュボード」→「外観」→「メニュー」をクリックします。
「新しいメニューを追加しましょう」をクリック。
下へスクロールさせると「メニュー構造」の項目が出てきます。メニュー名（何でもOK）を入力したら「メニューを作成」
画面上にある「表示オプション」をクリックして必要なものにチェックを入れます。
今回は「固定ページ」「カテゴリー」「タイトル属性」「CSSクラス」にチェックを入れます。
続いてメニューに何を表示するか選択します。「メニュー項目を追加」欄で既存のカテゴリーを「すべて選択」→「メニューに追加」
これでボックスメニューに表示させたい項目が完成です！
メニューの名前、アイコン画像を設定する
ここからは各メニューの名前、アイコン画像を設定します！
ナビゲーションラベル（読者に見えるカテゴリーの名前）、CSSclass（アイコン画像）、説明（◯◯についての記事です等の解説）をそれぞれ入力していきます。
↑の画像が入力例なんですがCSSclassには何だかよくわからない言語が入っていますね…これはアイコンに何の画像を表示するか、ということを入力しているんです。私が使用しているアイコン画像はcocoonにデフォルトで入っている「Font Awesome」を利用しています。cocoonにはデフォルトでFont Awesome4と5が入っています。私は4を利用していますがどちらを利用するかはcocoon設定→「全体」→「サイトアイコンフォント」で選べるのでお好きな方をどうぞ。
Font Awesome4の方はこのページから好きなアイコン画像を選びます。
アイコン画像が決まったら↓の囲んである部分をテキストコピーしてCSSclassに貼り付けます。
この設定をすべてのアイコンで行い、最後に「メニューを保存」で完成です！
ボックスメニューをサイドバーに設置する
ボックスメニューの完成まできたらもう9割近くの工程が済みました。後はサイドバーに設置すればすべての作業は完了です！
ダッシュボード→外観→ウィジェットへ移動し、「サイドバー」の項目に【C】ボックスメニューをドラッグ&ドロップします。
右側の▼を押してメニュー名の中から「ボックスメニュー」を選択して「保存する」を押してサイトを見てみると…
出来ました〜！カテゴリーが増えたり追加したいときは保存したメニューの「ボックスメニュー」から「メニュー項目を追加」で同様にアイコン等を設定してあげてください！
まとめ
おしゃれで良いなあと思ったものの初心者でも出来るだろうか…？と不安に思っていましたが手順に沿って作っていったら無事に作成出来ました！cocoonは本当に万能ですね！今後も読者の方が見やすいサイト作りに励もうと思います！
お読みいただきましてありがとうございました！
ブログ初心者さんこちらの記事もおすすめです♪↓
