PR
※当サイトには、アフィリエイト広告等が含まれています。閲覧者様が商品の購入や広告を見るだけで広告主からの収益が発生します。閲覧者様には感謝の念に堪えませんが、当サイトは広告主から収入を得ることで記事内容が左右されることは一切ありません。令和5年10月1日からステルスマーケティングは景品表示法違反となります。消費者庁

ボックスメニューが簡単にできた!Cocoonカスタマイズ

Cocoonボックスメニューロゴ画像

「Fonto Awesome 5」アイコンフォントの登録をしないで使える方法を見つけたので、内容を2022年4月2日に更新しました。

こんにちは、解説ゾロです!

「ボックスメニュー」ってご存じでしたか?上の「これ」が、ボックスメニューです。グローバルメニューもカッコいいのですが、アイコンを使ったボックスメニューも、とっても見やすいしオシャレです。

たまには、気分を変えてメニューのデザインを変更するのもいいかな、と、cocoonテーマでメニューのカスタマイズにチャレンジしてボックスメニューを作ってみたら・・・簡単に出来てしまいました。

上の画像のアイコンを使ったボックスメニューのデザインと、アイコンを使わないあっさりの★マークの「サンプルのボックスメニュー」(下の画像)も作れますのでお好きな方を作ってください。★マークのボックスメニューも、すっきりしていて、これもイイですね!⇩

Cocoonボックスメニューアイコンフォント無し画像

今日は、「Cocoonテーマで、とっても簡単にボックスメニューが作れる」という内容です。

ボックスメニューを一度作ってしまえば、前のグローバルメニューに戻したり、またボックスメニューに変えたり、サイドバーにボックスメニューを表示したり、タグをボックスメニューで表示したり、あなたのアイディア次第でブログのバリエーションがとても広がる、おススメ品です。

実際のCocoonの設定画像を見ながら丁寧に解説しますので簡単にボックスメニューができちゃいます。一緒にやりましょ!

スポンサーリンク
スポンサーリンク
スポンサーリンク

ボックスメニューってどんなメニュー?

グローバルメニュー、ボックスメニュー、スマホ版のボックスメニューは、こんな感じです。

下の画像がグローバルメニューです。これもシンプルでいいけど、ちょっと気分を変えて、

グローバルメニュー画像

ボックスメニューも、やっぱりイイですね、!

Cocoonボックスメニュー画像

スマホも、イイ感じです。

Cocoonボックスメニュースマホ画像

 

スポンサーリンク

「新しいメニューを作成」

では、早速始めましょう!

「ワードプレス」にログイン(開いて)して、管理画面の、
の、「外観」にマウスポインターを乗せると、右に新しい項目が表示されますので、
の、「メニュー」をポチっとしてください。

ワードプレスメニュー選択画像

「メニュー」の画面に変わりますので、
の「新しいメニューを作成しましょう」をポチっ!
の「メニュー名」に「ボックスメニュー」と入力して、
の「メニューを作成」をポチっ

ワードプレス新しいメニュー作成画面

「表示オプション」の追加

画面が少しだけ変わりますが、ページの右上を見ると、
の「表示オプション」というのがありますので、ポチっとすると、いっぱい項目が書いてある「画面上の要素」が上から降りてきます。
の「説明」と、
の「CSSクラス」に、チェックを入れておいてください。メニューの設定の時に、アイコンフォントの下に表示する項目を追加しました。

②の「説明」は、最初のボックスメニューの画像で解説すると、例えば、パソコンの文字の下にある、アルファベットの部分で「PC」と入力してあるのが、追加した「説明」の入力項目です。
③の「CSSクラス」は、後で調べるアイコンフォントのコードを入力する場所です。この項目に何も入力しなければ、★マークのボックスメニューになります。

チェックが済みましたら、再度
の「表示オプション」をポチっとすると、「画面上の要素」が引っ込みます。

Cocoonボックスメニューアイコンフォント入力項目の追加画像

この少しだけ変わったこの画面から、ボックスメニューに表示したい項目を設定できるようになったので、ボックスメニューで表示したい項目を選んでメニューに追加をしていきます。

「メニュー項目を追加」

ボックスメニューの項目は、少し下にある「メニュー項目を追加」から、「固定ページ」「投稿」「カスタム」に登録してある、お好きな項目を選んでボックスメニューに表示することが出来ます。今回は、例として「カテゴリー」の項目からボックスメニューに表示したい項目を選んで進めます。

の「カテゴリー」をポチっとして、
の「すべて表示」ポチっとすると、カテゴリーに登録してある項目がすべて並びますので、その中からボックスメニューの項目にしたいものを選んで、
に、チェックを入れます。

ここでは、全部にチェックを入れてみました。あとからいくらでも変更は可能なので安心してチェックして下さい。選び終わったら、
の「メニューに追加」をポチっ。

