ショートコード イラスト一覧のアスペクト比について

創作・同人サイトに特化した多機能WordPressテーマ フォーラム カスタマイズに関する質問 ショートコード イラスト一覧のアスペクト比について

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

      はじめまして、カスタマイズについて質問を失礼します。
      ショートコードで設置したイラスト一覧のアスペクト比を1:1(正方形)のまま固定したいのですがうまくいきません。

      .shortcode-illust img {
      width: 100%;
      height: auto;
      }

      .shortcode-illust img {
      width: 100%;
      height: auto;
      aspect-ratio: 1 : 1;
      }

      .shortcode-illust img {
      width: 100%;
      height: auto;
      padding-top: 100%;
      }

      上記いずれも上手くいきません。ブラウザのサイズにより長方形になってしまいます。
      他に方法はありますでしょうか?アドバイスを頂けますと幸いです。
      よろしくお願いいたします。

      WordPress 6.0
      canvas on EASEL Ver1.1.0
      EASEL Ver1.5.4
      Google chrome(windows、android)

    • #2279 返信
      gtgt
      キーマスター

      EASELのご利用ありがとうございます。

      イラストショートコードで出力するサムネイルのサイズは、
      .shortcode-illust img ではなく
      .shortcode-illust.default li あるいは .shortcode-illust.small liで制御しています。

      これらの要素に対し
      height: auto;
      aspect-ratio: 1 / 1;
      を適用すればよいです。(aspect-ratioは 1 : 1ではなく 1 / 1です)

      レスポンシブ対応も含めて、

      .shortcode-illust.default li, .shortcode-illust.small li {
      height: auto;
      aspect-ratio: 1 / 1;
      }

      @media only screen and (min-width: 768px) {
      .shortcode-illust.default li, .shortcode-illust.small li {
      height: auto;
      aspect-ratio: 1 / 1;
      }
      }

      @media only screen and (min-width: 1030px) {
      .shortcode-illust.default li, .shortcode-illust.small li {
      height: auto;
      aspect-ratio: 1 / 1;
      }
      }

      でしょうか。上手く適用できなければ適宜調整してください。

      • #2283 返信
        ごはん
        ゲスト

        ご返信ありがとうございます。
        border-radiusを.shortcode-illust imgに適用した流れで指定する場所はimgかと思っておりました。
        ご教示いただいたタグで無事固定することができました!

        また初歩的な間違いのご指摘もありがとうございます!
        10年以上ぶりに個人サイトをと思い立ちましたがわからないことばかりでこちらのテーマとdoさんにとても助けられております。
        これからも応援しております!

1件の返信スレッドを表示中
返信先: ショートコード イラスト一覧のアスペクト比について
あなたの情報: