こんにちは。ricoです。
今回はワードプレステーマ「AFFINGER5（アフィンガー5）WING」のヘッダーカードの作り方を紹介していきます。
ヘッダーカードは下記の画像の部分です。
当ブログで行っているヘッダーカードカスタマイズ方法についても説明していきます。
初心者の方でも簡単にできる設定なので安心して下さいね。
contents
AFFINGER5ヘッダーカードの作り方
まずAFFINGER5のヘッダーカードの基本的な作り方を説明していきます。
まずWordPress管理画面を開きます。
「AFFINGER5 管理」→「おすすめ記事一覧」をクリックします。
「おすすめヘッダーカード」が表示されます。
「ヘッダーカード１」～「ヘッダーカード４」まで表示されるので、「ヘッダーカード１」から設定していきます。
設定する項目は４つです。
ヘッダーカード：画像のURL
まずヘッダーカードに表示させたい画像を挿入します。
「アップロード」をクリックしてメディアから画像を選択して下さい。
画僧を選択すると自動的にURLが入力されます。
ヘッダーカード：テキスト
次にヘッダーカードに表示させたいテキストを入力します。
写真のみでテキストがいらなければ空白でもOKです。
ヘッダーカード：リンク先URL
ヘッダーカードのリンク先となるURLを入力します。
カテゴリページか個別記事のURLを入力する方が多いです。
ヘッダーカード：PC・モバイルの表示
「PCに表示しない」「スマホ・タブレッドに表示しない」は表示させたくなければチェックを入れて下さい。
PC、スマホ・タブレッドどちらも表示させる場合は空白のままでOKです。
ヘッダーカード：枚数の設定
ヘッダーカードは１～４枚まで設置することができます。
表示させたい枚数分の「ヘッダーカード１」～「ヘッダーカード４」を同じように設定していきましょう。
最後に画面下部の「save」をクリックして保存すれば完成です。
AFFINGER5ヘッダーカードのカスタマイズ方法
次にAFFINGER5ヘッダーカードのカスタマイズ方法を説明していきます。
・ヘッダーカードをサイト全体に表示
・ヘッダーカードの画像表示デザイン
・スマホ閲覧時ヘッダーカードの画像表示の高さ
１つずつ説明していきます。
ヘッダーカードをサイト全体に表示
ヘッダーカードはデフォルトの設定では、TOPページしか表示されません。
TOPページだけでなく、カテゴリーページや個別記事にもヘッダーカードを表示させたい場合はチェックを入れましょう。
参考までに、当サイトはチェックは入れてません。
ヘッダーカードの画像表示デザイン
デザインの項目で、ヘッダーカードの画像表示を３つから選択することができます。
・デフォルト
・テキストのある背景画像をぼかす
・テキストのある背景画像を暗くする
３つの中からお好きなデザインを選択して下さい。
デフォルトよりも、「テキストのある背景画像をぼかす」か「テキストのある背景画像を暗くする」を選択すると文字が見やすくなります。
スマホ閲覧時ヘッダーカードの画像表示の高さ
デザインの項目で、スマホ閲覧時にヘッダーカードの画像表示の高さを倍に設定することができます。
・チェックなし（デフォルトの高さ）
・チェック有り（２倍の高さ）
お好みの方を選択して下さい。
参考までに、当サイトはチェックなしのデフォルトの高さです。
AFFINGER5ヘッダーカードの当サイトのカスタマイズ
最後に当サイトのヘッダーカードのカスタマイズ方法を紹介していきます。
ヘッダーカードに枠をつけたり、文字のフォントや色を変えたかったのでカスタマイズしました。
HTMLやCSSがわからなくても大丈夫です。
当サイトのヘッダーカード
下記の画像が当サイトのヘッダーカードになります。
設定は下記の画像の通りです。
画像編集ソフトで画像を作成
当サイトでは「Photo editor」で画像を作成しています。
Photo editorは無料で使用できる画像編集ソフトです。
今回デザインした内容です。
・画像サイズ：1200✕400
・テキスト入力
・背景色つける
・枠をつける
・初心者マークのイラストを挿入
・保存形式：JPEG
Photo editorで作成した画像を、AFFINGER5のヘッダーカードの画像に挿入しただけです。
画像サイズを「1200✕400」で作成しているため、スマホ閲覧時にヘッダーカードの画像表示の高さを倍に設定にできないので注意して下さい。
Photo editor以外の画像編集ソフトでも大丈夫です。
画像編集ソフトでお好みのヘッダーカードを作成してみて下さい。
AFFINGER5ヘッダーカードで差別化しよう
今回はAFFINGER5のヘッダーカードの作り方を紹介しました。
画像編集ソフトで作成してから、ヘッダーカードに挿入すると他のサイトと差別化することができます。
HTMLやCSSがわからなくても簡単にデザインができるので作成してみて下さいね。
-
【初心者こそアフィンガー5】実際に使ったレビューとデメリットを公開
続きを見る
-
【完全版】ブログ初心者が月１万円稼ぐ方法【５ステップで解説】
続きを見る