投稿ページ

アイキャッチの設定方法:【一般的なアイキャッチ表現】と【記事ごとのヘッダーデザイン】

2021年2月1日

AFFINGER6のカスタマイズ!今回はアイキャッチ画像に関しての記事です。アイキャッチ画像を記事の上に表示する方法について解説します(デフォルトでは記事上にアイキャッチは表示されません)。

AFFINGER6ではアイキャッチの表示パターンは2種類あります。1、「一般的なアイキャッチ表現」と2、"記事ごとのヘッダーデザイン"(タイトルの背景として表示するアイキャッチ表現)です。どちらか好きな方を選らぶことができます!サンプルはこちら!

「一般的なアイキャッチ表現」

「一般的なアイキャッチ」デフォルト状態

ごくごく一般的なアイキャッチです。初期状態では画像が横にワイドに広がっています。文字入りのアイキャッチはこちらがおすすめ!

「一般的なアイキャッチ表現」の設定方法はこちら

"記事ごとのヘッダーデザイン"

"記事ごとのヘッダーデザイン"

もう一つのパターンがこちら。タイトルの背景にアイキャッチ画像が背景として表示されます。画像もダークなエフェクトがかかっていい感じです。文字が入っていない画像のみのアイキャッチはこちらがおすすめ!

"記事ごとのヘッダーデザイン"の設定方法はこちら

アイキキャッチとは?

投稿ページを一枚の画像で表したもの。そのページの象徴。本でいうところの表紙。SNSで記事を宣伝するときや記事一覧のサムネイルに使用される。

パターン1「一般的なアイキャッチ」の設定方法

これらの設定はアイキャッチ画像が設定された前提です。

アイキャッチを記事上に表示させる

初期状態ではアイキャッチは表示されない

AFFINGERでは投稿ページでアイキャッチ画像は表示されません

AFFINGERではデフォルトではアイキャッチは投稿ページに表示されません。みんながやっているように投稿ページの上にアイキャッチを出すには設定をオンにする必要があります。

設定場所は全ての記事でアイキャッチを有効化するか記事ごとに有効化するかで違います。

全ての記事で有効化する

全ての記事でアイキャッチを表示する場合はこちら。

【ダッシュボード】→【AFFINGER管理】 → 【投稿・固定記事】> "アイキャッチ設定"

ページ中部にある"アイキャッチ設定"という項目を見つけてください。「アイキャッチ画像の表示を全ての記事で有効化する(デフォルトは上部)」にチェックを入れましょう。これで全ての記事でアイキャッチが表示されるようになりました。

アイキャッチ設定画面:アイキャッチ画像の表示を全ての記事で有効化する(デフォルトは上部)

個別の記事ごとに有効化する

アイキャッチを記事ごとに有効化したい人はこちら。

アイキャッチを個別の記事ごとに有効化する

アイキャッチを表示したい記事の編集画面に行きます。画面の右側。投稿パネルの下の方に"アイキャッチ関連"という項目があるのを見つけてください。"設定に関わらずアイキャッチ挿入"にチェックを入れます。これでその記事の先頭にアイキャッチが表示されます。

たまに設定が効かないときもあります。そのときは新規記事に移し替えたりして対応しています。

アイキャッチが表示された!

「一般的なアイキャッチ」が表示された

アイキャッチのデザインを調整(オプション)

デフォルトではアイキャッチはタイトルの上ワイド(メインエリアいっぱい)に表示されていますが、このデザインを変更できます。設定場所は引き続きこちらです。

【ダッシュボード】→【AFFINGER管理】 → 【投稿・固定記事】> "アイキャッチ設定"

アイキャッチ設定画面:アイキャッチ画像をタイトル下表示に変更する+デザインを変更する

"「アイキャッチ画像をタイトル下表示に変更する」"にチェックを入れるとアイキャッチとタイトルの場所が入れ替わります。ワイドから普通のサイズに戻ります。

アイキャッチをタイトルの下に移動!(画像はワイドではなくなる)

アイキャッチ画像をタイトルの下に表示した例

