2カラムで作品一覧を表示した時のサムネイルについて

創作・同人サイトに特化した多機能WordPressテーマ フォーラム テーマについての質問 2カラムで作品一覧を表示した時のサムネイルについて

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

      お世話になっております。

      クイックメニューで2カラムに分割したエリアの中にイラスト作品一覧を表示させたいのですが、サムネイルの横幅が狭くなってしまいます。※2カラム表示が反映されてる時のみ発生し、スマホ等の小さい画面だと問題なく表示されます。

      2カラムになっていてもサムネイルが正方形になるようにしたいのですが、どのように設定すれば良いでしょうか。

      既に記載済みでしたら申し訳ありません。

      ご回答お待ちしております。

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

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

      カラムを分割した場合にサムネイルの幅が狭くなるのはCSSの記述内容によるものです。

      style.cssの中に、

      (サムネイルの小さいイラスト一覧の場合)
      .shortcode-illust.small li{
      width: calc(100%/6 – 3px);
      height: 160px;
      }

      あるいは

      .shortcode-illust.small li {
      width: calc(20% – 4px);
      height: 150px;
      margin-bottom: 5px;
      }

      などの記載があります。
      (レスポンシブ対応のため、同じ要素に対して複数のCSS記述がされています)

      このCSSのwidthの値をお好みの値に変更することで対応が可能です。

      しかし、この値を書き換えると、2カラムではないイラスト一覧のサムネイルの幅も変更されてしまうので、
      イラスト出力ショートコードにclassの値を追加し、CSSを追記することをおススメします。

      (例)
      イラスト出力ショートコードにclass「column-2」を追加し、

      @media only screen and (min-width: 768px) {
      .shortcode-illust.column-2 li {
      width: (ここに好みの値);
      }
      }

      @media only screen and (min-width: 1030px) {
      .shortcode-illust.column-2 li {
      width: (ここに好みの値);
      }
      }

      をCSSに追加する。

      CSSの知識のない場合は少々難しいかもしれませんが、
      サイトのデザインを好みのものに近づけるには必須の知識になりますので、
      分からない部分はご自分で調査しながら取り組んでいただければと思います。

      またCSSの追記を行う場合は、必ず子テーマをご利用ください。

      • この返信は3週、 1日前にgtgtが編集しました。
      • この返信は3週、 1日前にgtgtが編集しました。
      • この返信は3週、 1日前にgtgtが編集しました。
    • #1207 返信
      miya
      ゲスト

      gtgt様、

      ご連絡ありがとうございました。CSSで編集可能とのこと理解いたしました。

      具体的な修正内容を記載いただけて助かりました。

2件の返信スレッドを表示中
返信先: 2カラムで作品一覧を表示した時のサムネイルについて
あなたの情報: