あずきです🐥
当ブログでも愛用中の人気WordPressテーマ「ACTION AFFINGER6」における…
「アイキャッチ画像」の貼り方とカスタマイズ方法
について、ブログ初心者さん向けに１からわかりやすく解説していきます
まずブログにおける「アイキャッチ画像」とは、記事ごとの冒頭エリアに表示される…
↓（カスタマイズ後の一例）
こうした「見出し画像」のこと
ちなみにこの「アイキャッチ画像」として設定した画像は、各記事ページの冒頭に「見出し画像」として表示されるだけでなく…
↑ このように、記事一覧エリアなどの「サムネイル画像」としても自動で反映されます
そんなACTION AFFINGER6における「アイキャッチ画像」について、２つのステップで丁寧に解説していきます
- アイキャッチ画像の設定方法
- アイキャッチ画像のカスタマイズ方法
2020年1月から毎日コツコツ作ってきたワードプレス初心者ガイド、
・役に立ちました！
・わかりやすかったです！みたいな大変ありがたいお言葉を頂けるケースが最近増えてきたので、改めて載せておきますhttps://t.co/QJohn2MGlF
— あずき@ブロガー (@azuki_rinrin) July 13, 2020
Contents
AFFINGER6「記事のアイキャッチ画像」を設定するやり方とカスタマイズ方法を初心者向けに解説【ACTION／WordPressブログ】
補足
ご紹介する内容は、いずれも「クラシックエディタ」の前提となります。「グーテンベルグ」をお使いの方はご了承ください
「そもそもクラシックエディタとグーテンベルグってなに…？」という場合はこちらをどうぞ ↓（重要です）
-
【2021年】WordPressのクラシックエディタとグーテンベルグとは？プラグイン「Classic Editor」の導入方法まで1から解説
続きを見る
ステップ１：ACTION AFFINGER6における、アイキャッチ画像の設定方法
WordPressにおける投稿（もしくは固定ページ）の編集画面から、右側の列に表示されている…
↑「アイキャッチ画像を設定」というボタンをクリックして、任意の画像ファイルを…
↑ WordPressにアップロードします
関連
「画像のアップロード手順がわからない…」という場合や「代替テキストってなに？」という場合は、こちらをどうぞ ↓（重要です）
-
AFFINGER6「画像ファイル」の貼り方とカスタマイズ方法を初心者向けに解説。代替テキスト(alt属性)を設定しよう【ACTION／WordPressブログ】
続きを見る
※アイキャッチ画像に限らず、WordPressに各種画像をアップロードする際の共通手順です
ただし、これだけだとプレビュー画面で確認してみても…
↑ アイキャッチ画像がまだ表示されていません
で、選択した画像を「アイキャッチ画像」としても表示させるには、最初にクリックした…
アイキャッチ画像を設定
というボタンの「すぐ下側」に表示されている…
↑「設定に関わらずアイキャッチ挿入」というボタンをクリックすればOK
これで改めてプレビューを確認してみると、記事の冒頭エリアに…
↑ アイキャッチ画像が無事表示されました
つづいて、アイキャッチ画像の表示設定を【カスタマイズ】する方法について見ていきましょう🐥
ステップ２：ACTION AFFINGER6における、アイキャッチ画像のカスタマイズ方法
まずは、WordPress管理画面の左側一覧から…
AFFINGER 管理
を開き、さらにそのなかの左側一覧から…
投稿・固定記事
というタブを開きます
「投稿・固定記事」タブを開いたら、そのなかに…
↑「アイキャッチ設定」というエリアがあるので、こちらを見ていきましょう
まず…
↑「アイキャッチ画像の表示を全ての記事で有効化する」という項目ですが、こちらにチェックを入れることで、【ステップ１】でご紹介した…
- 設定に関わらずアイキャッチ挿入
という項目に「記事ごと」でわざわざチェックを入れなくても、各記事のアイキャッチ画像を…
「サムネイル画像」としてだけでなく、「アイキャッチ画像」としても表示できる
ようになります
ただしこの設定は「すべての記事」に反映されるので、例えば記事ごとのアイキャッチ画像を…
「アイキャッチ画像」としては非表示にして、「サムネイル画像」としてだけ表示させたい記事がある
という場合は、実質使えません
つづいてその下の…
- アイキャッチのキャプションをクレジットとして写真上に表示する
という項目についてですが、まずここで言う「キャプション」とは…
アイキャッチ画像と一緒に、小さい文字で表示される説明文
のことで、また「クレジット」とは…
アイキャッチ画像として使用している素材の、著作権者などを示す表記
を指します
つまり、「クレジット表記」の必要がある画像を使用している場合はチェックを入れる形ですね
関連
画像の「キャプション」を設定する方法については、こちらをどうぞ ↓
-
AFFINGER6「画像ファイル」の貼り方とカスタマイズ方法を初心者向けに解説。代替テキスト(alt属性)を設定しよう【ACTION／WordPressブログ】
続きを見る
そして３つ目の…
↑「アイキャッチ画像をタイトル下表示に変更する」という項目ですが、こちらにチェックを入れることで…
↑ このように、「記事タイトル」と「アイキャッチ画像」の位置を逆転させられます
関連
記事タイトルを「中央揃え」に変更するやり方については、こちらから ↓
-
AFFINGER6「記事タイトル＆見出し」の色・デザイン・フォントサイズ設定をカスタマイズする方法を初心者向けに解説【ACTION／WordPressブログ】
続きを見る
また、その下に表示されている…
↑ こちらの…
- 何もしない
- ワイド化する
- ポラロイド風にする
という項目については、まず「アイキャッチ画像をタイトル下表示に変更する」にチェックを入れて「Save」ボタンをクリックすることで、選択できるようになる形です
例として、「ポラロイド風にする」を選んでみると…
↑ このようなデザインに変更されます
ちなみに「ワイド化する」を選ぶと、アイキャッチ画像を記事コンテンツの横幅の上限を超えて「ワイド表示」できるようになります
ということで…
一通り設定できたら、画面右上の「Save」ボタンを忘れずにクリックして、アイキャッチ画像のカスタマイズは完了です🐥
あわせてどうぞ
今回の記事はこちらの章に属しています
次の章はこちらからどうぞ
全９章のTOPページです
2020年1月から毎日コツコツ作ってきたワードプレス初心者ガイド、
・役に立ちました！
・わかりやすかったです！みたいな大変ありがたいお言葉を頂けるケースが最近増えてきたので、改めて載せておきますhttps://t.co/QJohn2MGlF
— あずき@ブロガー (@azuki_rinrin) July 13, 2020