ブログ

【Cocoon/カスタマイズ】サイドバーにアイコンボックスを表示させる

この記事は約6分で読めます。

こんにちは、まちゃりさです。

今回は、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のアイコンページにいきます。

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]ボックスメニュー」の▼ボタンを押し、設定画面を開きます。

[タイトル]に「メニュー」を入れます。※MENUなど好きなワードでOKです。

[メニュー名]に、先ほど作成したメニューを指定します。(私の場合は「ボックスナビ」です)

[save]を押し、[完了]を押して閉じます。

これでサイドバーにアイコン画像付きのメニューが設置されました。

実際に画面で確認してみましょう。

まちゃりさ
まちゃりさ

アイコンメニューのサイドバーへの設定は以上です!お疲れさまでした!!

他の活用例

アイコンボックスメニューは、投稿本文下などにも入れることができます。

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

まとめ

いかがでしたか?

今回は、サイドバーにアイコンボックスを表示させる方法についてご紹介しました。

アイコンボックスを設置すると、一気に凝ってるサイト感が出るので、いいですよね。

手順は少し複雑ですが、慣れれば簡単。

色々なアイコンを設定できるようになります。

今回は無料のアイコン画像を指定する手順を紹介しましたが、自分で準備した画像を指定することも可能です。

色々試しながら、一緒にすてきなブログサイトを作っていきましょう。

 

それでは、今回はここまで。

最後までお読みいただき、ありがとうございました。

↓ ↓ ↓

参考

本記事は、峠さんの記事(【Cocoon】サイドバーカスタマイズ!カテゴリーのボックスメニューは意外と難しくない)を参考に作成しています。

コメント

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