AFFINGER5

AFFINGER5でアイキャッチ画像を設定するカンタンな方法

AFFINGER5でアイキャッチ画像を設定するカンタンな方法をご紹介

AFFINGER5(アフィンガー5)を使い始めの人によくある悩みとして

アイキャッチ画像を設定する方法が分からない
一覧ページでアイキャッチ画像を表示させる方法がわからない

などが挙げられます。

そこで今回は以下のテーマについてご紹介します。

記事のテーマ

AFFINGER5(アフィンガー5)を使って

  • アイキャッチを設定する方法
  • アイキャッチ画像を自動で表示させる方法
  • サムネイルの設定方法
  • アイキャッチをキレイに表示させるための工夫

当サイトではウェブサイトやブログに関する記事を毎日投稿しています。
他の記事も合わせて読んでいただけると嬉しいです。

\今なら当サイト限定の豪華特典付き/

AFFINGER5の詳細を見る

AFFINGER5(アフィンガー5)でアイキャッチ画像を設定する方法

AFFINGER5(アフィンガー5)でアイキャッチ画像を設定する方法

まずは記事ページや固定ページでAFFINGER5でアイキャッチ画像を設定する方法をご紹介します。

この設定方法は記事ページでも固定ページでも同じ方法を使います。

まずWordPressの管理画面から「新規追加」ページに移動しましょう。
*「投稿」からでも「固定ページ」からでも構いません。

アイキャッチ画像項目

すると右側のサイドバーの下の方「アイキャッチ画像」という項目がありますので「アイキャッチ画像を設定」という文字をクリックしましょう。

画像アップロード画面

するとメディアライブラリの一覧が表示されます。
*上画面は私のメディアライブラリです。

アイキャッチに設定したい画像を選択して、右下のボタンを押せば反映されます。

新しい画像をアップロードしたい時は左上のタブを「ファイルをアップロード」に切り替えてあげればアップロードが出来ます。

これでアイキャッチの設定は完了です。

公開・更新ボタンを押して設定を反映させましょう。

AFFINGER5(アフィンガー5)でアイキャッチ画像を表示させる方法

AFFINGER5(アフィンガー5)でアイキャッチ画像を表示させる方法

アイキャッチ画像が表示されない?

上の項目のようにアイキャッチを設定しても画像が表示されないことがあります。

これはAFFINGER5の初期設定に問題があります。

この問題を治すには、WordPressの管理画面からアイキャッチの設定を変更しましょう。

AFFINGER5でアイキャッチ画像を表示させる方法

AFFNGER5管理

まずはWordPress管理画面から「AFFINGER5管理」→「AFFINGER5管理」→「投稿・固定記事」→「アイキャッチ設定」へ移動します。

アイキャッチ設定

すると「アイキャッチ設定」の項目に移動します。

アイキャッチ画像を記事に表示するには一番上のボックス
「アイキャッチ画像の表示をすべての記事で有効化する(デフォルトは上部)」にチェックを入れましょう。

アイキャッチをタイトルの上に表示したい方はこれで設定完了です。

一方でアイキャッチ画像をタイトルの下に表示したい方は3つ目のボックスにもチェックを入れましょう。

アイキャッチ画像の表示形式

次に横に3つ並んだチェックボックス(何もしない・ワイド化する・ポラロイド風にする)について説明します。

ここではアイキャッチ画像の表示形式を選択できます。

なし

なし

ワイド化

ワイド化

ポラロイド風

ポラロイド風

「なし」と「ワイド化」は違いが分かりにくいですが、ワイド化では画像の横幅が長くなります

それぞれお好みで設定しましょう。

設定が完了したら「save」ボタンを押して変更を保存しましょう。

AFFINGER5(アフィンガー5)でサムネイル画像を設定する方法

AFFINGER5(アフィンガー5)でサムネイル画像を設定する方法

アイキャッチを設定していない記事を一覧ページで見ると下のような灰色の画像が表示されます。

デフォルト画像

アイキャッチが設定されていないとはいえ、これでは殺風景ですよね。

AFFINGER5では、このデフォルトのサムネイルについても変更ができます

デフォルトのサムネイルを設定する方法

サムネイル設定

まずはWordPress管理画面から「AFFINGER5管理」→「AFFINGER5管理」→「デザイン」→「サムネイル画像設定」へ移動します。

