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

[miya]

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

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

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

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

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

[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の値をお好みの値に変更することで対応が可能です。

しかし、この値を書き換えると、２カラムではないイラスト一覧のサムネイルの幅も変更されてしまうので、
イラスト出力ショートコードに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年、 6ヶ月前にgtgtが編集しました。
• この返信は3年、 6ヶ月前にgtgtが編集しました。
• この返信は3年、 6ヶ月前にgtgtが編集しました。

[miya]

gtgt様、

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

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

[投稿者]

投稿