アイコンを使ったボックスメニュー(ヘッダー下・サイドバー)の作成方法。画像多数で分かりやすい!

ボックスメニューブログの始め方
記事内に広告が含まれています。

四角い形のボタンを使うメニューを「ボックスメニュー」といいます。

ゆまこ
ゆまこ

このサイトのボックスメニューは下の図のようなボックスメニューにしています。

フロントボックスメニュー

Cocoonのボックスメニューは、アイコンフォントや好きな画像を使って、ボックス型のメニューを作ることができます。
視覚的に目を引くことができて、読者さんにどこに何があるかを理解してもらいやすくなりますね。

この記事では、ボックスメニューの作成方法と、アイコンの設定方法を説明します。

ゆまこ
ゆまこ

これからボックスメニューを作り始めるよ、という方は、まずはこのページの「アイコンを使ったボックスメニュー」を設置して(←作業が比較的簡単なので)、好きな画像への置き換えは改めて、もよいと思います♬

この記事を読むと、アイコンを使ったボックスメニューをサイトに設置することができます。

下のようにアイコンを使ったボックスメニューです。

サイドバーメニュー

ボックスメニュー

ヘッダー下メニュー

ボックスメニュー
スポンサーリンク

ボックスで表示したい項目を選んでメニューを作る

左側のメニューから、「外観」→「メニュー」に進みます。

ボックスメニュー

「新しいメニューを作成しましょう」に進みます。
 ※既にボックスメニューで表示したいメニューを作成済の方はこの項目を飛ばして次に進んでください。

ボックスメニュー

作成するメニューの名前を入れます。
読者さんには表示されない名前ですので、ご自分のわかりやすい名前を付けましょう。

ゆまこ
ゆまこ

私が実際に使っているメニューの名前です。
後ろについている()の中は設置した場所が自動で入っているので、()の前のところが自分でつけた名称です。

ボックスメニュー

メニュー名にご自分の好きな名前を付けて、「メニューを作成」ボタンを押します。

ボックスメニュー

左側に、「メニュー項目を追加」と書かれたエリアが出てきますので、ご自分がメニューで表示したい項目を選んでチェックを入れます。

項目の右側の▼を押すと、詳細が開いてチェックを入れられるようになります。

ボックスメニュー
ゆまこ
ゆまこ

私は、「カテゴリ」をメニュー項目に設定しました。

ボックスメニュー

選んだら、「メニューに追加」をクリックします。

右側の「メニュー構造」に、自分が選んだ項目が出てきたのを確認して、「メニューを保存」をクリックします。

ボックスメニュー

サイトにボックスメニューを設定する

メニュー自体はまだ完成していませんが、確認しながら進めていくために、先にサイトにメニューを設定しましょう。

完成してからメニューをサイトに表示したい、という方は、次の「メニューにアイコンを設定する」を先に行ってください。


左側のメニューから「外観」→「ウィジェット」に進みます。

ボックスメニュー


ウィジェットの画面が開きますので、「[C]ボックスメニュー」の右側の▼を押します。

ボックスメニュー


ボックスメニューの設定画面が開きますので、ボックスメニューを置きたい場所を選び、「ウィジェットを追加」を押します。

サイドバーに置きたいときは
「サイドバー」を選択。

ボックスメニュー

ヘッダーの下に置きたいときは
「コンテンツ上部」を選択。

ボックスメニュー

設定画面右側の、ウィジェット一覧で自分が選択したウィジェットの▼をクリックして詳細を見ると、 「[C]ボックスメニュー」 が追加されています。

初めは、一番下に追加されているので、別のところに置きたい場合は、ドラック&ドロップで順番を入れ替えます。

ボックスメニュー

次に、ボックスメニューの▼を押して、ボックスメニューの詳細を表示させます。

ボックスメニュー

タイトル・・・メニューの上に入る文字です。必要のない場合は空欄のままにします。
メニュー名・・・ボックスメニュー用に作ったメニューの名前を選びます。

設定出来たら「保存」を押しましょう。


ここまで出来たら、いったん記事を確認してみましょう。

ボックスメニューが表示されていますか?
アイコンや画像は設定していないので、★マークが入ったボックスメニューが表示されていたら成功です。

