タイトル下のアイキャッチ画像を任意のサイズで表示

Simplicity

やっとの事でWordPressテーマ「Simplicity2」のタイトル下(記事上)にあるアイキャッチ画像が記事幅(カラム幅)と同じになった話です。 以前に使った小さいサイズのアイキャッチ画像が大きくならなず、基本的な事かも知れないですが、どうやっても上手くいかなかった事に四苦八苦した話です。

Simplicity2では、投稿の編集で設定したアイキャッチ画像を記事上に表示させる時は、カスタマイザーからチェッするだけで凄く簡単な作業なんですが、問題はここからです。

Simplicity2のアイキャッチ画像に使う画像幅が、記事幅(カラム幅)より小さい場合、左寄せだろうが中央寄せだろうが、余白が出来るんですよね。

記事幅(カラム幅)一杯にアイキャッチ画像を広げたいのに出来ないんです。なんで?(毎度ながら)こうなると検索するしかない!

スポンサーリンク

「Simplicity」「アイキャッチ画像」で検索、検索。

ざっと調べてみても、参考にしているのは本家のこの記事。

同じ様に、幅の上限を記事幅(カラム幅)の680pxにしているんだけど、上手くいかないのよね。なんでだろうか?

実際に、本家の記事を引用しているブログも記事上のアイキャッチ画像には余白が残っているのもある。

そもそも、アイキャッチ画像の設定が悪いのか?

スマホで見ると、問題なく記事幅(カラム幅)で表示されるのですが、PCで見ると余白が出来てしまう。

なんで?加齢のせいで分からない?(>_<)馬鹿なの?

SimplicityとSimplicity2では違う設定なのか?

色々な記事を徘徊してると、気付いた事があった。カスタマイザーを比べてみると、

Simplicityでは、

アイキャッチを自動設定

本文に最初に出てくる画像を利用してアイキャッチを自動設定するか。

Simplicit2では、

本文先頭にアイキャッチ画像を表示

投稿・固定ページ管理画面で設定したアイキャッチを自動で本文トップに挿入するか。

ん?どういう事?違うのか?

でも、記事別に手動で設定しているので、問題はないはずなんやけど、これは関係が無さそう。

アイキャッチ画像の幅に問題がある?

長い事、分からずにいましたが、ふと思った事があります。

アイキャッチ画像には、フリー画像をダウンロード出来るサイトや自分で撮った写真などを利用している訳ですが、画像のデータ容量が小さい方を選ぶ以外に、記事幅(カラム幅)より小さい種類を選んでいました。

自動で大きく幅合わせをしてくれるのかな?って勝手に思ってた。でも、駄目。

ここに、ヒントがありそうな気がするけど、かなり難しい。

.article img,
.category-description img,
.wp-caption,
.hover-image{
 max-width:100%;
 height:auto;
}

width:100%;とすれば大丈夫そうなんだけど、余計な画像に影響が出てしまう。

今は忘れておこう。

アイキャッチ画像の幅と記事幅(カラム幅)に関係がある?

そこで、乏しい知識の中で思いついた事は、

  • 逆に記事幅<アイキャッチ画像幅としておけば、自動で小さくトリミングなど幅合わせをしてくれるということなのか?
  • 逆に、予め幅を合わせた画像を用意しておく必要があるのか?

今さら、過去のアイキャッチ画像を差し替える事も大変過ぎるじゃないか!どうにかならないかを色々と試した結果、

どうやら、カラム幅<アイキャッチ画像幅なら、大丈夫そう。間違ってるのか正解なのか分からないけど、どちらでも大丈夫そう。

最初から、偶然に上の通りにしていたら、悩む必要も無かったと思うと情けない。実はまだ気付いてない事があるのかも知れない。

最終的なアイキャッチ画像の自己設定

今回は残念というか情けない結果になってしまったけど、過去のアイキャッチ画像は、ボチボチ差し替えする事にしよう。

既に、現在利用中のテーマ「Simplicity」の幅の上限である680pxに合わせて、手動で好みの位置でトリミングしたアイキャッチ画像もあるけど、ここで、ちょっと整理を。

  1. メディア設定の幅の上限が記事幅(カラム幅)の680px以上である事を確認する。
  2. 幅が680px以上のアイキャッチ画像の中央部を、決めた任意のサイズで自動トリミングで統一させる。

ただし、テーマによっては、記事幅(カラム幅)も様々なので、大きめにしてる方がいいのかな?

【functions.php】に任意のアイキャッチ画像サイズを追記

メディア設定を設定したので、幅が680px以上あれば問題なく記事幅(カラム幅)で表示されるのだろうけど、使用するアイキャッチ画像のサイズによって、高さがバラバラになる事も不細工なので、どうせなら任意のサイズで切り取る様に設定してみたい。

そこで、子テーマfunctions.phpを編集してサムネイルサイズを追加する事にした。一行追加するだけなのに、過去に編集で苦い経験があるから超ドキドキする。あの悪夢が蘇る。

例えば、幅680px以上にしたいから、

add_image_size('thumb800', 800, 450, true);

として、今のSimplicityの場合、使用したアイキャッチ画像の中央部を、800×450でトリミングして欲しいので、上の様に設定しました。(縦横比16:9で幅680以上の設定のつもり)

なんとか画面が白くなる事もなく無事に出来たみたい。

でも、切取り位置がそこじゃない!って思う時は手動しかないのか。

【entry-eye-catch.php】で選択する画像サイズに変更

次に、子テーマentry-eye-catch.phpを編集。

<figure class="eye-catch">
 <?php
 //the_post_thumbnail('large');
 //アイキャッチの表示
 the_post_thumbnail();

を下の様にしました。

<figure class="eye-catch">
 <?php
 //the_post_thumbnail('thumb800');
 //アイキャッチの表示
 the_post_thumbnail('thumb800');

これで思い通り?になってる感じ。PCで確認すると、今の記事幅(カラム幅)に収まってくれた。

もうこれでヨシとしよう。

記事上のアイキャッチ画像の設定

ここまできて気付いた事がある。

画像をアップロードするメディア設定は、デフォルトのままで良かったのだ。

今回の様に、記事上のアイキャッチ画像を任意のサイズに固定するなら、functions.phpentry-eye-catch.phpの設定だけで良かった。

おまけに、記事上のアイキャッチ画像サイズを設定しないなら、大きめのサイズの画像を用意して、アイキャッチ画像を設定するだけで、何も考える必要が無かったって話だった。

さいごに

Simplicityなら、680px以上の画像を使っていれば気付く事もなかった事だけど、最初から理解していれば悩む必要も無かったけど、アイキャッチ画像も横長(16:9)で固定して切り取れる様になったので良かった。

記事幅(カラム幅)が余程広いテーマを使わなければ、画像をアップロードするメディア設定は、1024pxのままで対応出来るって事です。

この辺の話は、本当は考える必要が無い話なんでしょうね。いい経験になりました。相変わらず基本が分からないから、時間だけが過ぎていく。

また何かを思い出すキッカケに残しておこう。