AFFINGER6のカスタマイズ！今回はアイキャッチ画像に関しての記事です。アイキャッチ画像を記事の上に表示する方法について解説します(デフォルトでは記事上にアイキャッチは表示されません)。
AFFINGER6ではアイキャッチの表示パターンは２種類あります。１、「一般的なアイキャッチ表現」と２、"記事ごとのヘッダーデザイン"(タイトルの背景として表示するアイキャッチ表現)です。どちらか好きな方を選らぶことができます！サンプルはこちら！
「一般的なアイキャッチ表現」
ごくごく一般的なアイキャッチです。初期状態では画像が横にワイドに広がっています。文字入りのアイキャッチはこちらがおすすめ！
"記事ごとのヘッダーデザイン"
もう一つのパターンがこちら。タイトルの背景にアイキャッチ画像が背景として表示されます。画像もダークなエフェクトがかかっていい感じです。文字が入っていない画像のみのアイキャッチはこちらがおすすめ！
アイキキャッチとは？
投稿ページを一枚の画像で表したもの。そのページの象徴。本でいうところの表紙。SNSで記事を宣伝するときや記事一覧のサムネイルに使用される。
パターン１「一般的なアイキャッチ」の設定方法
これらの設定はアイキャッチ画像が設定された前提です。
アイキャッチを記事上に表示させる
初期状態ではアイキャッチは表示されない
AFFINGERではデフォルトではアイキャッチは投稿ページに表示されません。みんながやっているように投稿ページの上にアイキャッチを出すには設定をオンにする必要があります。
設定場所は全ての記事でアイキャッチを有効化するか記事ごとに有効化するかで違います。
全ての記事で有効化する
全ての記事でアイキャッチを表示する場合はこちら。
ページ中部にある"アイキャッチ設定"という項目を見つけてください。「アイキャッチ画像の表示を全ての記事で有効化する（デフォルトは上部）」にチェックを入れましょう。これで全ての記事でアイキャッチが表示されるようになりました。
個別の記事ごとに有効化する
アイキャッチを記事ごとに有効化したい人はこちら。
アイキャッチを表示したい記事の編集画面に行きます。画面の右側。投稿パネルの下の方に"アイキャッチ関連"という項目があるのを見つけてください。"設定に関わらずアイキャッチ挿入"にチェックを入れます。これでその記事の先頭にアイキャッチが表示されます。
たまに設定が効かないときもあります。そのときは新規記事に移し替えたりして対応しています。
アイキャッチが表示された！
アイキャッチのデザインを調整(オプション)
デフォルトではアイキャッチはタイトルの上にワイド(メインエリアいっぱい)に表示されていますが、このデザインを変更できます。設定場所は引き続きこちらです。
"「アイキャッチ画像をタイトル下表示に変更する」"にチェックを入れるとアイキャッチとタイトルの場所が入れ替わります。ワイドから普通のサイズに戻ります。
アイキャッチをタイトルの下に移動！(画像はワイドではなくなる)
さらに、"ワイド化"や"ポラロイド風にする"にチェックを入れるとそれぞれのデザインになります。
ワイド化！
ポラロイド風！
アイキャッチに説明文やURLを挿れる(オプション)
猫の説明文を挿れてみた！
このようにアイキャッチの隅に説明文やURLを載せることができます。"説明文"は地名の名前とかデバイスの機種とか補足するときに便利ですね。サンプル画像では猫の紹介をしました。URLはフリー画像を使うときにURLの併記を求められるのでここに入力するといいです。
設定はこちらです。(手順１で「全体一括有効化」や「個別有効化」、どちらを選んでも共通の設定です。)
"アイキャッチのキャプションをクレジットとして写真上に表示する"にチェックします。
説明文やURLを入力する場所はここです。実際にここに記入していきましょう。
説明文を挿れてみる
まず説明文を挿れてみます。表示したい文字をそのまま入力するだけです。
URLを挿れてみる
今度はURLを挿れてみます。ご覧のようにフリー画像サービスでは画像にURLを併記するよう求められることがあります。<a>タグをコピーして貼り付けるように指示されるのでコピーしましょう。画像はFreepikの例
コピーした<a>タグはそのまま先ほどの場所に貼り付けます。<a>タグのままで大丈夫です。するとこのようにリンク形式で表示されます。
公式マニュアル
パターン２「記事ごとのヘッダーデザイン」の設定方法
タイトルの後ろにアイキャッチ画像がワイドに広がる(＋暗くなる)！
ここでは"記事ごとのヘッダーデザイン"の設定方法について解説します。
これらの設定はアイキャッチ画像が設定された前提です。
すべての記事に適用する場合
全ての記事にこのデザインを適応する場合はこちらです。
"その他"という項目の下に"「記事ごとのヘッダーデザイン」一括表示"という項目があるのでここにチェックを入れます。そして"Save"を押せば設定完了です。
個別の記事に適用する場合(確認中)
私のデバイスで利用が確認できませんでした。確認できしだい追記します。
「このページだけ！」という場合。個別の投稿ページに適応する場合はこちらです。
投稿ページの編集画面。下の方にあるカスタムフィールドに「記事ごとのヘッダーデザイン」という項目があります。ここで設定できます。
公式マニュアル
記事を見ていただきありがとうございました。もし参考になったら記事のツイートにいいね！していただけると嬉しいです！フォローもぜひお願いします！