【Cocoon】ボックスメニューでサイドバーのカテゴリー表示をカスタマイズしよう

Cocoonサイドバーカスタマイズ Cocoon

サイドバーにおしゃれなボックス型のナビゲーションを設置したい

ブログのトップページやヘッダーが充実してくると、サイドバーに設置する人気記事とかカテゴリーとか、なんだかトップやヘッダーと同じものが並んでしまいませんか?

僕は同じものがたくさん並んでいました

そこでなんとか改善策を調べまして、サイドバーには見栄えのするボックスメニューを設置するようにしました!

おしゃれで見やすいブログはボックスメニューをよく採用していますよね

こういうのが作れるようになります
Cocoonボックスメニュー

本記事では、WordPressテーマCocoonを使用していて、サイドバーをカスタマイズしたいと思っているあなたへ向けて

  • ボックスメニューの
    • 作成方法
    • 設定方法
    • 工夫できるところ

などを画像たっぷりで詳しくご説明していきます。

この記事の手順に沿ってやれば必ずできます!

それでは早速本題に入っていきましょう!

サイドバーカスタマイズの事前準備と確認

まずはメニューを作成する前に確認しておきたい項目がありますのでチェックしていきます。

Font Awesome のバージョン

Font Awesomeふぉんとおーさむは無料で利用可能なWebアイコンフォントのことです。最新バージョンが5で1個前が4です。

▼Font Awesomeを使ったボックスメニュー▼
font awesomeを使ったボックスメニュー

バージョンによって今後入力する内容がちょっと変わってきます。

CocoonのデフォルトはFont Awesome4ですので本記事では4をメインに説明していきます。

あなたのCocoonの設定がFont Awesome4なのか5なのか調べるにはCocoon設定全体サイトアイコンフォントを確認してください。

カテゴリーや固定ページの作成

ボックスメニューにのせるためのページがないと困っちゃいますよね。

  • カテゴリー
  • タグ
  • 投稿記事
  • サイトマップなどの固定ページ

これらができて初めてメニューを作成できますので、事前に作成しておきましょう!

ボックスメニューにのせる項目の数は8個でなくても全然OKですよ。6個でも10個でも…偶数の方が見た目がいいです。

お問い合わせやサイトマップの作り方を詳しく説明したページもあるので、まだ作成していない方はそちらを確認ください。

ボックスメニューの設定方法

事前準備が完了したところで、いよいよメニュー作成に入ります。

専用のメニューを作る

ワードプレスの管理画面から、外観メニューと進んでください。

外観→メニュー

そしたら新しいメニューを作成しましょうを押してください。

新しいメニューを作成しましょう

メニュー名にそれらしい名前を付けてメニューを作成を選択

メニューを作成

ふつうに「ボックスナビ」というメニュー名にしました

そしたら、表示オプションを押して、CSSクラス概要にチェックを入れましょう。

画面上の方にある表示オプションを押して
表示オプション
CSSクラスと概要にチェックを入れる
CSSクラスと概要にチェック

50%くらい終了ですよ!あと半分がんばろー

表示させる項目の選択

そしたらメニュー項目を追加からボックスメニューに表示させる項目を選択していきましょう

メニュー項目を追加
  • カスタムリンク
    • ホーム
  • カテゴリー
    • 大学生活
    • 仕事
    • ブログ
    • 資産運用
    • 暮らし
  • 固定ページ
    • プロフィール
    • サイトマップ

僕はこれらを設定しています。

メニュー構造

項目ごとの個別設定

選択した項目ごとにそれぞれ

  • ナビゲーションラベル
  • CSSクラス(オプション)
  • 概要

これらを設定していきます。

項目の右側の矢印をクリックすると、追加設定オプションを表示できます
追加設定オプションの表示
こんな感じで入力したものがボックスメニューに反映されます
オプションとボックスメニューの関係

CSS class(オプション)て何入力すればいいかわかんない

CSS classに入力するのが、事前準備で確認したFont Awesomeってやつです!

Font Awesome4の場合はこちらのFont Awesome4のアイコンのページに行ってください。

そのあとどうやって記号をコピーするかは下の画像を確認してみましょう。

フォントオーサムの説明
▼上の画像の拡大▼
フォントオーサムの説明(拡大)

