作品リスト生成 サムネイルサイズの変更

[ビーム]

htmlの知識が少しある程度の初心者です。

作品リストをページに表示させた際のサムネイルサイズについて。

作品リスト生成から選べる「イラスト（サムネイル小）」よりも、もっと小さいサイズで表示させるために書き換えをしたかったのですが、どこを触って良いのか分かりませんでした。

変更の仕方、もしくは変更箇所がどこかなど教えていただく事は可能でしょうか。

 

初歩的な質問で大変心苦しいのですが、ご教示いただけると助かります。

よろしくお願い致します。

[佐高]

助言できそうな内容なので通りすがりに失礼します。
WordPress自体のカスタマイズが分からないということでよろしいでしょうか？
初歩的なことから書いてみますが、専門家でないため、分からない箇所があったら申し訳ありません。

 

イラスト作品リストのサムネイルの見た目はCSSでのカスタマイズが可能です。

そのCSSをWordPressでいじるためには、ご自身のサイトのWordPressにログインをし、そちらのWordPressメニューから追加CSSで変更をするのが一番簡単だと思います。
（子テーマのスタイルシートをテーマファイルエディタ、もしくはFTPなどでファイルを直接編集していじるのでも同様にできますが、慣れていない方は追加CSSがおすすめです）

 

1.ダッシュボード→外観→カスタマイズ（※絵筆のアイコンからもいけます）→追加CSSにアクセス

2.追加CSSに変更したいCSSを書き込む
この追加CSSに変更したいものを書き込んだものは元々のCSSよりも優先されて表示されるので、ここでサムネイルのサイズ変更のCSSの内容を書き込みます。
フォーラムにあったイラスト一覧のアスペクト比のトピックでのガタガタ様の書き込みを拝見したところ、イラストのショートコードのサムネイルはデフォルトは「.shortcode-illust.default li」、サムネイル小は「.shortcode-illust.small li」で制御しているとのことで、そちらを指定してサイズを調整することができるかと思います。

 

試しに上記のフォーラムを調整してちょっと記述してみました。全部正方形です。あんまりちゃんとは確認していないので、変なところがあるかもしれません。また、サイズを小さくするとタイトルと日付がはみ出したので、h3（タイトル）、p（日付）のサイズも調整しています。

.shortcode-illust.default li, .shortcode-illust.small li {
width: 80px;
height: auto;
aspect-ratio: 1 / 1;
}
.shortcode-illust.default li section h3, .shortcode-illust.small li section h3 {
font-size: 10px;
}
.shortcode-illust.default li section p, .shortcode-illust.small li section p {
font-size: 10px;
}
@media only screen and (min-width: 768px) {
.shortcode-illust.default li, .shortcode-illust.small li {
width: 100px;
height: auto;
aspect-ratio: 1 / 1;
}
.shortcode-illust.default li section h3, .shortcode-illust.small li section h3 {
font-size: 15px;
}
.shortcode-illust.default li section p, .shortcode-illust.small li section p {
font-size: 12px;
}
}
@media only screen and (min-width: 1030px) {
.shortcode-illust.default li, .shortcode-illust.small li {
width: 120px;
height: auto;
aspect-ratio: 1 / 1;
font-size: 10px;
}
.shortcode-illust.default li section h3, .shortcode-illust.small li section h3 {
font-size: 17px;
}
.shortcode-illust.default li section p, .shortcode-illust.small li section p {
font-size: 15px;
}
}

ちなみにご存知かもしれませんが、CSSの基本や「ここをいじりたい！」と思った時のデベロッパーツールの使い方などもガタガタ様が書いてらっしゃるので、色々気になったらそちらもご確認いただけたらわかりやすいかと思います。
・CSSの基本
・デベロッパーツールの使い方

 

長々と失礼いたしました。
思い通りに変更できますよう祈っております。

[ビーム]

お休みがなかなか取れず、返信がとても遅くなってしまい申し訳ありません。

そして詳細とてもわかりやすく書いてくださり本当にありがとうございます、長々なんてとんでもありません。

 

CSSの方もちょっとかじった程度でしたので、非常に助かります。

参考になるリンクなども付けてくださって感謝しかありません。見ながら進めていくことが出来そうです、少しずつやっていこうと思います。

[佐高]

お役に立てたようでよかったです！

[投稿者]

投稿