WORDPRESS

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

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

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

 

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

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

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

 

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

 

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

 

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

 

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

 

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

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

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

 

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

 

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

 

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

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

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

ACTION AFFINGER6の購入&導入方法を初心者向けに1から解説。子テーマの有効化手順まで【WordPressブログ】

AFFINGER6の購入&導入方法を初心者向けに1から解説。子テーマの有効化手順まで
ACTION AFFINGER6の購入&導入方法を初心者向けに1から解説。子テーマの有効化手順まで【WordPressブログ】

続きを見る

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

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

第1位

公式:ACTION AFFINGER6

すごいもくじLITE

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

※2020年度Infotop売上及びInfotop Affidemy

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

 

補足

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

 

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

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

続きを見る

 

ステップ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章 収益化 編           

全8章のTOPページです

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

\ 「なぜ売れないか?」を徹底解析 /

AFFINGERタグ管理マネージャー

結果が見えるサイト運営に

AFFINGERタグ管理マネージャー4 + PVモニター

 

   ✔ よく使うテキストや画像、広告リンクを「テンプレート化」して使い回せる!

   ✔ 元データの更新だけで全記事に「一括反映」されるため、広告の差替えも一瞬!

   ✔ 広告の「クリック回数」「クリックされたページ」などを自動計測!

AffiliateRun~なぜ売れないか?

PDFマニュアル付き!

 

公式:「AFFINGERタグ管理マネージャー4 + PVモニター」プラグインセット

関連:WordPressにおける広告リンクの貼り方を「3つのパターン」で1から解説【 ”タグ管理” が最強におすすめ】

WordPressにおける広告リンクの貼り方
WordPressにおける広告リンクの貼り方を「3つのパターン」で1から解説【 ”タグ管理” が最強におすすめ】

続きを見る

※当プラグインの使用には、別売のWordPressテーマ「ACTION AFFINGER6」最新版が必要です

About me

あずきアイコン main-01 背景透過

suzu azuki
あずき鈴々

 

独立5年目の専業ブロガー / 元アパレル → 歴10年

 

20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます。 普段はTwitter(@azuki_rinrin)にいるので覗いてもらえると嬉しいです^^

-WORDPRESS