返信先: 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の追記を行う場合は、必ず子テーマをご利用ください。

  • この返信は2年、 10ヶ月前にgtgtが編集しました。
  • この返信は2年、 10ヶ月前にgtgtが編集しました。
  • この返信は2年、 10ヶ月前にgtgtが編集しました。