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

#2301
佐高
ゲスト

助言できそうな内容なので通りすがりに失礼します。
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の基本
・デベロッパーツールの使い方

 

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