WORDPRESS

AFFINGER6「記事のアイキャッチ画像」の貼り方&カスタマイズ設定方法【ワードプレスブログ「完全初心者」ガイド】

AFFINGER6「記事のアイキャッチ画像」の貼り方&カスタマイズ設定方法【ワードプレスブログ「完全初心者」ガイド】
 

専業ブロガー5年目のあずきです🐥

 

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

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

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

 

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

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

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

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

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

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

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

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

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

 

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

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

▼ ACTION AFFINGER6の「購入・導入手順」はこちらから ▼

【2022年12月】AFFINGER6の購入・導入手順を1から徹底解説。子テーマまで【ワードプレスブログ「完全初心者」ガイド】

AFFINGER6の購入・導入手順を1から徹底解説。子テーマまで【ワードプレスブログ「完全初心者」ガイド】
【2022年12月】AFFINGER6の購入・導入手順を1から徹底解説。子テーマまで【ワードプレスブログ「完全初心者」ガイド】

続きを見る

  • 「ACTION AFFINGER6」が実際に使用できるようになるまでの ”一連の手順” を、
    画像付きでまるっと解説しています
  • 作業そのものは、正味【15分程度】でおわります(子テーマまで含めて)

インフォトップ ワードプレステーマ売上

公式:ACTION AFFINGER6

すごいもくじLITE

の限定特典キャンペーンも実施中!!!

※2021年発表Infotop Affidemy

AFFINGER6「記事のアイキャッチ画像」の貼り方&カスタマイズ設定方法【ワードプレスブログ「完全初心者」ガイド】

 

注意

ご紹介する内容は、いずれもWordPressの編集エディタが…

クラシックエディタ

の前提となります。「グーテンベルグ」をお使いの方はご了承ください

 

「クラシックエディタとグーテンベルグってなに…?」という場合や、「クラシックエディタに切り替える方法(一瞬です!)」はこちらをどうぞ ↓ ※重要です

WordPressクラシックエディタ・グーテンベルグとは?Classic Editorの導入方法【ワードプレスブログ「完全初心者」ガイド/第4章/No.6】
WordPressクラシックエディタ・グーテンベルグとは?Classic Editorの導入方法【ワードプレスブログ「完全初心者」ガイド/第4章/No.6】

続きを見る

 

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

WordPress ヘッダー c-01

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

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

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

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

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

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

関連

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

AFFINGER6「画像」の貼り方&カスタマイズ、代替テキスト(alt属性)の設定方法【ワードプレスブログ「完全初心者」ガイド】
AFFINGER6「画像」の貼り方&カスタマイズ、代替テキスト(alt属性)の設定方法【ワードプレスブログ「完全初心者」ガイド】

続きを見る

※アイキャッチ画像に限らず、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」ボタンを忘れずにクリックして、アイキャッチ画像のカスタマイズは完了です🐥

 

人気記事

 

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

「全8章」の総合TOPページです

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

 

あずき猫 - Azuki Cat

猫です。独立5年目の専業ブロガー / アパレル歴10年 / Twitterでは、ブログに限らず「色々うまくいかへん…」「どないしよ…」というときのための、本質的な思考を発信しています。ニャー!!!

-WORDPRESS