

初心者ブロガーの私も、おしゃれなサイトを見ていて気になっていました。
今回はそんなヘッダーカードの設定方法を解説します!
ちなみに私が使っている「AFFINGER5」の場合の設定方法ですのでご了承ください。
ヘッダーカードとは?
トップページ、ヘッダー画像下の項目のことです。(下記画像参照)
ココがおすすめ
AFFINGER5のヘッダーカードはトップページの中でもかなり目立つ位置に表示できるため、見てもらいたい固定ページ・カテゴリがある方にはぴったりです。

AFFINGER5のヘッダーカードの設定手順
ダッシュボードの「AFFINGER5管理⇒おすすめ記事一覧⇒おすすめヘッダーカード」を開きます。
おすすめヘッダーカードには
step
1画像のURL:「アップロード」のボタンを押して、メディアから表示させたい画像を選択
step
2テキスト:画像の上に表示させたいテキストを入力
step
3リンク先URL:クリック後に移ってほしいページのURLを入力(固定ページやカテゴリなど)
を入力していきます。
入力が終わったら、「save」を押して完了です。
同じ要領でヘッダーカードは最大4つまで設定できます

ヘッダーカードの基本的なカスタマイズ方法
ヘッダーカードの基本的なカスタマイズは5つあります。
1.ヘッダーカードを個別記事上にも表示する(デフォルトはTOPページにのみ表示)
2.「PC」「スマホ・タブレット」それぞれに表示するか、しないか
3.ヘッダーカードの背景画像をぼかすor暗くするorそのまま
4.ヘッダーカード画像を角丸にする
5.スマホ閲覧時、ヘッダーカード画像の高さを倍にする
順番に設定するかどうか見ていきましょう。
1.ヘッダーカードを個別記事上にも表示する(デフォルトはTOPページにのみ表示)
ヘッダーカード設置手順と同様、
ダッシュボードの「AFFINGER5管理⇒おすすめ記事一覧⇒おすすめヘッダーカード」を開きます。
サイト全体に表示にする

2.「PC」「スマホ・タブレット」それぞれに表示するか、しないか
ヘッダーカードの表示の出し分けができます。
両方ともチェックしなければ、ヘッダーカードは表示されません。

3.ヘッダーカードの背景画像をぼかすor暗くするorそのまま
「デザイン」という項目で、ヘッダーカード画像の表示パターンを3つから選ぶことができます。
1. テキストのある背景画像をぼかす 2.テキストのある背景画像を暗くする 3.デフォルト
4.ヘッダーカード画像を角丸にする
同じく「デザイン」の項目で選べます。
チェックを入れると、ヘッダーカード画像の角を丸く設定できます。
やわらかい表示のサイトにしたい方にはオススメです。
5.スマホ閲覧時、ヘッダーカード画像の高さを倍にする
同じく、「デザイン」の項目で選べます。

ヘッダーカードのカスタマイズ設定が完了したら「save」を押して完了です。
<カスタマイズ>ヘッダーカードの文字色を変更する方法
ヘッダーカードは初期設定で文字色が白に設定されています。
サイトカラーに合わせて色を変更したい場合の設定方法についてご説明します。
CSSを編集するので、念のため編集前にはバックアップを取っておきましょう
「ダッシュボード⇒外観⇒カスタマイズ⇒追加CSS」を開き「追加CSS」の中に以下のCSコードを貼り付けます。
.st-cardlink-card.has-bg.is-darkable.st-cardlink-card-text{
z-index: 2;
color:〇〇〇;
}
〇〇〇の部分に好きな色を入れます。
- gray:グレー
- brown:ブラウン
- silver:シルバー
- blue:ブルー
- yellow:イエロー
- red:レッド
- green:グリーン
など
ヘッダーカード画像のサイズ
当ブログでは、「290×120」の画像を使っています。
画像適切サイズはまだ私も分かっていないので、他のサイト運営者の記事も参考にしてみてください!
(「1200×630」がオススメという記事は見たことがありますが、なぜそのサイズがいいのかの理由が載っていませんでした)
まとめ
ぜひこの記事を参考にヘッダーカードを設定し、おしゃれなブログを目指しましょう!

コメント