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対応などモバイル端末での表示改善は現在調整中です。今暫くお待ちくださいませ。
探しましたが見当たらないので、こちらに失礼いたします。
Varietyでは、モバイル表示時のサムネイル画像を全幅にすることはできないのでしょうか?
Lightning Variety、VK UNITを使用しています。WPは最新バージョンです。
どの画面のどの位置に表示されている投稿かによって設定は異なりますが、
外観 > カスタマイズ 画面の Lightningアーカイブレイアウト での指定によってはモバイルでも横1
カラムになります。
Lightning標準レイアウトであれば、このページに記載の手法で全幅になると思います。
※ 他の人が探しやすいように質問事項はログインの上
https://forum.vektor-inc.co.jp/forums/forum/lightning/
に書き込みいただけますと幸いです。
早速ご返信頂きまして、ありがとうございます。
Lightningアーカイブ指定方法に関しては、サイト見て確認させて頂き、試してみます。
また、質問場所の件もご指摘ありがとうございました。
大変失礼致しました。