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

Cocoonサイドバーカスタマイズブログ

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

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

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

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

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

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

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

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

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

CSSはいじりません。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でアイコンを表示している場合、色の変更ができます。

Cocoon設定全体キーカラー

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

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

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

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

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

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

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

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

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

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

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

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

関連記事

当ブログにはCocoonのカスタマイズに関する記事がほかにもありますので、ぜひそちらもご覧になってください。

初心者向け

カスタマイズ

コメント

プロフィール
峠

とうげです。30代サラリーマンです。地方進学校→一浪→大学理工学部→就職。行動することを大切にしています。投資、アフィリエイト、ブログやってます。インデックス投資で1000万円運用中。本業は地方に長期出張する施工管理→技術職へ異動。小さいときはロボット作り屋さんになりたかった。

峠をフォローする
タイトルとURLをコピーしました