FC2ブログの記事サムネイル画像を表示する変数 %topentry_image_w300 の黒帯を消す方法 new

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

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

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

thumbnail

画像サイズが 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 要素の外に出して非表示にするわけです。

thumbnail

まったく同じ画像ですが、この通り、上下の黒帯が消えました。
指定する 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;
}

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

no image

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

この記事をツイツイする tweetSearch

Commentあなたのコメントをぜひ書き残してください!

新しいコメント

※設定しておくとあとからコメントを編集できます
管理者にだけ表示を許可する
※公開されません

Trackback あなたのウェブページをリンク!

Trackback URL

© こじょらぼ all rights reserved.

旧 すぐへこたれるこじょblog

Guild Wars 2 © 2010-2014 ArenaNet, LLC. and NC Interactive, LLC. All rights reserved. Guild Wars, Guild Wars 2, ArenaNet, NCSOFT, the Interlocking NC Logo, and all associated logos and designs are trademarks or registered trademarks of NCSOFT Corporation. All other trademarks are the property of their respective owners.

Back to Top