blogのアイキャッチを記事の上に表示する

ブログ記事にアイキャッチが設定できますが、表示サイズがスマホでは切れちゃう場合など、100% 幅で表示する。

Empire　テーマでは枠内に画像が収まるように表示が出来なかったので、元のアイキャッチ部分をコード編集から削除して

テーマの

「カスタマイズ」→　「ブログ記事」→「デフォルトのブログ記事」

にカスタムliquidを追加して下記コードを貼り付けて対応

{% if article.image.src %}
<img src="{{ article.image.src | img_url: 'original' }}" alt="{{ article.image.alt }}" style="width: 100%;" />
{% endif %}

レスポンシブ対応でサイズを指定したい場合は、カスタムliquidに下記を入れる

<style>
/* デフォルトのスタイル（スマートフォンとタブレット用） */
.centered-image {
text-align: center;
}

.centered-image img {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
}

/* PC用のスタイル */
@media (min-width: 768px) {
.centered-image img {
max-width: 800px;
}
}
</style>

<div class="centered-image">
{% if article.image.src %}
<img src="{{ article.image.src | img_url: 'original' }}" alt="{{ article.image.alt }}" />
{% endif %}
</div>