コピーしたクラス名をワードプレスの画面に戻ってCSS class(オプション)にペーストしましょう。

Font Awesome5の場合はこちらのFont Awesome5のアイコンページからCSSクラスをコピーしましょう

僕が使ったFont Awesomeのクラス名を表にしてまとめました

見本と同じアイコンでOKならば、下の表からコピーしてもOKです!

項目CSS classアイコン
ホームfa fa-home
大学生活fa fa-graduation-cap
仕事fas fa-user-tie
ブログfas fa-file-signature
資産運用fa fa-line-chart
暮らしfar fa-grin-squint
プロフィールfa fa-user
サイトマップfa fa-sitemap

すべての項目に対して設定ができたらメニューを保存しましょう!

メニューを保存

85%終了です!もうちょいがんばろー

作成したメニューを表示するように設定する

作成したメニューをサイドバーに表示するように設定します。ウィジェットで設定できますので、外観ウィジェットと進んでください。

外観→ウィジェット

そしたらボックスメニューを押しましょう。

ボックスメニューを押す

サイドバーを選択しウィジェットを追加。

サイドバーを選択しウィジェットを追加

サイドバーに追加されたボックスメニューのタイトル(MENUかメニューがいいと思います)を入力。

メニュー名で先ほど作成したボックスナビを選択して保存

作成したメニューを選択し保存

以上で設定終了です!一度あなたのブログのトップページを確認してみてください。

うまく表示できていれば大成功です!

ボックスメニューを創意工夫する

1個前の項目でひとまずのボックスメニューは完成しました。おめでとうございます。これからは、創意工夫してよりあなたらしいボックスメニューを作成することを目的とします。

Font Awesome⇒アイコン画像

ボックスメニューのアイコンをフォントオーサムのアイコンではなく、好きな画像にします。ちょっと大変ですが、ついてきてくださいね。

まずはメディア新規追加でアイコンとして使用する画像をアップロードしてください。

メディアのアップロード

ちなみにアイコン画像は下の2サイトで探せば大体そろいます。

次に、メディアライブラリでアップロードした画像を選択、メディアを編集の画面にて画像の上で右クリック⇒画像アドレスをコピー

画像アドレスをコピー

次は外観メニューへ行き、表示オプションを開いてタイトル属性にチェックを入れる

タイトル属性にチェック

ボックスメニューの項目ごと個別設定のところにタイトル属性が追加されているので、そこにコピーしたアドレスを貼り付け

アドレスを貼り付け

これでアイコンは画像になります。

▼こんな感じで画像がアイコンになります▼
全部画像に設定すれば僕の使用しているボックスナビになりますね。
ボックスメニューに画像を表示させた状態

色の変更

Font Awesomeでアイコンを表示している場合、色の変更ができます。やり方には次の2種類があります。それぞれ特徴とくちょうがありますので、あなたのやりたい方法でやってみましょう。

  1. キーカラーを変更する
  2. CSSを追記する

キーカラーを変更する

Font Awesomeのアイコンはコクーン設定のキーカラーによるので、ここを編集してあげると色が変わってくれます。

Cocoon設定全体キーカラー

Cocoon設定→全体
サイトキーカラーを変更すればボックスメニューの色が変わります
注意

ただ、ボックスメニュー以外の見出しの色なども全部一緒に色が変わってしまうので、キーカラーの変更には注意が必要です。

ボックスメニューの色だけ変更したいときはCSSを追記しないとだめです

CSSを追記する

CSSはよくわからないって人もたくさんいると思いますが、こっちの方法の方がボックスメニューだけ好きな色に変更できるので私としてはおすすめです。

やさしく手順を書くので、頑張ってついてきてください。まずはCopyボタンを押して下のコードをコピーしましょう。

Copy
.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;
} 

コピーしたCSSを子テーマのstyle.cssにペーストします。WordPressの画面から外観⇒テーマエディターと進んでください。

外観→テーマエディター

そしたら、

  1. Cocoon Childが選択されていることを確認
  2. スタイルシート(style.css)を選択
  3. あいているところ(下の方)に貼り付け
  4. ファイルを更新ボタンを押す
CSSを貼り付け

うまくいくとボックスメニューはこんな色になります。

ボックスメニューの色変更

