当サイトには広告が含まれております

twentyfourteenで投稿コンテンツ上部に表示されるアイキャッチ画像を消して余白調整する

この記事は最終更新日から10年経過しています。内容が古い可能性があります。

WordPressにはアイキャッチ画像というものがあって、目次ページを作ったりするときに便利に使えそうです。そこで記事にアイキャッチ画像を指定してみました。

試しに一番上で使っている大きめの画像を指定してみたのですが、

Image

 

画像の大きさが十分でないせいか左右に斜線が表示されています。ううう、うーん。

画像はいつも大きなものを準備できるとも限らないのでどうしようかなぁ、と考えてしまいました。

記事をざっと見る

twentyfourteenのアイキャッチ画像指定

twentyfourteenの投稿でアイキャッチ画像を指定すると個々のページに指定した画像がこのように大きめで表示されます。

私は後で作りたいと思っている一覧ページでサムネール画像で表示しようかなと思っているのでこの画像は消してしまいたいと思います。

twentyfourteenの個々のページで表示されている部分は、content.phpの

<?php twentyfourteen_post_thumbnail(); ?>

という部分のようです。そこでこのファイルを子テーマにコピーして、この行を消せば消えるはずです。
やってみました。

Image

 

トップページはこのように問題なく画像が消えただけなのですが、

タイトルをクリックして、個別のページを見ると やや!

Image

 

上部の余白が消えてこんなことになっています・・

アイキャッチ画像を指定してないページだと、

Image

 

このように問題なく表示されているので、アイキャッチ画像があるかないかを判定してなにかをしているところがおかしいようです。

ソースを見比べてみると、アイキャッチ画像のある方は

<article id="post-760" class="post-760 post type-post status-publish format-standard hentry category-wordpress category-69 has-post-thumbnail">

アイキャッチ画像のない方は

<article id="post-751" class="post-751 post type-post status-publish format-standard hentry category-xoops-cube tag-d3forum">

のようになっています。画像のある方には、 has-post-thumbnail というクラスが指定されているので、きっとこれが何かしてるに違いありません。ということで、twentyfourteenのstyle.cssを見てみました。

おそらくここら辺かな?という所を見つけました。

.site-content .has-post-thumbnail .entry-header {
padding-top: 24px;
}

.singular .site-content .hentry.has-post-thumbnail {
margin-top: -48px;
}

@media screen and (min-width: 846px) {
(中略)
.site-content .has-post-thumbnail .entry-header {
margin-top: -48px;
}

@media screen and (min-width: 673px) {
(中略)
.full-width .site-content .has-post-thumbnail .entry-header,
.full-width.singular .site-content .hentry.has-post-thumbnail {
margin-top: -48px;
}

padding-topが指定されていたり、margin-topがマイナスの数字で指定されているので上の方に移動してしまうようです。画像が表示されていればばこれで良かったようなのですが先ほど消してしまい、画像は表示されていないためにタイトルが上部に行ってしまっています。

子テーマのstyle.cssにこの辺を調整したものを付け加えました。

/* twentyfourteen_post_thumbnail削除 上部あき調整 */
.site-content .has-post-thumbnail .entry-header {
padding-top: 0px;
}

.singular .site-content .hentry.has-post-thumbnail {
margin-top: 0px;
}

@media screen and (min-width: 846px) {
.site-content .has-post-thumbnail .entry-header {
margin-top: 0px;
}
}

@media screen and (min-width: 673px) {
.full-width .site-content .has-post-thumbnail .entry-header,
.full-width.singular .site-content .hentry.has-post-thumbnail {
margin-top: 0px;
}

これで、個々のページもこのように上部があいて表示されるようになりました

Image

 

今日は感想を…

このblogを書き始めたときは単に表示しているところを消せば終わり、と思ってやり始めたのですが上部のあきがおかしいというのをなんとかするのにとってもとっても時間がかかってしまいました(^_^;。

色々奥深いものですねWordPressって。

この記事が気に入ったら
いいね または フォローしてね!

あなたのシェアが励みになります!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントを残す

記事をざっと見る