【お洒落】AFFINGER5「ヘッダーカード」の作り方とカスタマイズ方法【WordPressブログ】

あずきです🐥

このブログでも愛用中のWordPressテーマ「WING（AFFINGER5）」における…

ヘッダーカード

の基本的な作り方について、ブログ初心者さん向けに1から解説していきます

まず「ヘッダーカード」とは、ブログのヘッダーエリアで見かける…

↑ こういったデザインのこと（PCの場合の一例です）

テキストリンクや画像リンクなどと同様に、クリックするとあらかじめ指定したURLページにアクセスできる仕様です

ブログ全体の見映えも華やかになる！

で、「WING（AFFINGER5）」の場合、このヘッダーカードを…

最大4枚まで設置できる
もちろん、カード内に任意のタイトルも指定できる
画像の表示パターンや、PC・スマホにおける表示・非表示の指定
個別記事ページのヘッダーにも表示させるかどうかの指定

このように、細かいカスタマイズ付きで設定できるようになってます

設定方法も超簡単です

ということで、今回は…

AFFINGER5における、「ヘッダーカード」の作り方
作成したヘッダーカードの基本的なカスタマイズ方法

この2点にわけて解説していきます

さっそく見ていきましょー🐥

＼　当ブログで愛用しています　／

検証と改善を重ねた唯一無二のテーマ

ACTION AFFINGER6

今ならワードプレスプラグイン
「すごいもくじLITE」
の限定特典配布キャンペーンも実施中！！！

公式：「稼ぐ」に特化したワードプレステーマ『ACTION AFFINGER6』

ACTION AFFINGER6は新エディタ「グーテンベルグ」への対応が強化されましたが、「クラシックエディタ」も引き続き使用できます

今回の記事はこちらの章に属しています

　第６章　デザイン編　　　　　　　　　　

2020年1月から毎日コツコツ作ってきたワードプレス初心者ガイド、
・役に立ちました！
・わかりやすかったです！
みたいな大変ありがたいお言葉を頂けるケースが最近増えてきたので、改めて載せておきますhttps://t.co/QJohn2MGlF
— あずき@ブロガー (@azuki_rinrin) July 13, 2020

Contents

AFFINGER5における「ヘッダーカード」の作り方
AFFINGER5における「ヘッダーカード」の基本的なカスタマイズ方法

AFFINGER5における「ヘッダーカード」の作り方

まずは、WordPress管理画面から…

↑「AFFINGER5 管理」をクリックし、つづいて左側のメニュー一覧から…

↑「おすすめ記事一覧」タブをクリックします

「おすすめ記事一覧」の画面が開いたら…

↑ こちらの「おすすめヘッダーカード」という項目を見ます

「ヘッダーカード1」～「ヘッダーカード4」までの4ブロックにわかれているので、「ヘッダーカード1」の欄から順に設定していきましょう

↑「アップロード」ボタンをクリックして、ヘッダーカードに使用する「画像」を選択しましょう

つづいて…

↑ ヘッダーカード上に表示させる任意の「テキスト」を入力します

入力したら、今度は…

↑ そのヘッダーカードのリンク先となる任意のURLを入力しましょう

ここまでできたら、あとは画面下部の「save」をクリックして保存すればOKです

同じ流れで、最大4枚までヘッダーカードを設定しよう！

一通り設定できたら、プレビューを見てみましょう

↑ こんな感じになりました

基本的な作り方については、これで以上となります

ここから、ヘッダーカードの「表示パターンや表示・非表示などのカスタマイズ」について見ていきましょう🐥

AFFINGER5における「ヘッダーカード」の基本的なカスタマイズ方法

「WING（AFFINGER5）」におけるヘッダーカードの基本的なカスタマイズは、次の4つになります

ヘッダーカードを個別記事にも表示させる（デフォルトはTOPページのみ表示）
「PC」「スマホ＆タブレット」それぞれにおける、ヘッダーカードの表示・非表示を指定
ヘッダーカードの画像表示のパターンを指定（3タイプ）
スマホのみ、ヘッダーカードの画像表示の高さを倍にする

1つ目のパートと同様に…

WordPress管理画面　＞　AFFINGER5 管理　＞　「おすすめ記事一覧」タブ

から、「おすすめカード」の欄で設定していきます

順に見ていきますね🐣

「ヘッダーカード」を個別記事にも表示させる（デフォルトはTOPページのみ表示）

↑「サイト全体に表示する」という項目で…

チェックON　→　TOPページだけでなく、個別記事のヘッダーにもヘッダーカードを表示させる
チェックOFF　→　個別記事のヘッダーには表示させない（TOPページのみ表示）

という指定ができます

参考までに、このブログでは「チェックON」にしてます

「PC」「スマホ＆タブレット」それぞれにおける、ヘッダーカードの表示・非表示を指定

↑「ヘッダーカード1」～「ヘッダーカード4」までの各設定欄で…

PC
スマホ・タブレット

それぞれに表示させるかどうかの指定ができます

参考までに、このブログでは両方とも「チェックOFF」つまり「表示あり」の設定してます

ヘッダーカードの画像表示のパターンを指定（3タイプ）

↑「デザイン」という項目で、ヘッダーカードの画像表示のパターンを「3タイプ」から指定できます

↑「デフォルト」の一例です

↑「テキストのある背景画像をぼかす」の一例です

↑「テキストのある背景画像を暗くする」の一例です

参考までに、このブログでは「テキストのある背景画像をぼかす」に設定してます

スマホのみ、ヘッダーカードの画像表示の高さを倍にする

↑ 同じく「デザイン」という項目の、「スマホ閲覧時のおすすめヘッダーカードの高さを倍に」という項目で…

スマホのみ、ヘッダーカードの画像表示の高さを倍にするかどうか

を指定できます

↑ チェックOFFの一例です（通常の高さ）

↑ チェックONの一例です（高さ2倍）

参考までに、このブログでは「チェックOFF」つまり通常の高さに設定してます

おしまい♪

あずき🐥

＼　当ブログで愛用しています　／

検証と改善を重ねた唯一無二のテーマ

ACTION AFFINGER6

　　　✔　洗練されたビジュアルと、ターゲットに合わせた「変幻自在」な柔軟性！

　　　✔　時間のかかる面倒なカスタマイズも「クリック１つ」でさくさく実現！

　　　✔　本気で戦うためのSEO対策と、「稼ぐ」に特化したアフィリエイト機能！