あなたの好きな色にしたい場合は、あなたがペーストしたCSSの#2ca9e1の部分5か所を全部変更する必要があります。

▼外観→テーマエディターに追記したCSS▼
CSSの変更するところ

こちらのWEB色見本 原色大辞典-HTMLカラーコードを参照してどの色にするか決めましょう。

選んだ色のコードを#2ca9e1から書き換えてファイルを更新すればお気に入りの色に変更完了です。

サイドバー以外の場所に表示させる

ボックスナビはウィジェットで管理できますので、外観ウィジェットでボックスメニューの配置を指定することができます。

サイドバー以外にも投稿ページの下やトップページの上など好きな場所に配置すると回遊率UPです。

僕は投稿本文下にもボックスナビを配置しています
本文下にもボックスメニュー

ボックスナビを使って回遊率UPを狙おう

本記事では【Cocoon】ボックスメニューでサイドバーのカテゴリー表示をカスタマイズしよう

ということで、サイドバーのカスタマイズとしてボックスメニューをサイドバーに配置する方法を具体的にみてきました。

だいぶ詳しく書いてきたので、読むのにかなり時間がかかったと思います。お疲れさまでした。

あなたのブログもおしゃれにかわいくなったんじゃないでしょうか。こんないい方法があったのか!と知ったときは僕はとてもうれしかったです。

あなたもカスタマイズして自分の好きなようにして愛着を持ってブログ運営してくださいね!

Cocoonの「困った」を解決する記事

Cocoonの使い方

当ブログで一番読んでいただきたいのはCocoonの使い方の記事です。以下の点を参考書のように体系的にまとめているので、まずはここから読み始めるのをおすすめします。

  • WordPressの初期設定
  • Cocoonのダウンロードとインストール
  • Cocoonの初期設定
  • 記事の書き方
  • カテゴリー・タグ・固定ページの作成
  • 外観・デザインの整え方
  • 収益化

外観・デザインをカスタマイズ

特に本記事のようにブログの見た目をカスタマイズするのに使える記事は下記でまとめています。ブログをあなたらしくするためには必見です
あわせて読みたい【Cocoon】デザインを整える簡単おすすめカスタマイズまとめ

上記記事でまとめています

  • 吹き出し
  • フォント・文字サイズ
  • サイドバー
  • ファビコン(サイトアイコン)
  • ヘッダー
  • グローバルナビメニュー(ヘッダーメニュー)
  • Twitterシェア時に表示する画像の設定
  • 本文の幅・サイドバーの幅
  • トップページの表示形式
  • パンくずリスト
  • 行間と段落の間隔
  • 表(テーブル)
  • 目次
  • SNSシェアボタン・フォローボタン
  • Twitterの設置・連携
  • アイキャッチ画像
  • ブログカード
  • ヘッダー周りのアピール設定
  • フッター
  • モバイル(スマホ)表示メニュー
  • ボックスメニュー
  • 見出し
  • オリジナル画像の設定

コメント

  1. […] […]

    • 散水のブログさんにご紹介いただきました。ありがとうございました。

  2. はじめまして、峠様

    とても親切にわかりやすく解説していただいて
    ブログ初心者の私でもカスタムすることができました。

    おかげさまでブログの見栄えがだいぶんよくなりました。
    これからも参考にさせていただきます。
    今回は本当にありがとうございました。

    ちなみに私のブログです。
    https://nobu1200su4.com

    • ノブ様
      コメントありがとうございます。これからの励みになります。

      ブログも見させていただきました。
      本記事以外にも参考にいただいた記事があるようでとてもうれしいです。

      記事内容が最重要ですが、見た目もよくないと読んですらもらえないですからね。

      これからもためになる記事を書けるよう精進いたします。
      ありがとうございました。

  3. 峠様
    いきなりのコメント失礼します。

    手順通りにメニューの保存をしましたが、外観→ウィジェットに[C]ボックスメニューが表示されず困っています。

    何か原因はありますでしょうか…。

    Cocoonのバージョンは2.0.0.3になります。

    • 梅屋様

      ボックスメニューはcocoonのバージョン2.0.7からの機能になります。
      cocoonを最新の状態に更新してみてください。

  4. […] ≫ボックスメニューの作り方 […]

    • TagoBlogさんに掲載いただきました。ありがとうございました。