WORDPRESS

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

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

専業ブロガー6年目のあずき猫です

 

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

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

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

 

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

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

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

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

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

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

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

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

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

 

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

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

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

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

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

続きを見る

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

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

公式:ACTION AFFINGER6

すごいもくじLITE

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

※2021年発表Infotop Affidemy

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

 

注意

ご紹介する内容は、いずれも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にアップロードします

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

なお画像素材についてはご自身でもちろん用意していただく形になりますが、参考までに当ブログでは、有料の高品質な画像素材サイトとして定番な「Shutterstock」というサービスを愛用しています(以前までは、「Unsplash」という無料で人気の画像素材サービスを主に使っていました)

 

関連

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

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

続きを見る

※アイキャッチ画像に限らず、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

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

\ 当ブログで愛用してます /

ACTION AFFINGER6 バナー 01-300px

 

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

ACTION AFFINGER6

すごいもくじLITE

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

 

公式:ACTION AFFINGER6

関連:WordPressテーマ選びのチェック項目5つ+超重要な「核心」1つ【失敗しない本当におすすめなテーマの選び方】

※2021年発表Infotop Affidemy

当サイトでは、このサイト経由で商品やサービスを購入・契約していただくことで当サイトに紹介料が入る【アフィリエイトリンク】を使用しております

これは私(あずき猫)にとってのサイト運営というものが「1つの事業」であり、必要経費はもちろんのこと、それ以上に「膨大な時間やエネルギー」を費やしているためですが、ただ惜しむらくは当該システムを使用していることによる読者様にとってのメリットは特段ないという点です

せめてもの思いとして、こうして得られた紹介料を糧に「読者様のお役に立てる記事作り」「価値のあるコンテンツ制作」に一層努めていく所存ですので、何卒ご理解のほどお願い申し上げます

当サイトでは可能な限り正確な情報を掲載するよう努めておりますが、必ずしもその正確性を保証するものではありません

読者様におかれましては、当サイトをあくまでも主観的な情報の1つとして捉えていただき、「客観的、俯瞰的な視点」をもって活用していただければ幸いです

少しでも参考になりましたら、
\ シェアしていただけると励みになります!! /

-WORDPRESS