【Cocoon】サイドバーカスタマイズ!カテゴリーのボックスメニューは意外と難しくない

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

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

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

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

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

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

こういうのが作れるようになります

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

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

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

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

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

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

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

Font Awesome のバージョン

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

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

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

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

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

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

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

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

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

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

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

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

専用のメニューを作る

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

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

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

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

そしたら、表示オプションを押して、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設定全体キーカラー

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

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

ボックスメニューの色だけ変更したいときは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の#2ca9e1の部分5か所を全部変更する必要があります。

▼外観→テーマエディターに追記したCSS▼

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

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

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

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

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

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

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

本記事では【Cocoon】サイドバーカスタマイズ!カテゴリーのボックスナビは意外と難しくない

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

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

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

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

Cocoon関連記事

本記事以外にもCocoonに関する記事を書いています。そちらもどうぞご覧になってください。

Cocoon歴1ヶ月くらいの人向け

【Cocoon】ボタンの使い方が余裕でわかるようになる【ブロックエディタ】
【Cocoon】スライドショーを設定する方法まとめ
【Cocoon】アイキャッチ画像サイズを統一して揃える設定方法
【Cocoon】アフィリエイト広告の貼り方を始めから丁寧に【解説】
【Cocoon】アドセンス広告の貼り方を始めから丁寧に【解説】
Cocoonスキン一覧まとめ!カスタマイズなしでもおしゃれに決まる
【Cocoonスキン】おすすめ4選!とにかくブログをいい感じにしたい
【Cocoon】固定ページを一覧表示させる方法【ヘッダー/フッターほか】
【Cocoon】記事の書き方!投稿画面の使い方を画像たっぷり丁寧に解説【初心者向け】
【Cocoon】パンくずリストを投稿/カテゴリー/固定の各ページに設置する方法
Cocoonブロック一覧!全機能まとめ【初心者向け】
【Cocoon】お問い合わせフォームの設置方法を初心者向けに画像たっぷりで説明する
【Cocoon】目次が表示されない⁉作り方完全解説
【Cocoon】投稿画面ツールバー機能一覧|文字色・ルビほか【初心者向け】
【Cocoon】サイドバーの基本的な使い方【初心者向け】
【Cocoon】吹き出しの基本的な使い方/右に変更など【初心者向け】

Cocoon歴半年くらいの人向け

【Cocoon】ショートコードの使い方!便利さをマジで知ってもらいたい
【Cocoon】Twitter(ツイッター)埋め込みは秒でできる
【Cocoon】テーブル/表を作成する方法を丁寧に解説(ブロックエディタ)
【Cocoon】行間と段落の間隔を調整する方法【初心者向け】細部にこだわろう
【Cocoon】トップページがボタン1つでサイト型にできるようになった【衝撃】
【Cocoon】カスタマイズまとめ!初心者でもわかりやすく解説
【Cocoon】リスト(箇条書き)をボックスに入れる超簡単な方法【カスタマイズ不要】
【Cocoon】ブログカードの基本的な使い方【初心者向け】
【Cocoon】サイドバーで目次をスクロール追従させる方法【初心者向け】

Cocoon歴がもっと長い人向け

【Cocoon】サイドバーカスタマイズ!カテゴリーのボックスメニューは意外と難しくない
【Cocoon】ブログカードカスタマイズ「続きを読む」を入れる/タイトルのみにする!
【Cocoon】目次カスタマイズ‼見やすくシンプルおしゃれにしよう【CSSコピペでOK】
【Cocoon】スマホ表示簡単カスタマイズ‼ハンバーガーメニューを固定追従させる

コメント

  1. […] […]

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

  2. はじめまして、峠様

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

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

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

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

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

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

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

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

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

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

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

    • 梅屋様

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

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

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

タイトルとURLをコピーしました