Twenty Fourteenでアイキャッチ画像が小さくても見栄えを損なわない方法

先日WordPressのテーマを”Twenty Fourteen”にしましたが、その後少し微調整をしました。何をしたかというと、アイキャッチ画像が小さいとちょっと見栄えが悪くなるので、それを修正するためのCSSの修正です。やった内容を備忘録として残しておきます。

アイキャッチの見栄えを悪くしているところ

Twenty Fourteenの標準状態で小さなアイキャッチ画像を配置した場合、下記の点が気になっていました。

  • アイキャッチ画像が小さい場合左詰めになる
  • 画像が小さいことで余った部分が斜線で灰色に見える

14d-2

そこでそれぞれCSSの要素を変更しました。

CSSの1040行あたりに記載がありますが標準だとこうなってます。
[css].post-thumbnail {
background:#b2b2b2 url(images/pattern-light.svg) repeat fixed;
display: block;
position: relative;
width: 100%;
z-index: 0;
}
[/css]

ここに真ん中揃えになるように
[css]text-align: center; [/css]
の追記をして
background要素を無しに変更するために
[css]background:transparent [/css]
とします。

以上!

一瞬ですネ。

ついでに背景色についていうと、標準だとAdsenseの表示がされていない時やサイズが小さな画像がでているときに黄色い背景が表示されます。
14d-3

これはAdsense側の設定なのかと思っていたのですがどうやらテーマ側でこの色が付けられているようで、見栄えを損ねているので変更しました。

via:Google AdSenseの表示前に背景が黄色になるのはinsタグが原因 | KUMALOG

CSSの200行目くらいにこういう記述があるので
[css]ins {
background: #fff9c0
text-decoration:none;
}
[/css]
コメントアウトするか前述のtransparentで背景をなくせばOKです。

こんな感じになり、すっきりしました!
14c-2

アイキャッチが扱いにくくて困ってる方はお試しください! 
 
[ad#responsive-3]

「Twenty Fourteenでアイキャッチ画像が小さくても見栄えを損なわない方法」への2件のフィードバック

  1. なるほど、これなら一気に悩みが解決しそうです。ありがとうございます!

コメントを残す