創作・同人サイトに特化した多機能WordPressテーマ › フォーラム › テーマについての質問 › 2カラムで作品一覧を表示した時のサムネイルについて
- このトピックには2件の返信、1人の参加者があり、最後に
miyaにより1年、 6ヶ月前に更新されました。
-
投稿者投稿
-
-
miya
ゲストお世話になっております。
クイックメニューで2カラムに分割したエリアの中にイラスト作品一覧を表示させたいのですが、サムネイルの横幅が狭くなってしまいます。※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の値をお好みの値に変更することで対応が可能です。
しかし、この値を書き換えると、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の追記を行う場合は、必ず子テーマをご利用ください。
-
miya
ゲストgtgt様、
ご連絡ありがとうございました。CSSで編集可能とのこと理解いたしました。
具体的な修正内容を記載いただけて助かりました。
-
-
投稿者投稿