せいかつブログ

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

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

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

今回は、Cocoonカスタマイズのうち、サイドバーにアイコンボックスを表示させる方法について解説していきます。

 

アイコンボックス」は、このようなリンク付きの画像のことです。

これがアイコンボックスです
これがアイコンボックスです

私は、このように

  • ホーム画面
  • カテゴリー(4つ)
  • プロフィール
  • サイトマップ

の4種類を設定しています。

画像をクリックすれば、それぞれのリンクに飛べるようになっています。

まちゃりさ
まちゃりさ

視覚的な操作ができるので、便利です!

 

本記事では、サイドバーにアイコンボックスを表示させる方法について、解説していきます。

まちゃりさ
まちゃりさ

最後まで一緒に頑張りましょう!!

それでは、どうぞ!

スポンサーリンク

事前準備① イメージの確認

事前準備の1つ目です。

どのような画像に、何のリンクを付けたいのか?

具体的なイメージをあらかじめ決めておきます。

 

私のサイトでは、下の画像のイメージで作成しています。

どのような画像に、どのリンクを付けたいかイメージを決めておきます
どのような画像に、どのリンクを付けたいかイメージを決めておきます

例えば、「人」のマークをクリックすれば、「プロフィール画面」に遷移します。

人のマークをクリックすると、プロフィール画面に遷移します。
人のマークをクリックすると、プロフィール画面に遷移します。

奇数個だと見栄えが悪くなるので、偶数個にするのがおすすめです。

まちゃりさ
まちゃりさ

よくわからない」という方は、私が作成した通りに真似しても、もちろんOKです。

↑目次に戻る

事前準備② 表示オプション設定

続いて、準備の2つ目です。

手順

ワードプレス管理画面から、[外観]→[メニュー]を選択します。

ワードプレス管理画面から、[外観]→[メニュー] をクリックします
ワードプレス管理画面から、[外観]→[メニュー] をクリックします

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

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

↑目次に戻る

事前準備③ Font Awesome のバージョン確認

準備の3つ目は、「Font Awesome」のバージョン確認です。

Font Awesomeとは?

無料で利用できるWebアイコンフォントのことです。

Cocoonのデフォルトは「Font Awesome4」(バージョン4)になっています。

私は「Font Awesome5」(バージョン5)を使用しています。

手順

自身のFont Awesomemのバージョンを調べるには、[Cocoon設定]→[全体]→[サイトアイコンフォント]を確認してください。

[Cocoon設定]→[全体]→[サイトアイコンフォント]を確認

それぞれのバージョンに応じて、後から使用するアイコンが異なります。

どのバージョンを使用しているか、覚えておいてください。

まちゃりさ
まちゃりさ

これで準備OKです!

↑目次に戻る

それでは、実際にアイコンボックスを作成していきましょう。

まずは、表示用の「メニュー」を作成していきます。

 

手順
メニューの作成手順
  • 手順1
    ワードプレス管理画面の[外観]→[メニュー]を選択します。
    ワードプレス管理画面の[外観]→[メニュー]を選択します。
    ワードプレス管理画面の[外観]→[メニュー]を選択します。
  • 手順2
    [新しいメニューを作成しましょう]をクリックします。
    [新しいメニューを作成しましょう]をクリックします。
    [新しいメニューを作成しましょう]をクリックします。
  • 手順3
    メニュー名に、それらしい名前を付けます。

    ※私は「ボックスナビ」としました。

  • 手順4
    最後に、[メニューを保存]を押します。

↑目次に戻る

作成したメニューの項目を追加していきます。

私の設定しているアイコンボックスメニューは大きく分けて、次の4つです。

  1. ホーム画面(カスタムリンク)
  2. カテゴリー(4つ)
  3. プロフィール(固定ページ)
  4. サイトマップ(固定ページ)
まちゃりさ
まちゃりさ

今回は、それぞれの設定方法を、3つにわけてご紹介していきます。

①ホーム画面の設定

