Cocoon本文にWebアイコンフォントを表示する簡単カスタマイズ

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

Webアイコンフォントって、とかみたいなやつです。こんな風に本文にも使えたら楽しいです・・・よね！笑

Webアイコン、Webフォント、アイコン、アイコンフォントなどなど呼び方は色々あるようですが、このアイコンフォントを当サイト「解説ゾロ」内のボックスメニューでも使っていますので、サンプルとしてこの本文に表示してみますのでご覧くださいませ。

絵文字みたいなのがアイコンフォントというものです。このボックスメニューは、実際に機能しています本物（笑）ですので、クリックすると飛んでいきます。笑

では、このアイコンフォントをいくつか本文に表示してみますと、こんな感じで表示ができます。可愛いです・・・よね！笑

要所要所で使うと、文章がわかりやすくなったり、楽しくなったりで、一味違った個性的なブログができそうです。

今日は、WordPressのテーマCocoonなら簡単にアイコンフォントを本文に表示できるカスタマイズ方法を解説いたします。楽しいので一緒にやりましょ！

前回の記事はこちら

パソコンで2画面間のファイルや画像の移動はショートカットが超速

2画面のデュアルモニター間を一瞬でファイルや画像のウィンドウを左右に移動できるショートカットの解説です。マウスでドラッグする必要も無く素早くディスプレイ間を行き来することができますので作業が一段と捗ります。コレは間違いなくオススメです！一緒にやりましょ！

Cocoon本文にWebアイコンフォントを表示する手順
Webアイコンフォントの「Cocoon設定」
WebアイコンフォントFont Awesome 5使い方
Webアイコンフォントの「コード」をテキスト画面に入力
1. Webアイコンフォントの左端のコードが消える場合
Webアイコンフォントの表示確認
まとめ

Cocoon本文にWebアイコンフォントを表示する手順

本文にWebアイコンフォントを簡単に表示する手順は、

Cocoon設定・・・・・・・・・・・ポチっとするだけ！
Font Awesome 5使い方・・・・・アイコン探すだけ！
アイコンフォントのコード入力・・コピペをするだけ！

ハイ、完成です。笑！では、順に解説していきます。

Webアイコンフォントの「Cocoon設定」

⇩WordPressテーマの「Cocoon設定」から始めます。WordPressの「ダッシュボード」画面から、
①の「Cocoon設定」をクリックしてください。⇩

⇩すると「Cocoon設定」の画面に変わりますので、
①の「全体」をクリックしてください。⇩

⇩「全体設定」の画面に変わりますので、少しだけ下にカリカリ移動していくと、
①の「サイトアイコンフォント」という項目がありますので、その右側にある、
②の「font Awesome 5」（フォントオーサム 5）という、商用利用が可能なアイコンフォントを表示することができるWebサービスがありますので、おススメの「5」のバージョンの方のラジオボタンをポチっとクリックして選択してください。そして、忘れずにページの上と下にあります、変更をまとめて保存のクリックをお願いいたします。Cocoonの設定はこれだけでOKです。⇩

WebアイコンフォントFont Awesome 5使い方

⇩では、こちらをクリックして➡「Font Awesome 5」のサイトを開きます。または、検索窓に、
①のように「Font Awesome 5」と入力して検索しますと、先頭に「Font Awesome」のサイトが表示されますので、
②の「Free」(無料)をクリックして開いてください。⇩

⇩「Font Awesome 5」の無料サイトを開きましたら「言語」を日本語にしたいので、
①の「日本語」をクリックしてください。この表示が消えてしまったら、右クリックをして「日本語に翻訳」をクリックすれば大丈夫です。さて「Font Awesome 5」の無料版が表示されていると思いますが、一応もう一度、
②の「無料（Free）」を押しておきます。Freeで検索していない場合は、下にズラッと表示されているアイコンの中に有料版しか使えないプロ（ PRO ）マークが付いているフォントが混在して無料版のアイコンが探しにくいので、その場合も「無料（Free）」をクリックしてください。プロ（ PRO ）が排除されます。⇩

⇩下に移動すると、アイコンがいっぱい表示されています。このアイコンフォントの中から使いたいアイコンを選びます。今回は「例」として、
①の、当サイト「解説ゾロ」の「マスク」笑！をクリックして選択します。⇩

⇩すると、新しい「マスク」という画面がポップアップされます。アイコンフォントにはそれぞれのコードが割り当てられています。「マスク」のコードは、 というもので、fas fa-mask の部分がアイコンフォントによって変わる部分です。「マスク」のアイコンフォントを表示させるには、
①の、この「コード」が必要になりますので「コード」上にマウスポインターを乗せますと、
②のように「コードスニペットをコピー」と表示されますがそこに移動せずに、そのまま「コード」の上でクリックしますと「コード」がコピーされます。⇩

一度使ったら、もう手放せないマウスです！

【開梱レビュー】ケンジントンスリムブレード K72327JP

ケンジントンスリムブレードトラックボール K72327JPの開梱レビューです。私はレスポンスが安定する有線タイプを購入しましたが保証期間が3年に変更されていないか心配でしたが5年モノが手に入ったので安心です。一緒に開梱しましょ！

Webアイコンフォントの「コード」をテキスト画面に入力

⇩今度は、そのコピーされた「マスク」のコード、 を貼り付けますが。WordPressの「投稿を編集」の「テキスト」の画面に貼り付けます。
①のように「テキスト」をクリックして「ビジュアル」から「テキスト」に変更してください。⇩

Webアイコンフォントの左端のコードが消える場合

⇩「テキスト」の画面では、アイコンフォントを本文の表示したい場所に先ほどの「マスク」の「コード」
を貼り付けます、「例」として、
①のように、文中にアイコンフォントの「コード」を貼り付けてみます。また、もう1つ、アイコンフォントを左端に表示したい場合は、
②のように、左端に「マスク」の「コード」を貼り付け、
③の「＞」と「＜」の間に「  」（ノーブレークスペース：この場合は空白文字で繋げるみたいな役目？）を入れておけば、コードが消えません。⇩