現在デフォルトスキンとして「Veilnui Simplog (blue)」を適用中。

Font Awesome5を利用する方法

テーマ全般
この記事は約2分で読めます。

Cocoon 2.0.0からFont Awesome5を利用できるようになりました。

機能変更1つで、Font Awesome4→5に変更することができます。

スポンサーリンク

Font Awesome5への変更方法

まずはテーマ設定を開きます。

WordPress管理画面から「Cocoon設定」を選択してください。

Wordpress管理画面からCocoon設定を選択

「全体」タブの「サイトアイコンフォント」で「Font Awesome5」を選択してください。

サイト全体で使用するアイコンフォントを選択します。

この設定変更のみで、アイコフォント変更することが可能です。

Font Awesome5のアイコンは、こちらから検索して取得することが可能です。

Font Awesome
スポンサーリンク

注意点

この機能の注意点。

デフォルトはFont Awesome4

「サイトアイコンフォント」機能は、現在Font Awesome4がデフォルトです。

なので、Font Awesome5に変換する際はPHP処理により対応させています。

ただ、今後利用状況によってはFont Awesome5がデフォルトになる可能性が高いです。

いずれにせよ、普通にFont Awesomeを利用している限りでは、問題なく利用できるかと思います。

CSSでFont Awesomeカスタマイズしている場合は注意

Cocoon 2.0.0からは、基本的にテーマで使用するFont Awesomeは、以下のようなHTMLコードを利用することにしています。

<span class="fa fa-star" aria-hidden="true"></span>

なので、CSS等で以下のようなコードを書いてカスタマイズしている場合は、Font Awesomeアイコンが二重に表示されてしまう場合もあるかもしれません。

.selector:before{
  font-family: 'FontAwesome';
  content: '\f111';
}

そういった場合は、お手数ですが各自でのカスタマイズ修正対応をお願いいたします。

テーマ全般 テーマ設定
スポンサーリンク
わいひら

無料WordPressテーマ、Simplicity、Cocoonを作成。当サイトと寝ログを運営しています。

わいひらをフォローする
わいひらをフォローする
おすすめレンタルサーバー

性能も兼ね備えながら安くブログ運営を開始できる点においてのNo.1。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越しオプションあり(有料)

サービス運営期間:1年5ヶ月

1年以上の契約をする場合は、クーポンコード入力でさらに10%割引(※2020/6/30まで)。

クーポンコード:PK4JK4RJ

クーポンの使用方法はこちら

安定感抜群のサーバーです。あまり急激なアクセス変動がないアフィリエイトサイトに向いています。

◎nginxを用いた高速サーバー(完全SSD)
◎老舗サーバーなので安定感抜群
◎ディスク容量が多い
◎転送量が多い
◎同サービス内でドメイン管理が可能
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
△DBは7日分だけ無料復旧可能(ファイルは有料)
×プラン変更でCPUのスペックアップができない
×プラン変更しても即時反映されない
×アダルト・出会い系サイト不可

サービス運営期間:16年

プラン変更で負荷対策が行えるので、ブログ向きのレンタルサーバーです。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎転送量が多い
◎ディスク容量が多い
◎毎日無料バックアップ(14日分)
△DBは復元ポイントを指定して復旧可能(無料)
◎アダルト・出会い系サイト可
○サーバ引っ越しオプションあり(有料)
○サーバー料金をチャージ払いが可能

サービス運営期間:3年

とにかく速い。サイトに表示スピードを求めるならココ。

◎nginxを用いた高速サーバー(完全SSD)
◎プランのアップ・ダウングレードが自由自在
◎ディスク容量が多い
◎転送量が多い
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
○DB復旧は無料(ファイルは有料)
○サーバ引っ越しツールあり
○サーバー料金をチャージ払いが可能
△新しいサービスなので運営櫪がまだ短い

サービス運営期間:1年3ヶ月

格安な値段で始められる高機能サーバーです。
性能も備えつつ最安ならここ。
サイトを続けるうちにアクセスが増えれば、プランのアップグレートで対応可能です。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎激安プランが用意してある
◎値段あたりのスペックが高い(コスパ良し)
◎サーバ引っ越しオプションあり(無料)
◎アダルト・出会い系サイト可
○http/2(高速化プロトコル)に対応
△プランのアップは可能だがダウンは不可
△毎日自動バックアップ(1日分)
△前日のバックアップからのみ復元できる(無料)

サービス運営期間:4年

Cocoon

コメント テーマの質問はフォーラムへ

  1. だいずパパン より:

    Cocoon 2.0.0カラーは、基本的にテーマで使用するFont Awesomeは、以下のようなHTMLコードを利用することにしています。

    なぜこのようにしたのですか?
    たくさんの方がCSSでカスタマイズしてると思うのですが…

    • わいひらわいひら より:

      今後、Font Awesome5が主流となっていく上で、今後出来る限り保守がしやすいようにです。
      WEB上の変化は開発時予想していたものとは違うものになる場合もあるので、そういった変化にも対応する必要があります。
      出来る限り、仕様は変更しないようにしたぃとは思いますが、今の開発を続ける上で行わなければならない時は行う必要があると思っています。

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