サイドバーにおしゃれなボックス型のナビゲーションを設置したい
ブログのトップページやヘッダーが充実してくると、サイドバーに設置する人気記事とかカテゴリーとか、なんだかトップやヘッダーと同じものが並んでしまいませんか？
僕は同じものがたくさん並んでいました
そこでなんとか改善策を調べまして、サイドバーには見栄えのするボックスメニューを設置するようにしました！
おしゃれで見やすいブログはボックスメニューをよく採用していますよね
本記事では、WordPressテーマCocoonを使用していて、サイドバーをカスタマイズしたいと思っているあなたへ向けて
- ボックスメニューの
- 作成方法
- 設定方法
- 工夫できるところ
などを画像たっぷりで詳しくご説明していきます。
この記事の手順に沿ってやれば必ずできます！
それでは早速本題に入っていきましょう！
サイドバーカスタマイズの事前準備と確認
まずはメニューを作成する前に確認しておきたい項目がありますのでチェックしていきます。
Font Awesome のバージョン
Font Awesomeは無料で利用可能なWebアイコンフォントのことです。最新バージョンが５で1個前が４です。
バージョンによって今後入力する内容がちょっと変わってきます。
CocoonのデフォルトはFont Awesome4ですので本記事では4をメインに説明していきます。
あなたのCocoonの設定がFont Awesome4なのか5なのか調べるにはCocoon設定→全体→サイトアイコンフォントを確認してください。
カテゴリーや固定ページの作成
ボックスメニューにのせるためのページがないと困っちゃいますよね。
- カテゴリー
- タグ
- 投稿記事
- サイトマップなどの固定ページ
これらができて初めてメニューを作成できますので、事前に作成しておきましょう！
ボックスメニューにのせる項目の数は８個でなくても全然OKですよ。６個でも１０個でも…偶数の方が見た目がいいです。
お問い合わせやサイトマップの作り方を詳しく説明したページもあるので、まだ作成していない方はそちらを確認ください。
ボックスメニューの設定方法
事前準備が完了したところで、いよいよメニュー作成に入ります。
専用のメニューを作る
ワードプレスの管理画面から、外観→メニューと進んでください。
そしたら新しいメニューを作成しましょうを押してください。
メニュー名にそれらしい名前を付けてメニューを作成を選択
ふつうに「ボックスナビ」というメニュー名にしました
そしたら、表示オプションを押して、CSSクラスと概要にチェックを入れましょう。
５０％くらい終了ですよ！あと半分がんばろー
表示させる項目の選択
そしたらメニュー項目を追加からボックスメニューに表示させる項目を選択していきましょう
- カスタムリンク
- ホーム
- カテゴリー
- 大学生活
- 仕事
- ブログ
- 資産運用
- 暮らし
- 固定ページ
- プロフィール
- サイトマップ
僕はこれらを設定しています。
項目ごとの個別設定
選択した項目ごとにそれぞれ
- ナビゲーションラベル
- CSSクラス（オプション）
- 概要
これらを設定していきます。
CSS class(オプション)て何入力すればいいかわかんない
CSS classに入力するのが、事前準備で確認したFont Awesomeってやつです！
Font Awesome4の場合はこちらのFont Awesome4のアイコンのページに行ってください。
そのあとどうやって記号をコピーするかは下の画像を確認してみましょう。
コピーしたクラス名をワードプレスの画面に戻ってCSS class(オプション)にペーストしましょう。
僕が使った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⇒アイコン画像
ボックスメニューのアイコンをフォントオーサムのアイコンではなく、好きな画像にします。ちょっと大変ですが、ついてきてくださいね。
まずはメディア→新規追加でアイコンとして使用する画像をアップロードしてください。
ちなみにアイコン画像は下の２サイトで探せば大体そろいます。
次に、メディア→ライブラリでアップロードした画像を選択、メディアを編集の画面にて画像の上で右クリック⇒画像アドレスをコピー
次は外観→メニューへ行き、表示オプションを開いてタイトル属性にチェックを入れる
ボックスメニューの項目ごと個別設定のところにタイトル属性が追加されているので、そこにコピーしたアドレスを貼り付け
これでアイコンは画像になります。
全部画像に設定すれば僕の使用しているボックスナビになりますね。
色の変更
Font Awesomeでアイコンを表示している場合、色の変更ができます。やり方には次の2種類があります。それぞれ特徴がありますので、あなたのやりたい方法でやってみましょう。
- キーカラーを変更する
- CSSを追記する
キーカラーを変更する
Font Awesomeのアイコンはコクーン設定のキーカラーによるので、ここを編集してあげると色が変わってくれます。
Cocoon設定→全体→キーカラー
ただ、ボックスメニュー以外の見出しの色なども全部一緒に色が変わってしまうので、キーカラーの変更には注意が必要です。
ボックスメニューの色だけ変更したいときはCSSを追記しないとだめです
CSSを追記する
CSSはよくわからないって人もたくさんいると思いますが、こっちの方法の方がボックスメニューだけ好きな色に変更できるので私としてはおすすめです。
やさしく手順を書くので、頑張ってついてきてください。まずは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の画面から外観⇒テーマエディターと進んでください。
そしたら、
- Cocoon Childが選択されていることを確認
- スタイルシート（style.css）を選択
- あいているところ（下の方）に貼り付け
- ファイルを更新ボタンを押す
うまくいくとボックスメニューはこんな色になります。
あなたの好きな色にしたい場合は、あなたがペーストしたCSSの#2ca9e1の部分5か所を全部変更する必要があります。
こちらのWEB色見本 原色大辞典-HTMLカラーコードを参照してどの色にするか決めましょう。
選んだ色のコードを#2ca9e1から書き換えてファイルを更新すればお気に入りの色に変更完了です。
サイドバー以外の場所に表示させる
ボックスナビはウィジェットで管理できますので、外観→ウィジェットでボックスメニューの配置を指定することができます。
サイドバー以外にも投稿ページの下やトップページの上など好きな場所に配置すると回遊率UPです。
ボックスナビを使って回遊率UPを狙おう
本記事では【Cocoon】ボックスメニューでサイドバーのカテゴリー表示をカスタマイズしよう
ということで、サイドバーのカスタマイズとしてボックスメニューをサイドバーに配置する方法を具体的にみてきました。
だいぶ詳しく書いてきたので、読むのにかなり時間がかかったと思います。お疲れさまでした。
あなたのブログもおしゃれにかわいくなったんじゃないでしょうか。こんないい方法があったのか！と知ったときは僕はとてもうれしかったです。
あなたもカスタマイズして自分の好きなようにして愛着を持ってブログ運営してくださいね！
Cocoonの「困った」を解決する記事
Cocoonの使い方
当ブログで一番読んでいただきたいのはCocoonの使い方の記事です。以下の点を参考書のように体系的にまとめているので、まずはここから読み始めるのをおすすめします。
外観・デザインをカスタマイズ
特に本記事のようにブログの見た目をカスタマイズするのに使える記事は下記でまとめています。ブログをあなたらしくするためには必見です。
あわせて読みたい【Cocoon】デザインを整える簡単おすすめカスタマイズまとめ
コメント
[…] […]
散水のブログさんにご紹介いただきました。ありがとうございました。
はじめまして、峠様
とても親切にわかりやすく解説していただいて
ブログ初心者の私でもカスタムすることができました。
おかげさまでブログの見栄えがだいぶんよくなりました。
これからも参考にさせていただきます。
今回は本当にありがとうございました。
ちなみに私のブログです。
https://nobu1200su4.com
ノブ様
コメントありがとうございます。これからの励みになります。
ブログも見させていただきました。
本記事以外にも参考にいただいた記事があるようでとてもうれしいです。
記事内容が最重要ですが、見た目もよくないと読んですらもらえないですからね。
これからもためになる記事を書けるよう精進いたします。
ありがとうございました。
峠様
いきなりのコメント失礼します。
手順通りにメニューの保存をしましたが、外観→ウィジェットに[C]ボックスメニューが表示されず困っています。
何か原因はありますでしょうか…。
Cocoonのバージョンは2.0.0.3になります。
梅屋様
ボックスメニューはcocoonのバージョン2.0.7からの機能になります。
cocoonを最新の状態に更新してみてください。
[…] ≫ボックスメニューの作り方 […]
TagoBlogさんに掲載いただきました。ありがとうございました。
丁寧すぎて本当に助かります！
どういたしまして