Diverの記事一覧のアイキャッチ画像設定|初心者向けマニュアル
Diverの記事一覧のアイキャッチ画像設定|初心者向けマニュアル
Diverの記事一覧のアイキャッチ画像は、サイズを変更したり、ホバーアクションを設定することができます。

今回は、Diverの記事一覧のアイキャッチ画像設定について解説したいと思います。

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

WordPressのダッシュボード左メニューから、『外観カスタマイズ』という順にクリックします。

『外観→カスタマイズ』という順にクリックして進む

『外観→カスタマイズ』という順にクリックして進む

Diverのカスタマイズページが開きます。

リストのアイキャッチ画像サイズを設定する

記事一覧のレイアウトを「リスト」「グリッド」にする場合、記事一覧に表示するアイキャッチ画像のサイズを設定ことができます。

記事一覧レイアウトの変更方法は、下記の記事をご参照ください。

カスタマイズページ左メニューの『サイズ設定』をクリックしましょう。

『サイズ設定』をクリック

『サイズ設定』をクリック

サイズ設定画面が開きます。
この中の「記事一覧画像の高さ(リスト)」と「記事一覧画像の高さ(グリッド)」の項目で、アイキャッチ画像のサイズを調整しましょう。

記事一覧画像の高さ(リスト)

記事一覧画像の高さ(リスト)

記事一覧画像の高さ(リスト)

記事一覧画像の高さ(グリッド)

記事一覧画像の高さ(グリッド)

記事一覧画像の高さ(グリッド)

ホバーアクションを設定する

ホバーアクションとは、画像などにマウスを乗せたときの動きのことです。
Diverでは、アイキャッチ画像にカーソルを合わせたときのホバーアクションを設定できるようになっています。

カスタマイズページ左メニューの『デザイン設定①』をクリックしましょう。

『デザイン設定①』をクリック

『デザイン設定①』をクリック

デザイン設定①の設定画面が開きます。
この中の「記事一覧サムネイル」の項目でホバーアクションを設定しましょう。

ホバーアクションは下記の6パターンから選べます。

  • なし
  • ズーム
  • ぼかし
  • グレイスケール
  • セピア
  • 透過

1つずつ動きを試しながら好きなものを選択してください。

アイキャッチ画像を非表示にする

記事一覧のアイキャッチ画像は非表示にすることもできます。

カスタマイズページ左メニューの『デザイン設定①』をクリックしましょう。

『デザイン設定①』をクリック

『デザイン設定①』をクリック

デザイン設定①の設定画面が開きます。
この中の『サイト全体のサムネイルを非表示にする』のチェックボックスにチェックを入れると、アイキャッチ画像が表示されなくなります。

『サイト全体のサムネイルを非表示にする』のチェックボックス

『サイト全体のサムネイルを非表示にする』のチェックボックス

まとめ

今回は、Diverの記事一覧のアイキャッチ画像設定について解説しました。

アイキャッチ画像のサイズやホバーアクションの設定は、サイトの見やすさを向上したり、おしゃれさを演出する上でも重要になってくるので、ぜひこだわって設定してみてください。

スポンサーリンク

スポンサーリンク

アンケート実施中

テーマニアの内容をさらに充実させるため
アンケートを実施中です。

ご協力お願いいたします。

おすすめの記事