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

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

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

Image

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

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

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

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

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

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

<?php twentyfourteen_post_thumbnail(); ?>

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

Image

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

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

Image

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

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

Image

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

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

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

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

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

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

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

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

Image

今日は感想を…

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

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

兎本美佳
ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/ 無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサー広告
トップへ戻る