ボクアフィ

ボクのアフィリエイト日記

AFFINGER5

AFFINGER5でアイキャッチ以外の画像をワイド化する方法

更新日:

この記事は約3分で読めます。
AFFINGER5でアイキャッチ以外の画像をワイド化する方法

AFFINGER5でアイキャッチ以外の画像をワイド化する方法は、ワイド化したい画像を以下の<div>タグで囲むだけです。

<div class="st-eyecatch st-eyecatch-under">
ワイド化したい画像
</div>

以上です。

【追記】「スタイル>写真>ワイド」で実装できるようになりました。

画像の「ワイド化」とは?

「画像のワイド化」とは、画面幅いっぱいに画像を表示することを指します。

AFFINGER5では、アイキャッチ画像をワイド化し、画面幅いっぱいに表示できるようになっています。しかし、記事内に貼った画像は、ワイド化することはできません(今後のアップデートでカスタマイズ可能になるかもしれません)。

ちなみに、アイキャッチ画像のワイド化はデフォルトで有効になっています。タイトル下にアイキャッチを設定した場合は、「AFFINGER管理」>「投稿・固定記事」>「アイキャッチ設定」の「タイトル下に変更したアイキャッチ画像をワイド化する」でワイド化できます。

AFFINGER5で画像をワイド化した例

AFFINGER5で記事内の画像をワイド化した例をご紹介します。

ワイド化する前

WordPressのパーマリンク設定

ワイド化する前の普通の画像です。

ワイド化した後

WordPressのパーマリンク設定

画像をワイド化させました。

コードは以下の通り。

<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のレスポンシブ広告を全幅に広げる方法
AFFINGER5でAdSenseのレスポンシブ広告を全幅に広げる方法

AFFINGER5で、AdSenseの「レスポンシブ広告」や「記事内広告」を全幅に広げる方法をご紹介します。

続きを見る

おすすめ記事

EWWW Image Optimizerの設定画面

WordPress

画像を「EWWW Image Optimizer」でWebPに変換する方法

2018/11/26  

WordPressプラグイン「EWWW Image Optimizer」を使い、次世代画像フォーマット「WebP(ウェッピー)」に変換する方法を解説します。

AdSenseの「ページビュー」と「表示回数」の違い

AdSense

AdSenseの「ページビュー」と「表示回数」の違い

2018/06/30  

AdSenseのレポートでよく見る「ページビュー」と「表示回数」の意味の違いを解説します。

プラグイン不要!Googleフォームでお問い合わせフォームを作る方法

Google WordPress プラグイン

プラグイン不要!Googleフォームでお問い合わせフォームを作る方法

2018/06/08  

WordPressで人気のプラグイン「Contact Form7」を利用せずに、Googleが提供する「Googleフォーム」を使ったお問い合わせフォームの作り方をご紹介します。

-AFFINGER5

Copyright© ボクアフィ , 2019 All Rights Reserved.