こんにちは、まちゃりさです。
今回は、Cocoonカスタマイズのうち、サイドバーにアイコンボックスを表示させる方法について解説していきます。
「アイコンボックス」は、このようなリンク付きの画像のことです。

私は、こんな感じで、ホーム、カテゴリ4つ、プロフィール、サイトマップを設定しています。
画像をクリックすると各リンクに飛べるようになっています。

視覚的な操作ができるので、便利です!
この記事では、サイドバーにアイコンボックスを表示させる方法について、解説していきます★

最後まで一緒に頑張りましょう!!
それでは、どうぞ!
事前準備① イメージの確認
どのような画像で何のリンクを付けたいのか?イメージをあらかじめ決めておきます。


最初はよくわからないという方は、私が作成した通りに真似しても、もちろんOKです。
事前準備② 表示オプション設定
ワードプレス管理画面から、[外観]→[メニュー]を選択します。

表示オプション▼を選択して、[カスタムリンク]と[CSSクラス]にチェックを入れておきます。

事前準備③ Font Awesome のバージョン確認
「Font Awesome」とは、無料で利用できるWebアイコンフォントのことです。
これのバージョンを確認しておきます。
Cocoonのデフォルトは「Font Awesome4」(バージョン4)ですが、私は「Font Awesome5」(バージョン5)を使用しています。
自身のFont Awesomemのバージョンを調べるには、[Cocoon設定]→[全体]→[サイトアイコンフォント]を確認してください。

それぞれのバージョンに応じて、後から使用するアイコンが異なりますので、少し覚えておいてください。

これで準備OKです!
メニューの作成
さて、それではまず表示用のメニューを作成していきます。
ワードプレス管理画面の[外観]→[メニュー]を選択します。

①[新しいメニューを作成しましょう]を押します。

②メニュー名にそれらしい名前を付けて[メニューを保存]を選択します。私は「ボックスナビ」としました。
③[メニューを保存]を押します。
メニュー項目の追加
私の設定しているアイコンボックスメニューは大きく分けて次の4つです。
①ホーム(カスタムリンク)、②カテゴリー(4つ)、③プロフィール(固定)、④サイトマップ(固定)

今回は、それぞれの設定方法をご紹介していきます。
まず、「ホーム」から。ここです。

左側の「メニュー項目を追加」から、「カスタムリンク」を選びます。
URLに「サイトのトップページアドレス(http://)」、リンク文字列「ホーム」で「メニューに追加」をクリック。

次に「カテゴリー」を設定します。これらです。

カテゴリーから好きなカテゴリーにチェックを入れ、「メニューに追加」をクリック。

最後に、プロフィールとサイトマップです。こちらです。

固定ページから探し、チェックを入れて「メニューに追加」をクリックします。

アイコン画像の設定
メニューをすべて追加したら、それぞれのメニュー項目に画像を設定していきます。
項目の詳細(▼)を開きます。

「CSS class(オプション)」にアイコン画像のCSSを入れていきます。
ここで、事前準備③で確認した「Font Awesome」のバージョンにあわせたアイコンページにいきましょう。
▶Font Awesome4の場合は、こちらのFont Awesome4のアイコンページにいきます。
▶Font Awesome5の場合は、こちらのFont Awesome5のアイコンページにいきます。

好きな画像を検索するかスクロールで選び、クリックします。

<i class=”以下に書かれている部分をコピーしていきます。


この画像の例だと、下の赤枠部分をコピーして貼り付けます。
<i class="fab fa-apple"></i>
ちなみに、私が使用している画像のCSSは、ご覧のとおり。

「ホーム」 fa fa-home

「すてる」 fa fa-trash

「そうじ」 fa fa-pagelines

「かたづけ」 fa fa-inbox

「せいかつ」 fa fa-child

「プロフィール」 fa fa-user

「サイトマップ」 fa fa-sitemap
ナビゲーションラベルを変えることで、表示名を変えることも可能です。

最後まで設定したら、[メニューを保存]をクリックします。


これで80%終了!あと少しです!
ウィジットの設定
作成したメニューをサイドバーの「ウィジット」に設定していきます。
[外観]→[ウィジット]を選択します。
左側から「[C]ボックスメニュー」を探し、右側にある「サイドメニュー」へ向かってドラック&ドロップします。

ドラック後、「[C]ボックスメニュー」の▼ボタンを押し、設定画面を開きます。

これでサイドバーにアイコン画像付きのメニューが設置されました。
実際に画面で確認してみましょう。


アイコンメニューのサイドバーへの設定は以上です!お疲れさまでした!!
他の活用例
アイコンボックスメニューは、投稿本文下などにも入れることができます。

好きな場所に設置して、ブログサイトの回遊率を上げることができます。

まとめ
いかがでしたか?
今回は、サイドバーにアイコンボックスを表示させる方法についてご紹介しました。
アイコンボックスを設置すると、一気に凝ってるサイト感が出るので、いいですよね。
手順は少し複雑ですが、慣れれば簡単。
色々なアイコンを設定できるようになります。
今回は無料のアイコン画像を指定する手順を紹介しましたが、自分で準備した画像を指定することも可能です。
色々試しながら、一緒にすてきなブログサイトを作っていきましょう。
それでは、今回はここまで。
最後までお読みいただき、ありがとうございました。
参考
本記事は、峠さんの記事(【Cocoon】サイドバーカスタマイズ!カテゴリーのボックスメニューは意外と難しくない)を参考に作成しています。
コメント