サムネイル設定

すると上画面のように「サムネイル画像設定」項目に移動します。

下の方にアップロードボタンがあるのでサムネイルに設定したい画像をアップロードしましょう。

またこの項目ではサムネイルの形状、表示形式、位置も設定できますのでそれぞれオリジナルでカスタマイズしてみましょう。

アイキャッチ画像をキレイに表示するコツ

アイキャッチ画像をキレイに表示するコツ

最後にAFFINGER5に関わらず、WordPressブログでアイキャッチ画像をきれいに表示させるコツについてご紹介します。

アイキャッチ画像で意識したいこと

アイキャッチはその記事の情報を伝える大事な要素のひとつです。

その上で以下のことを意識しなければなりません。

アイキャッチ画像で意識したいこと

  • 画像から記事の概要が伝わってくる
  • (サムネイルの形に合わせて)正方形であること

アイキャッチはサムネイルになると正方形で表示されます。

そのため横長や縦長の画像を設定すると余計な部分がはみ出してしまいます

ですからアイキャッチ画像は正方形に収めることをオススメします。

アイキャッチ画像にはstories by Freepikがおすすめ

そこでオススメなのがフリー画像サイトstories by Freepikです。

stories by Freepikはこんな人にオススメです。

こんな人にオススメ!

  • 自分で画像を編集する余裕がない!
  • 無料でオシャレなイラストを使いたい!

stories by Freepikの最大の特徴は色をカスタマイズできることです。

stories by Freepik

上の画面のように自分でイラストの色をカスタマイズできるので種類は無限大です!

注意ポイント

stories by Freepikを利用する際はサイト内のどこかにライセンス表記をしなければならないので注意しましょう。

stories by Freepik公式サイト→

画像加工ならCanvaがおすすめ

アイキャッチ画像を加工して作成したい方にはCanvaがおすすめです。

Canvaは誰でもカンタンに無料でオシャレな画像を作成できるツールです。

詳しい使い方についてはこちらの記事をご覧ください。

Canvaを使って超カンタンにアイキャッチ画像を作る方法
Canvaを使ってカンタンにアイキャッチ画像を作る方法

続きを見る

まとめ:AFFINGER5でアイキャッチ画像を設定するカンタンな方法をご紹介

まとめ:AFFINGER5でアイキャッチ画像を設定するカンタンな方法をご紹介

まとめ:AFFINGER5でアイキャッチ画像を設定するカンタンな方法をご紹介

  • AFFINGER5ではアイキャッチ画像の設定がカンタンにできる!
  • アイキャッチ画像の素材で迷ったらstories by Freepikがオススメ!

今回はAFFINGER5(アフィンガー5)でのアイキャッチ画像設定について解説しました。

これからサイトを立ち上げたい!ブログを始めたい!といった方の助けになれたらなと思います。

わからない部分がある方はお問合せフォームで質問して貰えばすぐに返信します。

今サイトではこれからもウェブサイト運営に関する有益な情報をたくさん発信していきたいと思っていますので応援よろしくお願いします!

AFFINGER5のカスタマイズ方法のまとめはこちら

AFFINGER5(アフィンガー5)のカスタマイズ方法まとめ
AFFINGER5(アフィンガー5)のカスタマイズ方法まとめ

続きを見る

\今なら当サイト限定の豪華特典付き/

AFFINGER5の詳細を見る

AFFINGER5関連の記事はこちら

All in One SEO Packの導入手順
AFFINGER5を使ってみた感想【良かった点と悪かった点】

続きを見る

AFFINGER5(アフィンガー5)でオシャレな目次を作成する方法
AFFINGER5(アフィンガー5)でオシャレな目次を作成する方法

続きを見る

AFFINGER5(アフィンガー5)でお問い合わせフォームを簡単に設置する方法
AFFINGER5(アフィンガー5)でお問い合わせフォームを設置する簡単な方法

続きを見る

AFFINGER5で内部・外部リンクのブログカードを作る方法
AFFINGER5で内部・外部リンクのブログカードを作る方法

続きを見る

AFFINGER5(アフィンガー5)に関する記事一覧はこちら→

▼最新映画や漫画が無料で見れちゃう▼
▼最新ドラマや漫画が無料で見れちゃう▼

-AFFINGER5

Copyright © wagtechblog All Rights Reserved.