Twenty fourteen アイキャッチ表示をカスタマイズしてみた

アイキャッチ部分のカスタマイズをしました。

・小さい画像のときに左寄せじゃなくていい(というか中央へ)
・小さい画像のときに、端に斜線が出ちゃうのを無くしたい
・下部分にかぶるカテゴリーとタイトル表示の背景を透過したい

アイキャッチ使用のデザイン、嫌いじゃない。
けれど、「Twenty fourteen アイキャッチ」で検索すると多数のカスタマイズがヒット。
好き嫌いも別れ、カスタマイズしがいのある部分のようです。

私も、例に漏れずちょっとカスタマイズしてみました。

まず、画像の位置と余白のカスタマイズ。

text-align: center;を追加してbackground を #FFFFFFに。

 

背景色で一瞬クリーム色の表示が出るのも気になるので
ins の背景色を#fff9c0 から#FFFFFFへ(or transparent)

 

次はカテゴリ、タイトルにかかる部分。
嫌いじゃないけど、タイトルがアイキャッチ画像にかぶっちゃう。
白いボードにタイトル書いて、画像の下にひっかけて乗っけたみたいになるのが気になる。

タイトル部分を透過すればいいんじゃないの?ということでちょっと調べてみたところ、単純にカテゴリー表示とタイトルの背景を#fffから透過に変更すれば解決しそうです。
今まで、chromeの「要素を確認」ってあまり使ってなかったけれど便利だなぁ。要素って大切だわ~!

タイトル表示部分

 

カテゴリー表示部分 これはまるごとstyle.cssに追加。
margin-bottomは、好みで。設定しないとアイキャッチ画像の下ギリギリに文字がくっつくので、ちょっと離したほうがきれいかも。

 

もっと凝ったカスタマイズを皆さんやっていらっしゃいますが、
私はこれで満足満足。