Twenty Fourteen独自のアイキャッチ表示を削除

アイキャッチ画像の表示がとても特徴的なWordPressテーマTwenty Fourteenですが、このアイキャッチ画像表示が必要ない方もいらっしゃると思います。
今回は、Twenty Fourteenのアイキャッチ画像表示を削除するカスタマイズを紹介します。

content.phpを編集

アイキャッチ画像表示をやめるのは1行の削除で可能です。
子テーマでのカスタマイズの場合には、Twenty Fourteenのテーマディレクトリからcontent.phpを子テーマディレクトリにコピーをして修正を加えてください。
Twenty Fourteenを直接編集する場合には、twentyfourteenディレクトリ内のcontent.phpを直接編集してください。

下記の行を削除するだけでアイキャッチ画像の表示は削除されます。

<?php twentyfourteen_post_thumbnail(); ?>

するとこのような表示になります。
このままでも特に問題はないのですが、左の画像のタイトル上部やカレンダー上部の余白が広すぎるような気がします。

せっかくなので、この余白も調節したいと思います。

style.cssを編集

余分な余白の調節にはstyle.cssを編集します。
子テーマディレクトリ内にあるstyle.cssに下記コードを加えます。

/* コンテンツ部分の上部余白を補正 */
.content-area {
	padding-top: 10px;
}
.site-content .has-post-thumbnail .entry-header {
	margin-top: 0;
}
 
/* サイドバー部分の上部余白を補正 */
.content-sidebar {
	padding-top: 10px;
}
 
/* スマホページの上部余白を補正 */
.singular .site-content .hentry.has-post-thumbnail {
	margin-top: 0;
}

Twenty Fourteenを直接編集している場合には、該当箇所を変更するか、style.cssの最下部に上記コードを追記してください。
最下部にコードを追記する方が簡単かもしれません。

WordPress Twenty Fourteenでアイキャッチ画像を削除し余白を整える

すると、このように上部の余白が補正されます。

アイキャッチ画像の独自表示はTwenty Fourteenの肝であり、それを削除してしまうのはちょっとアレな感じもしますが、毎回キレイにアイキャッチ画像を表示させるためには画像サイズをかなり気を付けなければなりません。
それが少々大変そうだったので、アイキャッチ画像を削除するカスタマイズに至りました。

感想

まだTwenty Elevenを試し始めたばかりなので、cssの作り方がハッキリと理解できません。
まぁ、長く試し続けても私には理解はできませんが．．．(苦笑)

ほんの少し余白を削るだけのカスタマイズに、とても長い時間を費やしてしまいました。

そして、このTwenty Fourteenはデバイスに合わせて表示を変えることができます。
その分スタイルシートの変更箇所が多いので、カスタマイズには少々苦労しそうです．．．

しかし、とても使いやすいテーマであることも確かです。
引き続き便利にカスタマイズしていきたいと思います。