4.記事一覧と関連記事に表示される画像を丸から四角へ変更

これは好みの問題なので、あえてカスタマイズする必要もない気がしますが、個人的には画像が丸いのはちょっと個性がありすぎる気がしたので、早いうちに変更しておきます。

「QooQ」のリスト表示バージョンでは、デフォルトで、記事一覧に表示される各記事のサムネイル画像が、丸型になっています。これを、普通に四角に戻したい…。

「テーマ」
↓
「カスタマイズ」
↓
「上級者向け」
↓
「CSS を追加」へと移動して、以下を記入。

.list-item-img{
border-radius: 0%;
}
.mrp-post-img{
border-radius: 0%;
}

初期設定では border-radius が50%になっていたので、0%に変更。

ちょっと実験してみましょう。画像の角を border-radius で丸くする

画像は何でもいいんで、とりあえず「Pixabay（ピクサベイ）」からフリー素材を拝借。

参考：3.画像（アイコン、ファビコン、サムネイルetc）を指定する



この画像のHTMLコードは以下の通り。

<img border="0" data-original-height="320" data-original-width="480" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0eUexr01tuMdQzvxqeMWoGbsneTuSMCAyoJwabHfsrUQHfG8WyLjxhXlXNar9QZkZ8PowIZ6TFtZS3rNkYsEhoxYmM_I3tb85SPmgg5wogXVDktT1Lg-l19MtLMBvh5eH-dnyYZ-NdzF5/s1600/tools480x320.jpg" />


これに、border-radius を指定してみましょう。

左上の角から順に、時計回りで40% 30% 20% 10%で指定。



この画像のHTMLコードは以下の通り
<img border="0" data-original-height="320" data-original-width="480" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0eUexr01tuMdQzvxqeMWoGbsneTuSMCAyoJwabHfsrUQHfG8WyLjxhXlXNar9QZkZ8PowIZ6TFtZS3rNkYsEhoxYmM_I3tb85SPmgg5wogXVDktT1Lg-l19MtLMBvh5eH-dnyYZ-NdzF5/s1600/tools480x320.jpg" style="border-radius: 40% 30% 20% 10%;"/>

赤文字の部分が付け足した部分です。

なるほど、正方形の画像の場合なら、4つの角を全部50％で指定すれば、ちょうどまんまるになるんですね。（長方形の画像なら楕円形に）