メンヘラ主婦がアフィリエイトで1万円稼げるか

めんしゅふ

WordPress

AutoptimizeでFont Awesomeが使えなくなったときの対処法

投稿日:2017年4月23日 更新日:

こんにちは。めんしゅふちあき(@chiakinako47)です。

Font Awesomeって便利ですよね。色々なテンプレートに使われていて、種類も豊富で小回りが利きます。ちょっとしたブログのアクセントに最適です。

AutoptimizeはHTML/JavaScript/CSSの圧縮に最適で利用している方も多いと思います。しかし、このAutoptimizeは、利用には注意が必要です。普通にCSS圧縮を許可してしまうと、Font Awesomeが使えなくなってアイコンがただの「×印」になって慌てることになります。

今回はそんな不具合を解消するための設定をご紹介します。
少しの設定で終わりますので大丈夫ですよ!

スポンサーリンク

「Autoptimize から CSS を除外」を設定する

「AutoptimizeからCSSを除外」からFont Awesomeを除外するとまた使用することができるようになります♪

設定→「Autoptimize」→「CSSオプション」→「AutoptimizeからCSSを除外」

デフォルトで色々書かれていると思います。カンマ区切りなので、カンマで区切った後に、以下の記述をしてください。

font-awesome.min.css

たったこれだけです。一番下の「変更を保存してキャッシュを削除」をクリックしてOKで反映されます。もし反映されない場合は、ブラウザのキャッシュを一度クリアしてみてください。Chromeの場合、F12キー→更新ボタンを右クリック→「キャッシュの消去とハード再読み込み」でOKです。

 

番外編:目次の表示が崩れる場合の除外設定

目次の設定として便利な「Table of Contents Plus」ですが、これもAutoptimizeと相性が悪く一緒に使用すると枠が表示されなかったりします。そのときは以下の同じように除外設定をすればOKです。カンマ区切りを忘れないでくださいね。

table-of-contents-plus/screen.min.css

こちらはこのサイト様を参考にいたしました。ありがとうございます。

Table of Contents Plusの目次表示が崩れる時の対処方法 | ぱるログ

 

Autoptimizeは使用に注意するべきプラグイン

キャッシュ系プラグインには多くのトラブルがつきものですが、名目上は圧縮プラグインであるAutoptimizeのトラブルも頻繁に耳にします。この手のプラグインを有効化したときは、PCからだけではなくスマホからも表示を確認できるようにしておきましょう。

この記事が気に入ったら
いいね ! しよう

スポンサーリンク

-WordPress

Copyright© めんしゅふ , 2017 All Rights Reserved.