ワードプレス項目をメニューに追加手順画像

メニューが追加されたら、「保存」

すると、隣の赤下線の「メニュー構造」の下の部分に、
の、今選択した6つの項目が赤枠に移動して、ボックスメニューの項目として追加されましたので、
の「メニューを保存」をクリックして下さい。

ワードプレスメニューが追加された画像

ボックスメニューの表示場所をウィジェットで決める

今度は、そのまま左の管理画面の「外観」の少し下にある、
の「ウィジェット」を、ポチっとして下さい。

例:コンテンツ上部に表示

「ウィジェット」の画面に変わったら、「利用できるウィジェット」の中から、
「[C]ボックスメニュー」を探して下さい。見つかったら「[C]ボックスメニュー」の上で左クリックを押しながら、「ボックスメニュー」をブログで表示させたい場所にこれから移動します。移動する場所は、今回、トップ画像の下(グローバルメニュー辺りの位置:コンテンツ上部)に設置する例で進めます。では、

の「[C]ボックスメニュー」の上でマウスの左クリックを押しながら移動して行き、
の「コンテンツ上部」の上に持っていくと、新しく破線の枠が表示されますので、その枠の上で、マウスの左クリックを離すと「[C]ボックスメニュー」が破線内の枠に入り「[C]ボックスメニュー」と表示されます。

ワードプレスウィジェットでボックスメニューの位置を決める画像

枠に入った「ボックスメニュー」の右に、
の小さい「▼」があるのでの「▼」マークをポチっとすると新しく表示された、
の「メニュー名」に「ボックスメニュー」と入力して、
の「完了」をポチっです。

ワードプレスボックスメニューウィジェット設定画像

ボックスメニューの表示の確認

これで、サイトにボックスメニューが表示されているはずなので、確認してみましょう。ワードプレスの「ホーム」の「サイトを表示」または、いつも記事を書いている投稿編集画面右の「変更をプレビュー」をポチっと、確認すると、ボックスメニューが表示されています。アイコンフォントをまだ設定していないので「★のボックスメニュー」です。⇩

Cocoonボックスメニューアイコンフォント無し画像

ボックスメニューが完成です。まずは、お疲れさまでした。

「fonto awesome 5」のアイコンフォント設定

ここからは、一番最初の、アイコンフォントを使った「これ」のボックスメニューを作る方法を解説します。アイコンフォントを使う選択を「Cocoonの設定画面」から簡単に行います。

ワードプレスにログイン(開いて)したら、
の「Cocoon設定」をクリックして下さい。画面が「Cocoon設定」に変わりましたら、
の、「全体」をクリックです。そして、マウスで下の方にカリカリすると、「サイトアイコンフォント」という項目がありますので、
の、「fonto awesome 5」にチェックを入れて下さい。チェックしたら
の、上下にある「
変更をまとめて保存」を忘れずにクリックして下さい。

Cocoonアイコンフォント5を選択画面サイトアイコンフォント選択画像

fonto awesome 5の使い方

Fonto Awesome 5のサイトデザインが、意外と頻繁に変わりますが、基本操作は同じです。右クリックで日本語にして、何しろ「無料にチェック」を入れて探すだけなので、サイトが下記のデザインと違っても慌てなくて大丈夫です。
チョット慌ててて下さい。笑!この記事をUPした後に、使用方法が変わったようなのです。下記のリンク先「Font Awesome 5のサイト」に行っても、アドレスを登録してからじゃないと使えなくなったようです。

・・・が、アドレスを登録しなくても使えた方法を2つ見つけました!

次のも、基本的な使い方は、下記のこれから解説する方法と同じです。

古いFontAwesomeのバージョン4.7 なら同じようにまだ使えました。使えるアイコンは少ないですが。 
、それと、次のアドレス➡ https://fontawesome.com/v5/search をコピーして、別のページでGoogleとかで普通に検索して開いたら、下記の解説と同じように無料にチェックしてから、アイコンを選択してコードをコピーして、そのコードをブログのメニューに入力すると使えました。

上記のバージョン4.7よりも、こちらの方が使えるアイコンは多いです。

今度は、いよいよ今選択した、✖Font Awesome 5のサイト✖に行って、好きなアイコンを探してゲットします。サイトが開きましたら、まず、
の、「日本語」をクリックして下さい。この表示が出ていない場合は、このサイトの上ならどこでもいいのでマウスを右クリックして「日本語に翻訳」を選択すると、日本語に変更されます。英語が堪能な方でしたら余計なお世話でした、スミマセン。笑!次は、
の、「無料」にチェックが入っていると思いますが、もし入っていなければ、忘れずにチェックを入れて下さい。無料にチェックをしておけば、無料のアイコンフォントが使えます。

