記事一覧を美しくしたいのさ

記事一覧に画像を掲載したい時、自分でアップロードしたアイキャッチ画像なら、予めサムネイルサイズを設定してあるので、記事一覧でもサイズが統一されてとてもすっきりキレイに整って見えます。
しかし、記事の一番最初の画像をアイキャッチとして利用する場合、自サーバにアップロードした画像を使えば問題ないですが、画像の直リンクの様な方法だとサイズの統一感が失われます。統一して表示するにも何やらやらねばならないことがあるようです。
画像の直リンクは、多々問題が起こる場合がありますので、許可の無い画像の直リンクにはご注意ください。

楽してアイキャッチを表示させ、しかもきれいにサイズを揃えたい

私がやりたかったのは、
①記事の一番目の画像をアイキャッチとして一覧に表示する。
②アフィリエイト先が提供する商品画像リンクのソースを記事に取り入れた時に、①の機能でアイキャッチとして一覧に表示させる。
③その際、必ずしも画像サイズと縦横比率がが同じとは限らないため、自動的にトリミングして一覧表示させる。
ソース改変や難しいことなどせず、コピー・ペースト・投稿と普通にやればOKなやり方。



Photoshopなどを使って画像をリサイズして統一させれば簡単ですが、面倒です。
そんな時に、CSSで任意の比率とサイズにトリミングできると楽ですね。
とても難しい記述が必要そうで、プログラムに疎い私には到底無理と尻込みしてしまいそうです。

たった一行で済むですと!?

色々、調べて行くと②を実現するにはたった1行記述すればよいと言うことが分かりました。それが、「object-fit」というプロパティーです。画像の縦横比を保ちつつトリミングしてくれます。
例えば、下記の様に設定すると正方形ではない画像を無理矢理に指定のサイズに変形させます。結果的に歪んだ画像になります。
imgはご自分のテーマにより異なります。

img {
width: 250px;
height: 250px;
}

このCSSに、一行追加します。

img {
width: 250px;
height: 250px;
object-fit: cover; /* この一行を追加 */
}

すると、画像の中心から指定のサイズにトリミングしてくれます。

img {
width: 200px;
height: 133px;
object-fit: cover; /* この一行を追加 */
}

他の、サイズに合わせることもできる。この例だと、大多数が200の133なのに時々200の145みたいなはみ出したサイズがある。って時に、指定のサイズでトリミングするわけです。ただし、coverは中心を基準にトリミングします。いろいろな方法があるようで、画像付きで解説したいところ、管理人は入院中に記事を書いている関係で、より詳しい情報を提供されている下記サイトをご参照ください。

1行追加でOK!CSSだけで画像をトリミングできる「object-fit」プロパティー

ちなみに、私がこの小技を組み込んだのが下記のサイトです。

アフィリエイト規約に触れようが無い

アフィリエイトの規約で、提供された画像はソースを貼ることで表示させます。一切の改変もNGです。
しかし、これではトップの一覧にno imageや代替画像ばかりが並んでしまいます。やはり、トップに華やかに商品画像が並んでいた方が素敵です。
簡単な方法として、リンク画像をダウンロードして自分のサーバにアップロードすれば自由度は高まりますが、これが規約違反となってしまいます。
そこで考えたのが、記事の一番最初の画像をアイキャッチに使うという考え方でした。
正直に言うと、いちいちアイキャッチ設定したり面倒じゃないですか。
これなら、正規のリンクタグを貼るだけで、wordpressが処理してくれるのです。直リンクするのではなく、改変するわけでも無い、自サーバにアップロードするのでもない。規約に触れない処理方法だと考えたのです。
あくまでも独自の見解です。規約に抵触するなどの問題が出てくるかもしれません。引用される方は、自己責任で納得の上ご活用ください。

ただひとつ問題が、アフィリエイト提携先が必ずしも大きくてきれいな商品画像を使っているとは限らないことです。中には、中途半端な商品画像もあります。工夫してみてください。

すいません。もう一つ問題が。
アフィリエイトサイトの中に、広告表示用のタグの配列で、ダミー画像でアクセスやデータ分析をしていることがある。1pxの画像タグの後に商品画像のタグが記述されている場合、最初の画像をアイキャッチ&サムネイルとするため正常に表示されない。これが、タグの不正改変になるのか判断できないが、商品画像と1pxタグの順番を入れ替える必要がある。この部分は自己責任となる。

追記:プラグインが必要だった。

ここまで記事を書いていて、一つ大事な事を忘れていた。
この記事の一番目の画像をアイキャッチとしてサムネイルの代用として活用するにはプラグいんを使うのが簡単。
私が使っているのは「Nelio External Featured Image (discontinued)」特に設定をすることもない。
本当なら「Auto Post Thumbnail」と言うプラグインが有名なのだが、新バージョンでは有料にしなければ機能しなくなった。
旧バージョンを提供している方がいて、ダウンロードして使っていたが、すぐにアップデートの指示が出て、うっかり更新してしまうので、面倒臭いので、「Nelio External Featured Image (discontinued)」に変更してそのまま使っている。