ボックスメニュー

★をアイコンに置き換えよう!

次に、★マークをアイコンに置き換えていきます。

【1】 アイコンを選ぶ事前準備(使っているフォントの確認)

まずは、自分のサイトで使っているフォントの確認をします。

① 「ダッシュボード」→「Cocoon設定」→「Cocoon設定」に進みます。

Cocoonおしゃれで見やすいブログを自分で作る

② Cocoon設定の画面が開いたら、「全体」を選択します。

Cocoonおしゃれで見やすいブログを自分で作る

③ 下の方に進んで、「サイトアイコンフォント」を見つけて、『4』にチェックがついているか、『5』にチェックがついているか、を確認します。

このサイトは『5』です。

Cocoonおしゃれで見やすいブログを自分で作る

【2】  アイコンを選んでコードをコピーする

ここからは、先ほど調べたフォントが『5』の場合を説明していきます。

① ここのサイトに入ります。

Font Awesome
The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome.

このアドレスをコピーしてもOKです。

https://fontawesome.com/

② このページが開いたら、上にある「Icons」をクリック

Cocoonおしゃれで見やすいブログを自分で作る

③ アイコンがたくさん出てきたら、左側の「Free」を選択。

これで、無料アイコンだけが表示されます。

Cocoonおしゃれで見やすいブログを自分で作る

④ 検索窓にキーワード(英単語)を入れて検索します。

例えば、profile と入れて検索します。

Cocoonおしゃれで見やすいブログを自分で作る

使いたいアイコンが見つかったら、そのアイコンをクリックします。

⓹ アイコンの詳細ページが開くので、「Start Using This Icon」をクリックします。

Cocoonおしゃれで見やすいブログを自分で作る

⑥ 黒枠の中にコードが表示されます。

ここで注意!コードの ” ” の中だけをコピーします。
例えば下のコードだと、” ” の中の  far fa-lightbulb  だけをコピーします。

<i class="far fa-lightbulb"></i>

【3】  コピーしたコードを設定してアイコンを置き換える

左側のメニューから、「外観」→「メニュー」に進みます。

ボックスメニュー

「編集するメニューを選択」で、ボックスメニューに使っているメニューを選んで、「選択」を押します。

ボックスメニュー


設定画面が開いたら、1つずつアイコンを設定していきます。

設定する際には、それぞれの項目の▼を押して詳細画面を表示してください。

ボックスメニュー


アイコンを設定するには「CSS class(オプション)」に、先ほどコピーしたコードを入力(貼り付け)します。

ボックスメニュー

設定したら必ず、右下にある「メニューを保存」をクリックします。

【2】  アイコンを選んでコードをコピーする

【3】  コピーしたコードを設定してアイコンを置き換える
を繰り返して、すべてのメニューのアイコンを置き換えます。

確認すると

サイドバーメニュー

ボックスメニュー

ヘッダー下メニュー

ボックスメニュー

となっていたら完了です。

メニューが4個以下の場合には、メニューの位置が左に寄ってしまうのでこの記事を参考に中央寄せをしてくださいね。

【Cocoon】ヘッダー下に作成したボックスメニューをセンタリング(中央寄せ)にするには
この記事では、ヘッダー下のボックスメニューを設定したけど、左に寄ってしまった!という方に向けて、ボックスメニューの真ん中寄せ(センタリング)の方法、ボックスメニューの枠線を消す方法をお伝えしました。

まとめ

この記事では、アイコンを使ったボックスメニューの作成方法とサイトへの設置方法を詳しく説明しました。
ボックスメニューを設置すると、サイトが一気に格好良くなりますよね。


ブログの立ち上げ設定で忘れているところはないですか?
初期設定・SSL化、パーマリンクなど、今一度この記事で確認を。。。

【超初心者さん向け2024】Wordpressブログの作り方を図解入りで解説
この記事に沿って最後まで作業をすると、ワードプレスサイトを「あとは記事を書くだけ」の状態まで作ることができます ブログを始めたい!と思っても、どうやって作ればいいか全然わからない。。。と思う方も少なくありません。実は、私もそうでした。 ワー...