Contents
font awesome はwebフォント
font awesome は無料で使えるwebフォントがあるサイトです。（有料のものもあり。）
現在の最新はfont awesome 6.2.1ですが、Cocoonではfont awesome ４または５のコードを埋め込むだけで表示できるようにしてくれます。
ここではCocoonでの設定方法と実際の使い方を紹介します。
Cocoonの設定
左メニューのCocoon設定からCocoon設定を選びます。
設定画面の全体タブを選びます。
設定画面の真ん中あたりにサイトアイコンフォント選択画面があります。
解説ページを見ると開発者のわいひらさんがコーディングしてfont awesome5を使いやすくしてくださっているようです。
フォント数も５のほうが多いのでこちらの選択でいいと思います。
選択したら変更をまとめて保存で終了です。
font awesome の使い方
font awesome のページから使いたいフォントを探す
こちらから font awesome 5 のフリーフォントページに飛べます。
フリーフォント、バージョンが５であることを確認してください。
気に入ったフォントをクリックすると、このようなページが開きます。
コードをクリックすると自動的にコピーしてくれます。
コピーできたら終了なので、このサイトは閉じても構いません。
投稿への埋込方法を３つ紹介します。
１.カスタムHTML
カスタムHTMLを使っている方が多いのではないでしょうか。
カスタムHTMLはブロックごとHTML形式になります。
このやり方はテキストごとHTMLに組み込みます。
カスタムHTMLだからこの部分だけプレビューできそうですが、残念ながらできません。
でもweb上ではきちんと表示されます。
色を変える時は自分でコードを追加する必要があります。
マイペースで行こう！2.HTML挿入
段落で文章を書いて、好きな位置にHTML挿入してwebフォントを表示させます。
コードがそのまま残るので、編集中はイメージがつかみにくいと思います。
使い所としては、すでに出来上がった投稿の段落中にwebフォントを挿入する時でしょうか。
色を変える時は左メニューでブロックごと変えられます。
マイペースで行こう！
3.コードエディター
私は最もよく使います。
細かい設定もできますし、編集中にwebフォントを打ち込んでもグーテンベルクエディターできちんと表示してくれます。
つまり、全体のイメージを見ながら作業できるのです。
呼び出し方は右上からメニューを出し、コードエディターを選択します。
まずは挿入場所がわかりやすくなるように段落で文字を打ちます。
コードエディターを起動して目的の文字列を探します。
webフォントのコードを目的の位置にペーストします。
コードのペーストはpタグの中に入るようにします。
編集が終わったら右上のコードエディターを終了をしてビジュアルエディターに戻ります。
編集中の画面にwebフォントが表示されていると思います。
font awesome のオプション
font awesome にはいろいろなオプションが用意されています。
フォントのタグに修飾していくのですが、これらの解説はまた別の機会にしようと思います。
このリストは font awesome 5 のチュートリアルサイトにありますので、英語でも苦にならない方はこちらからどうぞ
他にもWordPressについてブログを書いていますので、興味のある方はこちらからどうぞ。
