FC2ブログで、トップ ページやカテゴリ ページに
記事のサムネイル画像を表示するようカスタマイズされているテンプレートがあります。

これは最近 使えるようになった変数 <%topentry_image_w300> を使って実現しているみたい。
ヘルプによると、この変数は 記事内の画像をサムネイル画像として表示（大） とのことです。

これは便利！ というわけで早速 使ってみたのですが、表示される画像がこんな感じ。

画像サイズが 300 x 200 なので、元画像を縮小した際、余白部分が黒で塗り潰される模様。
これはアカンやつや。特に白系の配色デザインにはまったく合いません。 ･ﾟ･(ﾉД`)･ﾟ･

というわけで、この黒い部分をスタイルシートを使って簡単に消す方法をご紹介します。

ポイントは overflow: hidden

まず、サムネイル画像の変数を div 要素で囲み、クラスを指定しておきます。

<%topentry_image_w300>

囲んだ div 要素と、その中の img 要素のスタイルを以下のように設定します。

.w300tb {
  overflow: hidden;
  width: 300px;
  height: 168px; /* height ＝ 300 ×（元画像の高さ）÷（元画像の幅）*/
}
.w300tb img {
  position: relative;
  top: -16px; /* さきほどの height を 200 から引いて 2 で割った数値 */
}

例えば、元画像が 幅 640px 高さ 360px （16:9）の場合、幅が 300px に縮小されると、高さは 168px になり、上下 16px（計 32px）の黒帯ができます。
これを囲んだ div 要素の外に出して非表示にするわけです。

まったく同じ画像ですが、この通り、上下の黒帯が消えました。
指定する height は小数点を切り捨てて、さらに偶数になるように 必要に応じて 1 を引くといいでしょう。

この方法で黒帯を消すには、元画像の大きさがどの記事でもだいたい同じである必要があります。
（正確には、幅と高さが同じ比率だとうまくいきます）

1920 x 1080（いわゆるフルHD）の画像は比率が 16:9 なので、幅が 300px なら高さは 168px となり、上記のスタイルシートがそのまま使えます。

記事に画像がない場合の代替画像を設定する

おまけで代替画像を表示する方法です。

<%topentry_image_w300> 変数は、サムネイルにできる画像がない場合 img タグを出力しません。
そのままだと ただの空白になってしまうのですが、それを逆手に取って、囲んだ div 要素に背景画像を設定しておくと、それが代替画像になります。

.w300tb {
  overflow: hidden;
  width: 300px;
  height: 168px;
  background: 0 0 no-repeat ulr('http://blog-imgs-xx.fc2.com/x/x/x/xxx/代替画像.jpg');
}
.w300tb img {
  position: relative;
  top: -16px;
}

当ブログでは、カテゴリ ページでこの方法を使ってサムネイル画像を表示しています。
下の画像は代替画像です^^

この記事が どなたかのお役に立てば幸いです！