１５０×１５０で表示されてしまいます。
デフォルトのサイズのままですね。
管理画面 ＞ 設定 ＞ メディア
でサムネイルのサイズを変更してみてください。
有難うございます。
管理画面＞設定＞メディアからサムネイルのサイズは変更しています。
サイズを例えば、「２００×１５０」にしても
「Wordpress Related Posts」で表示させているサムネイルは
「１５０×１５０」で表示されてしまっています。
チェック項目の「サムネイルを実寸法にトリミングする (通常は相対的な縮小によりサムネイルを作ります) 」には
現在チェックが入っている状態です。
どこが問題なのでしょうか？
「Wordpress Related Posts」のAdvanced settingsの内容は、
どのように設定されていますか？
Enable Themesにチェックが入っていて
Vertical (Large)を選択した状態ではないですか？
もし、そうだとすれば
Enable Themesのチェックを外して
その下のCustomizeで Enable custom CSSにチェック
CSSの中身は、こんな感じ（お好みで変更してください）
ul.related_post li {
float: left;
height:100px;
margin:0 10px;
overflow: hidden;
width:200px;
}
ul.related_post li a {
display: block;
}
ul.related_post li img {
height;150px;
width:200px;
}
ここまでで表示が変わるかどうか、確認してみてください。
有難うございます。
ご助言通り、「Enable Themes」のチェックを外し、
ＣＳＳを以下に変更致しました。
.related_post_title {
}
ul.related_post {
}
ul.related_post li {
float: left;
height:150px;
margin:0 10px;
overflow: hidden;
width:200px;
}
ul.related_post li a {
display: block;
}
ul.related_post li img {
height;150px;
width:200px;
}
変更した結果、サムネイルの画像サイズは指定通りになりましたが、
その代わりタイトルのテキスト文字が消えてしまいました。
サムネイルの下にタイトルも載せたいのですが
どのようにしたら出来ますでしょうか。
カスタムＣＳＳモードにしたのですから、タイトル文字等も任意に指定しましょう。
上に書いたCSSだと、ul.related_post liの高さが200pxで、overflow: hidden;を指定しているのでタイトルは表示されないですね。
.related_post_title {
}
ul.related_post {
list-style:none!important;
}
ul.related_post li {
float: left;
margin:0 10px 20px;
width:200px;
}
ul.related_post li a {
display: block;
}
ul.related_post li img {
height:150px;
width:200px;
}
とりあえず、こちらのCSSでタイトルも表示されますので、後はCSSの勉強してくださいね。
有難うございます！
無事、思い通りに表示させる事が出来ました。
勉強不足で申し訳ありません。
次は調べて試行錯誤してみます。
有難うございました。
問題が一つ起きてしまいました。
横４列、縦３列計、計１２個の画像を表示したいのですが、
○○○○
○○○○
○
○
画像が上のような配置になってしまいます。
marginの数値を変えてみたのですが変わりません。
どこを変更すれば良いのでしょうか？
問題解決のためのチェックリスト
問題部分のCSS・HTML・PHP等のコードが書かれていないので、想像でしかお答えできません。
上記のCSSをそのまま適用されているのでしたら、
ul.related_post liをfloatで横並びにしているので、タイトルが２行以上になった場合は、表示が崩れます。
RocketMartue様
有難うございます。
上記のＣＳＳをそのまま適用しています。
タイトルはほとんどの記事が２行以上になります。
横並びで、尚且つタイトルが２行以上でも崩れないようにするには方法はありますでしょうか？
display:inline-block;
/display:inline;
/zoom:1;
vertical-align:top
上記をＣＳＳに付け加えたら思い通りに並びました。
有難うございました。
