Lightningでモバイル表示時にサムネイル画像を全幅にする

WordPress テーマ 「Lightning」で スマートフォン表示時にサムネイルを横幅100%で表示したい場合は、「外観 > カスタマイズ」の「追加CSS」などに下記を記述すると、横幅100%の画像サイズで表示されます。

@media (max-width: 768px){
.media .postList_thumbnail {
width: 100%;
}
.media .postList_thumbnail{
padding-right:0;
}
.media .postList_thumbnail a {
position:relative;
height:50vw;
}
.media .postList_thumbnail a img{
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 100%;
height: auto;
}
}

注意事項

ただし、サムネイルサイズが小さいと画像がぼやけてしまうので、「設定 > メディア」画面よりサムネイル画像を大きくするなどして調整する必要があります。

※ AMP対応などモバイル端末での表示改善は現在調整中です。今暫くお待ちくださいませ。