最新の記事コンテンツや記事カテゴリ最新記事のサムネイル画像を画像全体が表示されるようにする

、ユーザー様よりシーサーサポート宛に以下のようなお問い合わせをいただきました。

左のサイドメニュー内の各記事へのリンクの横にある正方形の画像と、記事ページ一番下にある同様の画像が【一部の画像の拡大になって、何の画像かわからなくなってしまっている】事について、サイズを調整する等の方法はございますでしょうか？

新デザインシステムで提供されているデザインの多くは [最新の記事] コンテンツや [記事カテゴリ最新記事] で記事に貼り付けられている画像の一部をサムネイル画像として表示されるようになっています。
※以下の画像の赤枠で囲われた部分が「画像サムネイル」です。

最新の記事コンテンツ

本ブログの場合、 [最新の記事] コンテンツは右サイドバーに設置しています。
最新の記事コンテンツ

記事カテゴリ最新記事

こちらは、各記事下に「○○○※の最新記事」と表示されています。
（※○○○はカテゴリ名）
記事カテゴリ最新記事

今回はご要望にお応えして、最新の記事コンテンツや記事カテゴリの最新記事のサムネイル画像が全体表示できるようにする方法をご紹介します。

スタイルシートにコードを追加する

今回は、以下のデザインテンプレート向けのご案内となります。
  • シンプルA～D
  • Agent (Map)
  • Time Line Green
  1. マイブログのスタイルシート編集画面にて、以下のコードを貼り付け [保存] ボタンをクリックします。
    ※貼り付ける位置はどこでも大丈夫ですが、今回は分かりやすいように一番下に貼り付けます。 
    .recent-entry__thumbnail img {
    max-width: 100%;
    height: auto;
}
.recent-entry__thumnail img {
    max-width: 100%;
    height: auto;
}
  2. 保存後、以下の画像のように画像全体がサムネイル表示されていれば操作完了です。

    最新の記事コンテンツ

    最新の記事コンテンツ - 編集後

    記事カテゴリ最新記事

    記事カテゴリ最新記事 - 編集後

いかがでしたでしょうか？
これで見栄えもさらに良くなると思うので、ぜひお手元でも試してみてください。

※本記事でご紹介した内容はあくまで一例となります。
また、HTMLやCSSの編集に関して、編集箇所や内容および編集結果を含め、サポートは一切行っておりませんので、あらかじめご了承ください。