WordPressのテーマCocoon(コクーン)のロゴ表示が遅いのを改善する方法

WordPressの無料テーマ「Cocoon(コクーン)」でロゴの表示が妙に遅いのを改善する方法を書きたいと思います。

スポンサーリンク

「Cocoon(コクーン)」とは

簡単に「Cocoon(コクーン)」の特徴など書いておりますので、よかったら読んでみてください。

WordPressの無料テーマ「Cocoon(コクーン)」Simplicityの後継としてわいひらさんが開発!
Simplicityを開発したわいひらさんが、新しくWordPressの無料テーマ「Cocoon(コクーン)」を作られたようなので、紹介したいと思います。

Cocoon(コクーン)のダウンロード

https://wp-cocoon.com/

ロゴ周りのカスタマイズは下記に書いてあります。

WordPressのテーマCocoon(コクーン)のヘッダーロゴをカスタマイズ!
WordPressの無料テーマ「Cocoon(コクーン)」でヘッダーにあるロゴを左寄りにして、キャッチフレーズに余白など入れてカスタマイズする方法を書きたいと思います。

ロゴの表示が遅い

サイトを表示させると、ロゴの表示が一瞬遅くて、ロゴが表示されると、高さの分だけサイトが下に動く場合があると思います。

ロゴの読み込みにちょっと時間がかかるような感じです。
この現象が起きる理由は、Cocoonの高速化設定のLazy Load設定を有効にしていると起きます。
なので、この設定からタイトルロゴだけを除外して、すぐ表示されるようにしたいと思います。

Lazy Load設定からロゴのimgを除外

管理画面の「Cocoon設定」にある[高速化]をクリックします。

下のほうまでスクロールすると、「Lazy Load設定」があると思います。
こちらの「Lazy Loadを有効にする」にチェックが入っていると思います。

もしもチェックを外せば、ロゴもすぐ表示されると思います。
でもここに書いてあるように、「Googleが推奨するメディアの遅延読み込み方法でページ表示を高速化します。」となっていますので、基本は設定したほうがよいかと思います。
ボックスの中に、「Lazy Loadを行いたくない場合は、該当するimgタグに含まれている文字列を改行区切りで入力してください。」とあるので、ロゴのimgを入れます。

文字列を改行区切りとなっていますが、若干なぞですが、とりあえずロゴのimgを改行で入れます。

<img 
class="site-logo-image header-site-logo-image" 
src="https://使用しているドメイン/wp-content/uploads/2017/07/shiritai-logo.png" 
alt="知りたいねっと" 
scale="0">

srcの部分はロゴが置いてある場所です。
知りたいねっとの場合は、https://shiritai.net/wshirip/wp-content/uploads/2019/07/shiritai-logo.pngです。
分からない場合は、ブラウザの「Chrome」で右クリックして、「検証」を押します。

ソースが出てくるので、h1の三角を開けていくと、imgがありますので、そのアドレスをコピーします。

もしくは、ブラウザの「Chrome」で右クリックして、「ページのソースを表示」を押します。

ソースが表示されますので、「site-logo-image」を検索すれば、同じようにimgが探せると思います。
自分のロゴのアドレスをhttpからコピーして、さきほどのimgからのhtmlソースをボックスの中に改行しながら入れます。

一番下にある「変更を保存」を押せば、これでロゴが遅延せず、すぐ表示されると思います。

コメントをどうぞ