【AFFINGER5】ヘッダーカードの設定方法【経験談】

トップページの上にヘッダーカードを表示させたいけど、どうすればいいの?
私も思ってました!

初心者ブロガーの私も、おしゃれなサイトを見ていて気になっていました。

 

今回はそんなヘッダーカードの設定方法を解説します!

ちなみに私が使っている「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管理⇒おすすめ記事一覧⇒おすすめヘッダーカード」を開きます。

 

サイト全体に表示にする
チェックあり:TOPページ以外の記事ページにも表示
チェックなし:TOPページにのみヘッダーカードを表示

 

ちなみにZakuroBlogではチェックは入れてません

2.「PC」「スマホ・タブレット」それぞれに表示するか、しないか

 

ヘッダーカードの表示の出し分けができます。
両方ともチェックしなければ、ヘッダーカードは表示されません。

ちなみにZakuroBlogでは全部に表示されるようにしています(全てチェックなし)

3.ヘッダーカードの背景画像をぼかすor暗くするorそのまま

「デザイン」という項目で、ヘッダーカード画像の表示パターンを3つから選ぶことができます。

1. テキストのある背景画像をぼかす 2.テキストのある背景画像を暗くする 3.デフォルト

4.ヘッダーカード画像を角丸にする

同じく「デザイン」の項目で選べます。

チェックを入れると、ヘッダーカード画像の角を丸く設定できます。

やわらかい表示のサイトにしたい方にはオススメです。

 

5.スマホ閲覧時、ヘッダーカード画像の高さを倍にする

同じく、「デザイン」の項目で選べます。

 

ちなみにZakuroBlogでは、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」がオススメという記事は見たことがありますが、なぜそのサイズがいいのかの理由が載っていませんでした)

 

まとめ

ぜひこの記事を参考にヘッダーカードを設定し、おしゃれなブログを目指しましょう!

 

最後までご覧いただき、ありがとうございました。
よかったらシェアしてね!

この記事を書いた人

共働き夫婦の2人暮らし
|副業禁止の会社員です|営業職
|FP2級保有|貯蓄についてお話していきたいです
|まずは自分の経験談から投稿していきます
|2021.4.30ブログ開設

コメント

コメントする

CAPTCHA


目次
閉じる