専業ブロガー５年目のあずきです🐥
当ブログでも愛用中の人気WordPressテーマ「ACTION AFFINGER6」における…
「アイキャッチ画像」の貼り方とカスタマイズ方法
について、ブログ初心者さん向けに１からわかりやすく解説していきます
まずブログにおける「アイキャッチ画像」とは、記事ごとの冒頭エリアに表示される…
↓（カスタマイズ後の一例）
こうした「見出し画像」のこと
ちなみにこの「アイキャッチ画像」として設定した画像は、各記事ページの冒頭に「見出し画像」として表示されるだけでなく…
↑ このように、記事一覧エリアなどの「サムネイル画像」としても自動で反映されます
そんなACTION AFFINGER6における「アイキャッチ画像」について、２つのステップで丁寧に解説していきます
- アイキャッチ画像の設定方法
- アイキャッチ画像のカスタマイズ方法
▼ ACTION AFFINGER6の「購入・導入手順」はこちらから ▼
ACTION AFFINGER6の購入＆導入方法を初心者向けに１から解説。「子テーマ」のインストール＆有効化手順まで
-
ACTION AFFINGER6の購入＆導入方法を初心者向けに１から解説。「子テーマ」のインストール＆有効化手順まで
続きを見る
- 「ACTION AFFINGER6」が実際に使用できるようになるまでの ”一連の手順” を、
画像付きでまるっと解説しています - 作業そのものは、正味【15分程度】でおわります（子テーマまで含めて）
Contents
AFFINGER6「記事のアイキャッチ画像」を設定するやり方とカスタマイズ方法を初心者向けに解説【ACTION／WordPressブログ】
補足
ご紹介する内容は、いずれも「クラシックエディタ」の前提となります。「グーテンベルグ」をお使いの方はご了承ください
「そもそもクラシックエディタとグーテンベルグってなに…？」という場合はこちらをどうぞ ↓（重要です）
-
WordPressクラシックエディタとグーテンベルグとは？初心者向けに１から解説【プラグイン「Classic Editor」の導入方法まで】
続きを見る
ステップ１：ACTION AFFINGER6における、アイキャッチ画像の設定方法
WordPressにおける投稿（もしくは固定ページ）の編集画面から、右側の列に表示されている…
↑「アイキャッチ画像を設定」というボタンをクリックして、任意の画像ファイルを…
↑ WordPressにアップロードします
関連
「画像のアップロード手順がわからない…」という場合や「代替テキストってなに？」という場合は、こちらをどうぞ ↓（重要です）
-
AFFINGER6「画像ファイル」の貼り方とカスタマイズ方法を初心者向けに解説。代替テキスト(alt属性)を設定しよう【ACTION／WordPressブログ】
続きを見る
※アイキャッチ画像に限らず、WordPressに各種画像をアップロードする際の共通手順です
ただし、これだけだとプレビュー画面で確認してみても…
↑ アイキャッチ画像がまだ表示されていません
で、選択した画像を「アイキャッチ画像」としても表示させるには、最初にクリックした…
アイキャッチ画像を設定
というボタンの「すぐ下側」に表示されている…
↑「設定に関わらずアイキャッチ挿入」というボタンをクリックすればOK
これで改めてプレビューを確認してみると、記事の冒頭エリアに…
↑ アイキャッチ画像が無事表示されました
つづいて、アイキャッチ画像の表示設定を【カスタマイズ】する方法について見ていきましょう🐥
＼ 「なぜ売れないか？」を徹底解析 ／
結果が見えるサイト運営に
AffiliateRun～なぜ売れないか？
PDFマニュアル付き！
公式：「AFFINGERタグ管理マネージャー4 + PVモニター」プラグインセット
関連：WordPressにおける広告リンクの貼り方を「３つのパターン」で１から解説【 ”タグ管理” が最強におすすめ】
-
WordPressにおける広告リンクの貼り方を「３つのパターン」で１から解説【 ”タグ管理” が最強におすすめ】
続きを見る
※別売りのWordPressテーマ「ACTION AFFINGER6」最新版が必要です
ステップ２：ACTION AFFINGER6における、アイキャッチ画像のカスタマイズ方法
まずは、WordPress管理画面の左側一覧から…
AFFINGER 管理
を開き、さらにそのなかの左側一覧から…
投稿・固定記事
というタブを開きます
「投稿・固定記事」タブを開いたら、そのなかに…
↑「アイキャッチ設定」というエリアがあるので、こちらを見ていきましょう
まず…
↑「アイキャッチ画像の表示を全ての記事で有効化する」という項目ですが、こちらにチェックを入れることで、【ステップ１】でご紹介した…
- 設定に関わらずアイキャッチ挿入
という項目に「記事ごと」でわざわざチェックを入れなくても、各記事のアイキャッチ画像を…
「サムネイル画像」としてだけでなく、「アイキャッチ画像」としても表示できる
ようになります
ただしこの設定は「すべての記事」に反映されるので、例えば記事ごとのアイキャッチ画像を…
「アイキャッチ画像」としては非表示にして、「サムネイル画像」としてだけ表示させたい記事がある
という場合は、実質使えません
つづいてその下の…
- アイキャッチのキャプションをクレジットとして写真上に表示する
という項目についてですが、まずここで言う「キャプション」とは…
アイキャッチ画像と一緒に、小さい文字で表示される説明文
のことで、また「クレジット」とは…
アイキャッチ画像として使用している素材の、著作権者などを示す表記
を指します
つまり、「クレジット表記」の必要がある画像を使用している場合はチェックを入れる形ですね
関連
画像の「キャプション」を設定する方法については、こちらの記事内で解説しています ↓
-
AFFINGER6「画像ファイル」の貼り方とカスタマイズ方法を初心者向けに解説。代替テキスト(alt属性)を設定しよう【ACTION／WordPressブログ】
続きを見る
そして３つ目の…
↑「アイキャッチ画像をタイトル下表示に変更する」という項目ですが、こちらにチェックを入れることで…
↑ このように、「記事タイトル」と「アイキャッチ画像」の位置を逆転させられます
関連
記事タイトルを「中央揃え」に変更するやり方については、こちらから ↓
-
AFFINGER6「記事タイトル＆見出し」の色・デザイン・フォントサイズ設定をカスタマイズする方法を初心者向けに解説【ACTION／WordPressブログ】
続きを見る
また、その下に表示されている…
↑ こちらの…
- 何もしない
- ワイド化する
- ポラロイド風にする
という項目については、まず「アイキャッチ画像をタイトル下表示に変更する」にチェックを入れて「Save」ボタンをクリックすることで、選択できるようになる形です
例として、「ポラロイド風にする」を選んでみると…
↑ このようなデザインに変更されます
ちなみに「ワイド化する」を選ぶと、アイキャッチ画像を記事コンテンツの横幅の上限を超えて「ワイド表示」できるようになります
ということで…
一通り設定できたら、画面右上の「Save」ボタンを忘れずにクリックして、アイキャッチ画像のカスタマイズは完了です🐥
人気記事
あずきのワードプレスブログ「完全初心者」ガイド！
”全８章” の総合TOPページです
＼ 「なぜ売れないか？」を徹底解析 ／
結果が見えるサイト運営に
✔ よく使用する文章や画像、広告リンクを「テンプレート化」して使い回せる！
✔ 元データの更新だけで全記事に「一括反映」されるため、広告の差替えも一瞬！
✔ 広告の「クリック回数」や「クリックされたページ」などを自動計測！
AffiliateRun～なぜ売れないか？
PDFマニュアル付き！
公式：「AFFINGERタグ管理マネージャー4 + PVモニター」プラグインセット
関連：WordPressにおける広告リンクの貼り方を「３つのパターン」で１から解説【 ”タグ管理” が最強におすすめ】
-
WordPressにおける広告リンクの貼り方を「３つのパターン」で１から解説【 ”タグ管理” が最強におすすめ】
続きを見る
※当プラグインの使用には、別売のWordPressテーマ「ACTION AFFINGER6」最新版が必要です
About me
suzu azuki
あずき鈴々
独立5年目の専業ブロガー / 元アパレル → 歴10年
20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます。 普段はTwitter（@azuki_rinrin）にいるので覗いてもらえると嬉しいです^^