WORDPRESS

AFFINGER6「記事ごとのアイキャッチ画像」を設定するやり方とカスタマイズ方法を初心者向けに解説【ACTION/WordPressブログ】

AFFINGER6「記事のアイキャッチ画像」を設定するやり方とカスタマイズ方法
 

あずきです🐥

 

当ブログでも愛用中の人気WordPressテーマ「ACTION AFFINGER6」における…

「アイキャッチ画像」の貼り方とカスタマイズ方法

について、ブログ初心者さん向けに1からわかりやすく解説していきます

 

まずブログにおける「アイキャッチ画像」とは、記事ごとの冒頭エリアに表示される…

 

AFFINGER6「記事のアイキャッチ画像」を設定するやり方とカスタマイズ方法 top-01-a

 

↓(カスタマイズ後の一例)

 

AFFINGER6「記事のアイキャッチ画像」を設定するやり方とカスタマイズ方法 top-01-b

 

こうした「見出し画像」のこと

記事タイトルと並んで、その記事の「顔」になる重要な部分だよ!
 

ちなみにこの「アイキャッチ画像」として設定した画像は、各記事ページの冒頭に「見出し画像」として表示されるだけでなく…

 

AFFINGER6「記事のアイキャッチ画像」を設定するやり方とカスタマイズ方法 top-02

 

↑ このように、記事一覧エリアなどの「サムネイル画像」としても自動で反映されます

 

そんなACTION AFFINGER6における「アイキャッチ画像」について、2つのステップで丁寧に解説していきます

  1. アイキャッチ画像の設定方法
  2. アイキャッチ画像のカスタマイズ方法
さっそく見ていこー!
 

 

AFFINGER6「記事のアイキャッチ画像」を設定するやり方とカスタマイズ方法を初心者向けに解説【ACTION/WordPressブログ】

 

補足

ご紹介する内容は、いずれも「クラシックエディタ」の前提となります。「グーテンベルグ」をお使いの方はご了承ください

 

「そもそもクラシックエディタとグーテンベルグってなに…?」という場合はこちらをどうぞ ↓(重要です)

WordPressのクラシックエディタとグーテンベルグとは?プラグイン「Classic Editor」の導入方法まで
【2021年】WordPressのクラシックエディタとグーテンベルグとは?プラグイン「Classic Editor」の導入方法まで1から解説

続きを見る

 

ステップ1:ACTION AFFINGER6における、アイキャッチ画像の設定方法

WordPress ヘッダー c-01

 

WordPressにおける投稿(もしくは固定ページ)の編集画面から、右側の列に表示されている…

AFFINGER6「記事のアイキャッチ画像」を設定するやり方とカスタマイズ方法 1-1-01-a

↑「アイキャッチ画像を設定」というボタンをクリックして、任意の画像ファイルを…

AFFINGER6「記事のアイキャッチ画像」を設定するやり方とカスタマイズ方法 1-1-01-b

↑ WordPressにアップロードします

「代替テキスト」も忘れずに設定しておこう!
 

関連

「画像のアップロード手順がわからない…」という場合や「代替テキストってなに?」という場合は、こちらをどうぞ ↓(重要です)

AFFINGER6「画像ファイル」の貼り方とカスタマイズ方法
AFFINGER6「画像ファイル」の貼り方とカスタマイズ方法を初心者向けに解説。代替テキスト(alt属性)を設定しよう【ACTION/WordPressブログ】

続きを見る

※アイキャッチ画像に限らず、WordPressに各種画像をアップロードする際の共通手順です

 

ただし、これだけだとプレビュー画面で確認してみても…

AFFINGER6「記事のアイキャッチ画像」を設定するやり方とカスタマイズ方法 1-1-01-c

↑ アイキャッチ画像がまだ表示されていません

正確には、記事一覧エリアの「サムネイル画像」としては反映されてるけど、記事ページの「アイキャッチ画像」としては反映されてない状態だね!
 

で、選択した画像を「アイキャッチ画像」としても表示させるには、最初にクリックした…

アイキャッチ画像を設定

というボタンの「すぐ下側」に表示されている…

AFFINGER6「記事のアイキャッチ画像」を設定するやり方とカスタマイズ方法 1-1-02-a

↑「設定に関わらずアイキャッチ挿入」というボタンをクリックすればOK

 

