初心者ブロガーの私も、おしゃれなサイトを見ていて気になっていました。
今回はそんなヘッダーカードの設定方法を解説します！
ちなみに私が使っている「AFFINGER5」の場合の設定方法ですのでご了承ください。
ヘッダーカードとは？
トップページ、ヘッダー画像下の項目のことです。（下記画像参照）
ココがおすすめ
AFFINGER5のヘッダーカードはトップページの中でもかなり目立つ位置に表示できるため、見てもらいたい固定ページ・カテゴリがある方にはぴったりです。
AFFINGER5のヘッダーカードの設定手順
ダッシュボードの「AFFINGER5管理⇒おすすめ記事一覧⇒おすすめヘッダーカード」を開きます。
おすすめヘッダーカードには
step
1画像のURL：「アップロード」のボタンを押して、メディアから表示させたい画像を選択
step
2テキスト：画像の上に表示させたいテキストを入力
step
3リンク先URL：クリック後に移ってほしいページのURLを入力（固定ページやカテゴリなど）
を入力していきます。
入力が終わったら、「save」を押して完了です。
同じ要領でヘッダーカードは最大４つまで設定できます
ヘッダーカードの基本的なカスタマイズ方法
ヘッダーカードの基本的なカスタマイズは５つあります。
１.ヘッダーカードを個別記事上にも表示する（デフォルトはTOPページにのみ表示）
２.「PC」「スマホ・タブレット」それぞれに表示するか、しないか
３.ヘッダーカードの背景画像をぼかすor暗くするorそのまま
４.ヘッダーカード画像を角丸にする
５.スマホ閲覧時、ヘッダーカード画像の高さを倍にする
順番に設定するかどうか見ていきましょう。
1.ヘッダーカードを個別記事上にも表示する（デフォルトはTOPページにのみ表示）
ヘッダーカード設置手順と同様、
ダッシュボードの「AFFINGER5管理⇒おすすめ記事一覧⇒おすすめヘッダーカード」を開きます。
サイト全体に表示にする
2.「PC」「スマホ・タブレット」それぞれに表示するか、しないか
ヘッダーカードの表示の出し分けができます。
両方ともチェックしなければ、ヘッダーカードは表示されません。
3.ヘッダーカードの背景画像をぼかすor暗くするorそのまま
「デザイン」という項目で、ヘッダーカード画像の表示パターンを３つから選ぶことができます。
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」がオススメという記事は見たことがありますが、なぜそのサイズがいいのかの理由が載っていませんでした）
まとめ
ぜひこの記事を参考にヘッダーカードを設定し、おしゃれなブログを目指しましょう！
コメント