アフィンガーでヘッダーカードを作る｜設定と表示の方法を徹底解説

AFFINGERで"ヘッダーカード"を設定する方法をご紹介します。

ヘッダーカードを入れることで、以下のようにサイトが変化します。

ヘッダーカードを設置することで、「サイトがおしゃれに華やかになる」「サイト訪問者に読んでもらいやすくなる」というメリットがあります。

作成方法【簡易版】

• どのようなヘッダーカードを作るか、構想を練る
• ヘッダーカードの背景画像を作る(canvaなど)
• ヘッダーカードの挿入と設定(デザインや文字入など)
• ヘッダーカードの背景を変更する(必要な場合のみ)

どのようなヘッダーカードを置く？（ヒント）

ヘッダーカードは、ページの上部に設置されるものですので、サイト訪問者(読者)に読んでほしい記事を置きましょう。

ヘッダーカードの上限数は４つです。

• 『おすすめの本BEST10』
• 『ホラー映画特集』
• 『U-NEXTで動画を見よう』

など、読んでもらいたい記事を書いて、置いてください。

管理人の場合、サイトマップの投稿を書き、各記事のまとめにしました。詳細は、当サイトヘッダーカードを覗いてみてください！

また、記事だけでなく、カテゴリーを置いてもいいですね。

ヘッダーカードの画像を作成

背景になる画像を用意しましょう。私が愛用しているフリー素材サイトはO-DANです。高品質な画像がたくさんあり、日本語検索も可能です。

Canvaなどの画像作成ツールで画像を作ります。

このときに、ヘッダーカードタイトルに予め「文字あり」で作成しても良いです。
好きなフォントやカラーでタイトルやキャッチフレーズが記入できるので、より個性的なヘッダーカードにしたい方はにおすすめです。

ヘッダーカードのタイトルやキャッチフレーズは、後ほどアフィンガー側で設定することもできますので、画像のみでももちろんOKです。ただし、アフィンガーで文字入れをした場合、よからぬところで文字が改行してしまう場合がありますので、ご注意ください。

ヘッダーカードの最適サイズ

あくまで「推奨」ですので、お好みでサイズ変更してください。

３枚以上の場合、縦サイズを小さく(300pxなど)しますと、よりスッキリしたヘッダーカードになります。

ヘッダーカードを設置する

それでは、作成したヘッダーカードを設置していきます。

ダッシュボード　＞　AFFINGER管理　＞　ヘッダー下／おすすめ　 ＞「ヘッダーカード」

画像設置

「画像のURL：」に、作成したヘッダーカード画像をアップロードしてください。

リンク設置

「リンク先URL：」に、置きたいページのリンクを入力してください。

タイトルの入力

• テキスト…タイトル
• サブテキスト…キャッチフレーズ

ヘッダーカードに文字入れをしていないかたは、「テキスト：」にタイトルを入力します。テキストは全角で10文字以内に収めましょう。

キャッチフレーズとして「サブテキスト」も入力できます。「テキスト」の下に入力されて、小さな文字サイズになります。

サブテキストは全角で15文字以内に収めましょう。

キャッチフレーズをタイトルの上の表示したい場合は、以下のコードを「テキスト」のところに入力してください。

<span class="st-h-copy">キャッチフレーズ</span>タイトル

ここまで完了したら、"Save"ボタンをクリックして、保存してください。

ヘッダーカードのデザインをカスタマイズ

お好みでヘッダーカードのデザインを変更できます。

この章では全て、ダッシュボード　＞　AFFINGER管理　＞　ヘッダー下／おすすめ　 ＞「ヘッダーカード」での操作です。

ヘッダーカードをサイト全体に表示する

ヘッダーカードはデフォルトではトップページのみ表示されますが、ヘッダーカードをサイトすべてに表示させるには下の流れでカスタマイズします。

ヘッダーカードの項目から『サイト全体に表示する』にチェックを入れて、保存(Save)してください。

表示する範囲を決める

ヘッダーカード毎に表示する範囲を指定することができます。

「PCに表示しない」「スマホ・タブレットに表示しない」をチェックをいれることで設定できます。お好みで設定をしてください。

デフォルト

そのまま表示されます。

 テキストのある背景画像をぼかす

画像がぼやけます。

テキストのある背景画像を暗くする

画像が暗くなります。

角丸にする

画像の角が丸まります。

スマホ閲覧時（959px以下）のおすすめヘッダーカードの高さを倍に

ヘッダーカードを959px以下のスマホで見た時、表示サイズの設定ができます。

全て入力したら必ず『SAVE』を押して保存をお忘れなく。

ヘッダーカードの背景を変える

ヘッダーカードの背景は、カスタマイズ画面で変更できます。

ダッシュボード　＞　外観　＞　カスタマイズ　＞　 基本エリア設定　＞　ヘッダーカードエリア

背景色を変える

"色を選択"よりヘッダーカードエリアの背景色を変更できます。

背景画像を設定する

"画像を選択"よりヘッダーエリアの背景画像を設定できます。

サイズは、2400px ×600px ( ４：１ )推奨です。

背景画像設置の際に、綺麗に表示されなければ、「背景画像を繰り返さない」「背景画像を幅100%のレスポンシブにする」にチェックをいれてみてください。

以上で、ヘッダーカードを設定する方法を完了です。

お疲れ様でした。

関連記事

このサイトはアフィンガーを使用しています

WING（AFFINGER6 ver）

デザイン簡単、SEO対策と広告収入UPの機能が標準装備。さらに美しく、パワフルに。「稼ぐ」に特化したテーマ。

WING（アフィンガー6）公式サイト

2022年最新！おすすめレンタルサーバー

月額料金がライトプランで220円〜（税込）なので、コスパよく爆速なサイト運営が可能に！

管理画面は使いやすくなっているので、これからはじめてサイト運営をする方にもおすすめです！

＼ Twitterでも口コミ良好！ ／

スターサーバー公式サイト