まず、「ホーム」の設定です。家のマークの部分です。

ホーム画面の設定
ホーム画面の設定

先ほど作成した「メニュー」を開きます。

[メニュー項目を追加]から、「カスタムリンク」を選びます。

以下の項目を、それぞれ入力します。

  • URLに「サイトのトップページアドレス(http://)
  • リンク文字列に「ホーム

入力後、「メニューに追加」をクリックします。

↑目次に戻る

②カテゴリーの設定

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

[メニュー項目を追加]の「カテゴリー」から、好きなカテゴリーにチェックを入れ、「メニューに追加」をクリックします。

↑目次に戻る

③固定ページの設定

最後に、固定ページを追加します。

今回は、「プロフィール」と「サイトマップ」を追加します。こちらです。

[メニュー項目を追加]の「固定ページ」から追加したいページを探し、チェックを入れます。

最後に、「メニューに追加」をクリックします。

↑目次に戻る

メニューをすべて追加したら、それぞれのメニュー項目に画像を設定していきます。

項目の「詳細(▼)」をクリックして、開きます。

 項目の「詳細(▼)」をクリックして、開きます。
項目の「詳細(▼)」をクリックして、開きます。

CSS class(オプション)」にアイコン画像のCSSを入力します。

ここで、事前準備③で確認した「Font Awesome」のバージョンにあわせたアイコンページにいきましょう。

▶Font Awesome4の場合は、こちらのFont Awesome4のアイコンページにいきます。

▶Font Awesome5の場合は、こちらのFont Awesome5のアイコンページにいきます。

これは、Font Awesome5のアイコンページです。

Font Awesome5のアイコンページ
Font Awesome5のアイコンページ

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

画像を選び、クリックします。

アイコン画像一覧から好きな画像を選ぶ
アイコン画像一覧から好きな画像を選ぶ

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

アイコン画像詳細ページ
アイコン画像詳細ページ

<i class=”以下の拡大画像は、こちらです。

 <i class=”以下の拡大画像
<i class=”以下の拡大画像

この画像の例だと、下の赤枠部分をコピーします。

<i class="fab fa-apple"></i>

参考ちなみに、私が使用している画像のCSSは、以下のとおりです。

(ホーム)

ホーム」 fa fa-home

(カテゴリー1)

すてる」 fa fa-trash

(カテゴリー2)

そうじ」 fa fa-pagelines

(カテゴリー3)

かたづけ」 fa fa-inbox

(カテゴリー4)

せいかつ」 fa fa-child

(プロフィール/固定ページ)

プロフィール」 fa fa-user

(サイトマップ/固定ページ)

サイトマップ」 fa fa-sitemap

 

ナビゲーションラベル」を変えることで、「表示名」を変えることも可能です。

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

まちゃりさ
まちゃりさ

これで80%終了!あと少しです!

↑目次に戻る

作成したメニューをサイドバーの「ウィジェット」に設定していきます。

[外観]→[ウィジェット]を選択します。

[外観]→[ウィジェット]を選択します。
[外観]→[ウィジェット]を選択します。

左側から「[C]ボックスメニュー」を探し、右側にある「サイドメニュー」へ向かってドラック&ドロップします。

別のやり方サイドバーにチェックを入れた状態で、「ウィジェット追加」をクリックしてもOKです。

 

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

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

[タイトル]に「メニュー」などの文字を入力します。

※「MENU」など好きなワードでOKです。

[メニュー名]に、先ほど作成した「メニュー」を指定します。

※私の場合は「ボックスナビ」としています。

 

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

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

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

まちゃりさ
まちゃりさ

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

↑目次に戻る

他の活用例

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

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

 

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

↑目次に戻る

まとめ:【Cocoon】サイドバーにアイコンボックスを表示させる手順!

いかがでしたか?

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

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

 

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

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

 

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

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

 

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

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

↓ ↓ ↓

参考

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

コメント

SNS

最近の投稿

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