これで改めてプレビューを確認してみると、記事の冒頭エリアに…

AFFINGER6「記事のアイキャッチ画像」を設定するやり方とカスタマイズ方法 1-1-02-b

↑ アイキャッチ画像が無事表示されました

 

つづいて、アイキャッチ画像の表示設定を【カスタマイズ】する方法について見ていきましょう🐥

 

ステップ2:ACTION AFFINGER6における、アイキャッチ画像のカスタマイズ方法

WordPress ヘッダー c-02

 

まずは、WordPress管理画面の左側一覧から…

AFFINGER 管理

を開き、さらにそのなかの左側一覧から…

投稿・固定記事

というタブを開きます

 

「投稿・固定記事」タブを開いたら、そのなかに…

AFFINGER6「記事のアイキャッチ画像」を設定するやり方とカスタマイズ方法 1-2-01

↑「アイキャッチ設定」というエリアがあるので、こちらを見ていきましょう

上から順に見ていくよ!
 

まず…

AFFINGER6「記事のアイキャッチ画像」を設定するやり方とカスタマイズ方法 1-2-02

↑「アイキャッチ画像の表示を全ての記事で有効化する」という項目ですが、こちらにチェックを入れることで、【ステップ1】でご紹介した…

  • 設定に関わらずアイキャッチ挿入

という項目に「記事ごと」でわざわざチェックを入れなくても、各記事のアイキャッチ画像を…

「サムネイル画像」としてだけでなく、「アイキャッチ画像」としても表示できる

ようになります

 

ただしこの設定は「すべての記事」に反映されるので、例えば記事ごとのアイキャッチ画像を…

「アイキャッチ画像」としては非表示にして、「サムネイル画像」としてだけ表示させたい記事がある

という場合は、実質使えません

参考までに、自分はこの項目は「チェックあり」にしてるよ!
 

つづいてその下の…

  • アイキャッチのキャプションをクレジットとして写真上に表示する

という項目についてですが、まずここで言う「キャプション」とは…

アイキャッチ画像と一緒に、小さい文字で表示される説明文

のことで、また「クレジット」とは…

アイキャッチ画像として使用している素材の、著作権者などを示す表記

を指します

 

つまり、「クレジット表記」の必要がある画像を使用している場合はチェックを入れる形ですね

参考までに、自分は基本「チェックなし」にしてるよ!
 
 

そして3つ目の…

AFFINGER6「記事のアイキャッチ画像」を設定するやり方とカスタマイズ方法 1-2-03-a

↑「アイキャッチ画像をタイトル下表示に変更する」という項目ですが、こちらにチェックを入れることで…

AFFINGER6「記事のアイキャッチ画像」を設定するやり方とカスタマイズ方法 1-2-03-b

↑ このように、「記事タイトル」と「アイキャッチ画像」の位置を逆転させられます

自分は「チェックあり」にしてるよ!
 
 

また、その下に表示されている…

AFFINGER6「記事のアイキャッチ画像」を設定するやり方とカスタマイズ方法 1-2-04-a

↑ こちらの…

  • 何もしない
  • ワイド化する
  • ポラロイド風にする

という項目については、まず「アイキャッチ画像をタイトル下表示に変更する」にチェックを入れて「Save」ボタンをクリックすることで、選択できるようになる形です

アイキャッチ画像の「表示デザイン」をカスタマイズできるよ!
 

例として、「ポラロイド風にする」を選んでみると…

AFFINGER6「記事のアイキャッチ画像」を設定するやり方とカスタマイズ方法 1-2-04-b

↑ このようなデザインに変更されます

 

ちなみに「ワイド化する」を選ぶと、アイキャッチ画像を記事コンテンツの横幅の上限を超えて「ワイド表示」できるようになります

参考までに、自分はデフォルトの「何もしない」にしてるよ!
 

ということで…

 

一通り設定できたら、画面右上の「Save」ボタンを忘れずにクリックして、アイキャッチ画像のカスタマイズは完了です🐥

 
 

今回の記事はこちらの章に属しています

 第7章 記事投稿 編          

次の章はこちらからどうぞ

 第8章 収益化 編           

全9章のTOPページです

あずきのワードプレスブログ「完全初心者」ガイド

 

-WORDPRESS