【ブログ初心者必見】アフィンガーでトップページにヘッダーカードを作る方法

悩むひと

トップページを見やすくするためにヘッダーカードを作りたいけど、方法がわからない。。

こんなお悩みを解決します。

AFFINGER5（アフィンガー5）を利用している、多くのブロガーがサイトのトップページにヘッダーカードを設置していますよね。

以前は、私も設置していませんでしたが『サイトもっと見やすくしたい』と思いヘッダーカードを設置したらサイトの離脱率大幅に減りました。

いまから作っていくトップページ↓

そこで今回は、ブログも少しずつ慣れてきてこれから『サイトもどんどんカスタムしたい！』、
『オシャレなトップページが作りたい！』といった悩みをお持ちの方の次のステップとしてトップページにヘッダーカードを設置する方法についてご紹介します。

脳みそ2MBの私ができたので、きっとすぐできちゃいます(*^▽^*)

ヘッダーカードの作り方

手順1　ヘッダーカードを決める

step
1ダッシュボードから『AFFINGER5 管理』→『おすすめ記事一覧』をクリックします。

step
2『おすすめヘッダーカード』の項目からヘッダーカードを作っていきます。

step
3カードとして表示したい”画像”と”テキスト”を決めます。

step
4最後にリンク先になるURLを入力します。

step
5『save』をクリックすると選択した画像が表示されます。

手順2　ヘッダーカードを確認する

ここまでできたら、プレビュー画面で確認してみます。

ヘッダーカードは、最大4枚まで作成できるのであとはこれを繰り返すだけで4枚のヘッダーカードを作成することができます。

プレビュー画面（ヘッダーカード1枚）

いかがでしょうか？これなら脳みそ2MBの私でも出来るのが納得できるかと思います。

ヘッダーカードのカスタマイズ方法

さて、先ほどはヘッダーカードの基本的な作り方についてご紹介しましたが、これからはヘッダーカードの細かなカスタマイズ方法についてご紹介していきます。

ちなみに、当ブログのヘッダーカードの設定は以下のようになっています。

プレビュー画面

それでは、詳しく紹介していきます。

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

ヘッダーカードをカスタマイズする場合は、先ほどと同様に『おすすめの記事一覧』→『おすすめのヘッダーカード』からカスタムしていきます。

✓『サイト全体に表示する』にチェックを入れる

プレビュー画面

チェックをONにすると、個別記事にもヘッダーカードが表示されるようになります。

PCに表示しないorスマホ・タブレットに表示しない

✓『PCに表示しない』にチェックを入れる

プレビュー画面

※スマホ・タブレットには表示されている

背景の画像をぼかすor背景をぼかさないor背景を暗くする

✓お好みの表示方法にチェックをいれる

プレビュー画面

背景画像の角を丸くする

✓角丸にするにチェックをいれる

プレビュー画面

テキストを任意の場所で改行する

ここまでの設定がうまくできたら、『テキストを任意の場所で改行』したくなりませんか？

任意の場所でテキストを改行することで統一感のあるトップページを作成することができます。

それでは、早速ご紹介していきます。

✓改行したい場所に</br>と入力する。

これだけ！？と思われるかもしれませんが、これでけでできるんです♪

まとめ

いかがだったでしょうか。

冒頭でも紹介しましたようにサイトのトップページにヘッダーカードを挿入することは、読者が見やすいだけでなく、サイトの離脱率に大きく影響します。

ヘッダーカードの設定はやってみたら意外と簡単にできますので、これを機にお気に入りのトップページを作成してみてはいかがでしょうか。

ここまで読んでいただきありがとうございました！

それでは、これから一緒に楽しくブログ書きましょ(*^▽^*)