fonto awesome 5サイトのトップ画像

その下に、どんな関連のアイコンを探すのか、イメージのワードが並んでいますので、ご自分のイメージに近いかなと思うワードをクリックしてみて下さい。今回は、私の設定したアイコンフォントで解説していきます。私は、「パソコン」というワードに合うアイコンフォントを探したいので、
の、「コンピューター」をクリックしてみます。

アイコンフォントジャンルを選択する画像

そして、マウスで下に移動しますと、「すべての1,608の素晴らしいアイコン」の下に、
の、「無料」が表示されているのを確認します。その隣に、先ほどクリックした、
の、「コンピューター」が選択されています。その下の方には、ズラッとコンピューター関連デザインのアイコンが表示されましたので、好きなアイコンフォントを選んで下さい。私は、
の、「デスクトップ」というデザインのアイコンフォントに決めたのでクリックです。

この①と②は、現在選択されている条件を表示しています。①の「無料」は消さずにずっとそのままの方がイイと思いますが、②は、他のアイコンフォントを探す時には、既に選んだ項目のアイコンは邪魔になるので、消したい項目(コンピューター)の右の✖で、コンピューターのアイコンフォントが削除できるので、探しやすくなります。

アイコンフォント確定する画像

ハイ、この画面になりますので、
の、”   ” の中の文字をコピペ(コピー&ペースト)をして控えて下さい。この場合だと、fas fa-desktop です。複数選択する場合は、今の手順の最初から、他のメニューに利用したいアイコンフォントを1つずつ探して、控えて下さい。

確定したアイコンフォントのコード画像

アイコンフォントのコード例

私のボックスメニューのアイコンフォントはこちらです。最初の画像のアイコンフォントですので、もし同じイメージがあれば使って下さい。アイコンが全部決まって、控えたら次は「メニュー画面」で設定します。

ナビゲーションラベル CSS class (オプション) 説明
パソコン fas fa-desktop PC
ブログ fas fa-keyboard Blog
ワードプレス fab fa-wordpress wordpress
便利ツール fas fa-tools tool
収益化 fas fa-dollar-sign  monetization
プロフィール fas fa-mask  Profile

メニューにアイコンフォントを設定

ワードプレスの
の「外観」にマウスを乗せると、項目が表示されますので、
の「メニュー」をクリックして下さい。

ワードプレスメニュー選択画像

メニューに画面になりましたら、
の「∨」をクリックして、「ボックスメニュー」を選択して下さい。そして右にある
の「選択」をクリックです。すると、メニュー構造のメニュー名がボックスメニューになり、先ほどメニューに設定した項目が表示されます。では、初めに、
の「パソコン」の項目にアイコンフォントを設定してみます。
の「▲」をクリックすると、入力画面が表示されますので、
の「ナビゲーションラベル」には、既に「パソコン」が入力されていると思いますので、そのままパソコンで。
の「CSS class (オプション)」に、いよいよ先ほど控えたアイコンフォントのコードを入力します。私の場合は「fas fa-desktop」です。
の「説明」には「PC」としました。

⑥と⑦は、最初の方でワードプレスのメニュー画面の「表示オプション」で、アイコンフォントに入力項目の追加した項目です。

他のメニュー項目にも、同じ手順で1つ1つのアイコンフォントのコードを「CSS class(オプション)」と「説明」に入力をして下さい。私の場合、ブログ・ワードプレス・便利ツール・収益化・プロフィールとすべて入力します。入力が終わったら、この画像には無いのですが、右下の方にあるメニューを保存のクリックをお願いします。

ワードプレスメニューにアイコンフォントを設定する画像

おまけ

「★マークのボックスメニュー」や、「アイコンフォントのボックスメニュー」の色を変更したい場合、とても簡単な方法は、「Cocoon設定」の「全体」をクリックして、「キーカラー」の「サイトキーカラー」で好きな色を選択しますと、ボックスメニューの色も含め、サイト全体のカラーが統一されるので、簡単です。お試し下さい。またまたお疲れさまでした。

Cocoonサイトキーカラー設定画像

プレビュー画面で確認してみましょう。あなたのボックスメニューを見てステキと思ってくれる人がいっぱいいますように!

では、また。解説ゾロでした!

自分のIPアドレスと海外からのアクセス除外をアナリティクスで設定

自分のIPアドレスと海外からのアクセス除外をアナリティクスで設定
自分のIPアドレスと海外からのアクセスをGoogleアナリティクスの設定から除外できるので簡単です。IPV4とIPV6アドレスの調べ方から除外設定まで初心者の方もわかりやすいように実際の画像を見ながら丁寧に解説しますので安心して下さい。一緒にやりましょ!
タイトルとURLをコピーしました