さらに、"ワイド化"や"ポラロイド風にする"にチェックを入れるとそれぞれのデザインになります。

ワイド化!

アイキャッチ画像をタイトルの下に表示してワイド化させた例

ポラロイド風!

アイキャッチ画像をタイトルの下に表示してポラロイド風にした例

アイキャッチに説明文やURLを挿れる(オプション)

猫の説明文を挿れてみた!

このようにアイキャッチの隅に説明文やURLを載せることができます。"説明文"は地名の名前とかデバイスの機種とか補足するときに便利ですね。サンプル画像では猫の紹介をしました。URLはフリー画像を使うときにURLの併記を求められるのでここに入力するといいです。

設定はこちらです。(手順1で「全体一括有効化」や「個別有効化」、どちらを選んでも共通の設定です。)

【ダッシュボード】→【AFFINGER管理】 → 【投稿・固定記事】> "アイキャッチ設定"

アイキャッチ設定画面:アイキャッチのキャプションをクレジットとして写真上に表示する

"アイキャッチのキャプションをクレジットとして写真上に表示する"にチェックします。

説明文やURLを入力する場所はここです。実際にここに記入していきましょう。

【記事編集画面】→【投稿パネル(画面右側)】 → 【アイキャッチ関連】> "任意のテキスト"

アイキャッチの隅に説明文やURLを挿れるときに入力する場所

説明文を挿れてみる

まず説明文を挿れてみます。表示したい文字をそのまま入力するだけです。

アイキャッチに説明文を挿れてみた例

URLを挿れてみる

今度はURLを挿れてみます。ご覧のようにフリー画像サービスでは画像にURLを併記するよう求められることがあります。<a>タグをコピーして貼り付けるように指示されるのでコピーしましょう。画像はFreepikの例

フリー画像サービスでURLの併記を求められる

コピーした<a>タグはそのまま先ほどの場所に貼り付けます。<a>タグのままで大丈夫です。するとこのようにリンク形式で表示されます。

アイキャッチにURLを挿れてみた例

"写真クレジットにサイトURLを使用"にチェックするとあなたのサイトのURLが表示されます。

"メディア設定"のキャプションからでも説明文やURLは設定できますがこの記事で紹介した設定場所の方が優先度が高そうなのでこちらを紹介しました。

公式マニュアル

パターン2「記事ごとのヘッダーデザイン」の設定方法

タイトルの後ろにアイキャッチ画像がワイドに広がる(+暗くなる)!

"記事ごとのヘッダーデザイン"サンプル

ここでは"記事ごとのヘッダーデザイン"の設定方法について解説します。

これらの設定はアイキャッチ画像が設定された前提です。

すべての記事に適用する場合

全ての記事にこのデザインを適応する場合はこちらです。

【ダッシュボード】→【AFFINGER管理】 → 【投稿・固定記事】> "その他"

アイキャッチ設定画面:「記事ごとのヘッダーデザイン」を全ての記事で有効化する

"その他"という項目の下に"「記事ごとのヘッダーデザイン」一括表示"という項目があるのでここにチェックを入れます。そして"Save"を押せば設定完了です。

カテゴリーのリンクの色はカテゴリーの編集ページで変えることができます。【投稿】→【カテゴリー】→【該当のカテゴリー編集】→"背景色"

個別の記事に適用する場合(確認中)

私のデバイスで利用が確認できませんでした。確認できしだい追記します。

「このページだけ!」という場合。個別の投稿ページに適応する場合はこちらです。

投稿ページの編集画面。下の方にあるカスタムフィールドに「記事ごとのヘッダーデザイン」という項目があります。ここで設定できます。

公式マニュアル

記事ごとのヘッダー作成機能(WINGマニュアル)※AFFINGERの購入者のみ閲覧可能


記事を見ていただきありがとうございました。もし参考になったら記事のツイートにいいね!していただけると嬉しいです!フォローもぜひお願いします!

"AFFINGER6のアイキャッチ設定方法"のツイートはこちら

-投稿ページ
-,