AFFINGER5

アフィンガー5のサムネイル画像を最大にする方法。

アフィンガー5のサムネイル画像を大きく見せる方法を紹介します。

この設定にすると、トップページのアイキャッチ画像も大きく表示されます。

 

サムネイル画像を大きく見せた画像

 

ただ、サイトが重くなるというデメリットもあるのでご注意ください。

hiro
サイトスピードを比較したデータも紹介します。

 

サムネイルの画像設定

サムネイルの設定は、管理画面の「デザイン」>「サムネイル画像設定」から。

チェックを入れるだけで設定完了です。

 

チェックを入れる場所↓↓

  • フルサイズにする
  • サムネイル画像を大きくする
  • スマホでもサムネイル画像を大きくする
  • サムネイル画像をさらに大きく(β)

サムネイルの設定は、トップページにも反映されます。

 

表示スピードを比較

サムネイルを最大表示させたときのスピードを比較しました。

上が「カードデザイン」、下が「サムネイル最大」の数字です。

※計測はGTmetrixを使用

 

Page Speed Grade

Google社のサイト速度計測サービス「Page Speed」 のサイト評価。

YSlow Grade

Yahoo社のサイト速度計測サービスの「YSlow」 のサイト評価。

評価は%の値が高いほど、速度改善に効率化された優秀なサイトの評価となっています。

 

PageSpeed YSlow
カードデザイン 88% 73%
サムネイル最大 60% 70%

 

サムネイルを最大にした場合、カードデザインと比較してページスピードが「28%」落ちています。

hiro
あくまで目安ですが…

 

インフィールド広告を表示

上図がトップページの「インフィールド広告」です。

hiro
思ったより違和感がありません。

 

サイドバーに表示される広告

サイドバーに表示される「インフィールド広告」です。

hiro
少し違和感を感じますが、それほど気になりませんでした。

 

スマホに表示される広告

スマホに表示される「インフィールド広告」です。

hiro
こちらも思っていたより違和感ありません。

 

アイキャッチ画像サイズは「640×335px」を使用。

広告のデザインが気になる方は、カスタマイズしてください。

 

インフィールド広告の設定

インフィールド広告は、自動広告スタイルのコード貼ってます↓↓

アドセンスコードもそのまま使用。

 

設定場所は、ウィジェットの「広告・インフィールド広告」です。

「00_STINGERカスタムHTML」にコードを貼って挿入してます。

 

インフィールド広告の表示設定

表示設定は「AFFINGER5管理」>「Google・広告/AMP」から。

 

インフィールド広告が設定できる場所

  • トップページの記事一覧及びアーカイブ
  • サイドバーの新着記事一覧
  • 関連記事

広告を表示したいエリアに「1~9」の数字を入力。

割った余りが「0」の場合に表示されます。

 

ブログカードのサムネイル画像

ブログカードは「サムネイル画像」の設定を外すことが可能です。

 

 

hiro
好きなデザインを選んでください。

 

GoogleAdSenseに関するおすすめ本

アドセンスで稼ぎたいと思ってるなら、読んで損はないと思います。

良書です。

-AFFINGER5
-

© 2020 アフィ基地