wordpress

【wordpress】アイキャッチ画像のサイズを変更して、サムネイル画像で使う

概要

アイキャッチ画像をサムネイル画像で使用する時に、
サイズを変更して使用するやり方のご紹介です。

画像左側:アイキャッチ画像
画像右側:サムネイル画像

まず、今回の論点が分かり易くなるように
私のアイキャッチ画像とサムネイル画像を比較するところから始めます。

アイキャッチ画像

アイキャッチ画像は横に細長いサイズ(324×120)を使用しています。

サムネイル画像

一転、サムネイル画像は普通のサイズに見えるかと思います。
アイキャッチ画像と比較すると左右の部分(黒の余白)が削れています。

私含め、「縮小表示だけだと見辛くなってしまう」方向け
アイキャッチ画像のサイズを変更して、サムネイル画像で使用するやり方を説明していきます。

 

サイズの変更方法

今回は、wordpressの追加CSSを記述する方法で調整します。
追加するプロパティはこちらの2種になります。

height 要素の高さの指定
px(ピクセル値)で指定します。
object-fit 画像要素のはめ込み方式の指定
(画像のトリミング表示に使用されることが多いです)指定する値は『cover』
画像要素をボックスサイズに合わせて縦横比を維持しながらリサイズ、
トリミングしてはめ込みます。

 

実践その1 デベロッパーツールで変更内容の調整

もともとのサムネイル画像はこんな感じです。

横幅も含めてサムネイル画像用にリサイズされてしまうので、
画像が小さくて見にくいですね^^;

では早速実践していきましょう。

chromeブラウザで「F12」を押下
すると、右側にこのような画面が表示されると思います。

これがデベロッパーツールです。

続けて、左上のマウスカーソルと□がセットになったアイコンをクリックします。

この状態で画面内の要素をクリックすると、その要素の情報が見れる状態となります。
(結構よく使うので、試していろいろ触ってみるのも面白いかと思います)

そうしたら、サムネイル画像をクリックします。

すると画像のような画面が表示されます。
これは、サムネイル画像に現在設定されているCSSの内容となります。

上部黒字『.new-entry .eyecatch img』が要素
赤字部分が、プロパティとなります。

このプロパティ部分に先ほど説明したCSSを追記していきます。

青枠で囲った箇所が、今回追記したCSSの内容になります。
(変更した値は画面に即時反映されるので、ここでサイズを調整します)

調整が終わったらいよいよ、wordpressの追加CSSへ記載していきます。

 

実践その2 追加CSSの記載

CSSには、以下のような形式で記載します。
要素 { プロパティ }

今回の場合だと、こうなります。
.new-entry .eyecatch img {
height: 60px;
object-fit: cover;
}

実際に記載していきましょう。

追加CSSを開いて

記載して『公開』ボタン押下

完成です!!

COMMENT

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