AFFINGER5でアイキャッチ以外の画像をワイド化する方法は、ワイド化したい画像を以下の<div>タグで囲むだけです。
<div class="st-eyecatch st-eyecatch-under"> ワイド化したい画像 </div>
以上です。
【追記】「スタイル>写真>ワイド」で実装できるようになりました。
画像の「ワイド化」とは?
「画像のワイド化」とは、画面幅いっぱいに画像を表示することを指します。
AFFINGER5では、アイキャッチ画像をワイド化し、画面幅いっぱいに表示できるようになっています。しかし、記事内に貼った画像は、ワイド化することはできません(今後のアップデートでカスタマイズ可能になるかもしれません)。
ちなみに、アイキャッチ画像のワイド化はデフォルトで有効になっています。タイトル下にアイキャッチを設定した場合は、「AFFINGER管理」>「投稿・固定記事」>「アイキャッチ設定」の「タイトル下に変更したアイキャッチ画像をワイド化する」でワイド化できます。
AFFINGER5で画像をワイド化した例
AFFINGER5で記事内の画像をワイド化した例をご紹介します。
ワイド化する前
ワイド化する前の普通の画像です。
ワイド化した後

画像をワイド化させました。
コードは以下の通り。
<div class="st-eyecatch st-eyecatch-under"> <img class="alignnone wp-image-xxxx" src="https://xxxx.jpg" alt="xxxx" width="xxxx" height="xxx" /> </div>
分かりやすいように改行・改変してあります。
まとめ
AFFINGER5でアイキャッチ以外の画像をワイド化する方法は、ワイド化したい画像を<div class="st-eyecatch st-eyecatch-under">タグで囲んでください。
<div class="st-eyecatch">でもワイド化できますが、表示がズレるので「st-eyecatch-under」も追加しておいてください。
また、このカスタマイズをAdSenseに応用して、広告を画面いっぱいに表示されることも可能です。
-
-
AFFINGER5でAdSenseのレスポンシブ広告を全幅に広げる方法
続きを見る