記事一覧 サムネイル PCとモバイル表示

Simplicityの特徴 フォーラム テーマファイルのカスタマイズに関する質問など 記事一覧 サムネイル PCとモバイル表示

  • このトピックには2件の返信、1人の参加者があり、最後にさとぽんにより4年前に更新されました。
2件の返信スレッドを表示中
  • 投稿者
    投稿
    • #56352
      さとぽん
      ゲスト

      PC表示で記事一覧サムネイルのサイズを変更しました。

      functions.phpに以下を記述し、
      add_image_size('thumb250',259,160,true);

      entry-card.phpではthumb150をthumb250に変更しました。

      そしてスタイルシートに以下を記述しています。

      /* サムネイルサイズ指定 */
      .entry-thumb img {
          width: 259px; !important;
          height: 160px; !important;
          margin-bottom: 40px;
      }

      PC表示は上記で狙い通りのカスタマイズができました。

      モバイル表示では、上記を適用せず、デフォルト通りの表示のままで行きたいです。
      そこで以下をmobile.cssに記述しました。

      /* サムネイルサイズ指定 */
      .entry-thumb img {
          width: 100px; !important;
          height: 100px; !important;
      }

      ところが、現時点で以下のような見た目になっています。
      http://netakiri.net/uploader/src/up0348.jpg

      状態としては、
      1)サムネイル画像とタイトルや記事抜粋との距離が離れている。
      2)サムネイル画像が潰れている。

      1)は

      /* サムネイル領域を固定 */
      .entry-thumb{
      width: 100px;
      height: 100px;
      overflow: hidden;
      }

      で解決できそうです。

      しかし、2)はRegenerate Thumbnailsを使用しても直らず…

      モバイル表示で
      1)サムネイル画像とタイトルや記事抜粋との距離を縮めたい。
      2)サムネイル画像のアスペクト比を正しくしたい。
      とするにはどのような手段があるでしょうか?

      対象サイトはこちらです。https://me-her.com/

      もし、サポート対象外でしたら、申し訳ございません。その旨ご返信いただければと思います。

    • #56354
      かうたっく
      ゲスト

      モバイルCSSに以下を追記したらキレイになりました。

      .entry-thumb img {
          object-fit: cover;
      }

      例えばですが、CSS 画像 きれいに表示

      などで検索すればもっと気に入った表示になるかもしれません?

    • #56358
      さとぽん
      ゲスト

      かうたっく様
      ありがとうございます!!
      きれいに表示できました。
      勉強になりました。

2件の返信スレッドを表示中
  • トピック「記事一覧 サムネイル PCとモバイル表示」には新しい返信をつけることはできません。
スポンサーリンク
アドセンス(大)
アドセンス(大)