Font Awesome5の2重表示を修正!Cocoon設定とLiteSpeed Cacheが原因。

Font Awesome5の2重表示を修正!Cocoon設定とLiteSpeed Cacheが原因。 パソコン・スマホ設定
この記事は約4分で読めます。

Cocoonを最新バージョン2.0にしたらアイコンフォントが2つ表示されるようになったCocoonだとモバイルフッターボタンと言う奴。モバイル(スマートフォン)で見ると2重表示される。

解析不能な構造化データが500を超えた!コクーンでのエラー解決方法。
ある日Google Search Consoleを見たら画面が真っ赤になってた。これまでなかった、解析不能な構造化データが追加されたのだ。そのエラー数は500を超える。保有する全てのブログで解析不能な構造化データのエラーが発生している。 ...

ちなみにアイコンフォントとは記号で表すマークである。スマートフォンでこの記事を見てるなら画面を上下すると最下部に記号が並ぶ。メニュー・検索・フォロー・シェアと言ったアイコン(マーク)の事である。

Font Awesome5の2重表示を修正!Cocoon設定とLiteSpeed Cacheが原因。

そもそもモバイルフッターボタンなんて押されないと思うが、それでも改善しておきたい。結論から話すとCocoonの設定とキャッシュ系プラグイン(LiteSpeed Cache)が原因。

スポンサーリンク

Font Awesome5の2重表示を修正!

最新スマホお勧め機種紹介!アンドロイドの格安SIM対応(ZenFone Live L1)

もしCocoonを使ってFont Awesome5が2つ表示されるようになったら。キャッシュ系プラグインを外す。これで改善されるか確認。

ads.txt設置方法!アドセンス警告をワードプレスとロリポップで対処。
ある日アドセンス画面に注意文が表示された。アズテキストファイル(ads.txt)が含まれないから表示しろって書いてある。また厄介なのが出てきた。ネットで調べると、推奨であって警告ではないとの事。つまり面倒ならやらなくて良い。 ...

改善されないならCocoonの設定を変更。Cocoon設定→高速化→「アイコンフォントの非同期読み込みを有効にする」のチェックを外す。たったこれだけ。

それでもFont Awesome5(アイコンフォント)が2つ表示されるなら。全プラグイン停止。これで改善されればプラグインに原因がある。

カラフルボックスにサーバー移転!WP Migrationが0%から進まない時の対策。
はミックスホストやエックスサーバーを超えるほど、超高性能なレンタルサーバーとなった。 この記事では「All-in-One WP Migration」を使って引っ越しできなかった場合の対処法を記載する。「All-in-One WP Mi...

あとは1つづ有効、無効を繰り返せば原因となるプラグインを特定できる。そのプラグインを見つけたら削除するだけ。

Cocoon設定とLiteSpeed Cacheが原因。

Google検索結果ページにモバイルフレンドリーではありませんの表示。

上記のようにCocoonの高速化設定とキャッシュ系プラグインが原因。だが、ブログの表示速度を速くするならキャッシュ系プラグインは欠かせない

カラフルボックスのレンタルサーバーを使った感想と独自ドメインSSL化。
前回記事「カラフルボックスにサーバー移転!WP Migrationが0%から進まない時の対策」の続き。サーバー引っ越しプラグイン「All-in-One WP Migration」のインポートができなかったので、別のプラグインDuplicat...

なので、Font Awesome5とキャッシュ系プラグインを併用したい。ここからは特定のサーバー(ランスタッド カラフルボックス )で使えるLiteSpeed Cacheについて書く。

LiteSpeed Cacheでブログ崩壊?ワードプレス・プラグインの不具合修復。
ワードプレスには数多くのプラグインがある。そんな中、とミックホストのように特定のサーバーだけ使えるプラグインがある。 それが「LiteSpeed Cache」と呼ばれるキャッシュ系プラグインだ。このブログはロリポップからに移転...

Font Awesome5とLiteSpeed Cacheの併用。

カラフルボックスにサーバー移転!トラブル対処法とドメインSSL化。

まず大事なのがLiteSpeed Cacheを解除した状態で適正にFont Awesome5(アイコンフォント)が表示されるか確認。

Font Awesome5(アイコン)が1つだけ表示されたら成功!原因はLiteSpeed Cacheの設定にある。LiteSpeed Cacheの設定画面で高度なオプションを表示させる。

そしたら「CSSを非同期ロード」をオフにする。これでアイコンフォントは1つになった。原因を突き止めるのに丸2日も掛かった。

スポンサーリンク

Font Awesome5の2つ表示されるのを改善(まとめ)

楽天のポイントはそのまま使うと損!キャンペーンのEDY交換で2倍。

Font Awesome5(アイコンフォント)が2つ表示されるのはCocoonの設定とキャッシュ系プラグインが原因。なので、以下の手順で修正する。

  1. キャッシュ系プラグイン(LiteSpeed Cache)の停止。
  2. Cocoonの高速化設定「アイコンフォントの非同期読み込みを有効にする」のチェックを外す。
  3. LiteSpeed Cacheの「CSSを非同期ロード」をオフにする。

たったこれだけ。Font Awesome5とLiteSpeed Cacheの併用できるのは嬉しい。LiteSpeed Cacheを使ってないなら1と2を実行すれば良い。

これはCocoonテーマを変更してない場合に有効。つまり自分自身でCSSに書き込んでない場合。それとCocoon設定でFont Awesome5が有効になってる場合。

副業でブログやアフィリエイトを始めるならこのパソコンを選べ!
近年、インターネットを利用した職業が増えている。ブロガー・アフィリエイター・ユーチューバー。当然、インターネット環境とパソコンが必要。携帯電話(スマートフォン)でも可能だが、パソコンより時間がかかるし、目が疲れる。 記事前半は...

Cocoon設定→全体→サイトアイコンフォントでFont Awesome5が有効になってるか確認。Font Awesome5とLiteSpeed Cacheの併用については以上。

美山走希
美山走希

ワードプレス(ブログ)を高速化させるなら

がおすすめ!

コメント

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