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対応などモバイル端末での表示改善は現在調整中です。今暫くお待ちくださいませ。

更新を受け取る

Lightningでモバイル表示時にサムネイル画像を全幅にする” に対して1件のコメントがあります。

  1. yano より:

    探しましたが見当たらないので、こちらに失礼いたします。
    Varietyでは、モバイル表示時のサムネイル画像を全幅にすることはできないのでしょうか?

    Lightning Variety、VK UNITを使用しています。WPは最新バージョンです。

  2. kurudrive より:

    どの画面のどの位置に表示されている投稿かによって設定は異なりますが、
    外観 > カスタマイズ 画面の Lightningアーカイブレイアウト での指定によってはモバイルでも横1
    カラムになります。

    Lightning標準レイアウトであれば、このページに記載の手法で全幅になると思います。

    ※ 他の人が探しやすいように質問事項はログインの上
    https://forum.vektor-inc.co.jp/forums/forum/lightning/
    に書き込みいただけますと幸いです。

    1. yano より:

      早速ご返信頂きまして、ありがとうございます。
      Lightningアーカイブ指定方法に関しては、サイト見て確認させて頂き、試してみます。

      また、質問場所の件もご指摘ありがとうございました。
      大変失礼致しました。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*