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

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

content.phpを編集

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

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

<?php twentyfourteen_post_thumbnail(); ?>


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

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

style.cssを編集

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* コンテンツ部分の上部余白を補正 */
.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はデバイスに合わせて表示を変えることができます。
その分スタイルシートの変更箇所が多いので、カスタマイズには少々苦労しそうです...

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


関連記事

Twenty Fourteenの検索枠の背景色を変更 Twenty Fourteenの検索枠の色変更
Twenty Fourteenの検索枠の背景色変更のカスタマイズです。
WordPressのTwenty Fourteenをフォトログにカスタマイズ Twenty Fourteenをフォトログ的に使う
Twenty Fourteenのトップページに写真をきれいに並べてフォトログテーマ風にカスタマイズしました。写真ギャラリーとして使えます。
Twenty Fourteenの背景色を変更する Twenty Fourteenの背景色を変更する
WordPressのデフォルトテーマにも採用されたTwenty Fourteenの背景色を変更するカスタマイズの紹介です。意外と手こずるカスタマイズですので、参考になれば幸いです。
WordPressのTwenty FourteenにヘッダーにSNSアイコン画像を貼る Twenty FourteenのヘッダーにSNSアイコン設置
レスポンシブで使いやすいWordPressテーマTwenty Fourteenのヘッダー部分に、SNSアイコン画像を貼り付けるカスタマイズを紹介します。
Twenty Fourteenのトップページをアイキャッチ画像と記事タイトルの一覧にするカスタマイズ Twenty Fourteenのトップをタイトル一覧にする
Twenty Fourteenのトップページをカスタマイズし、アイキャッチ画像と記事タイトルの一覧にしスッキリとレイアウトにする方法を紹介します。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>