ROAD

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

工場勤務サラリーマンが20万円 稼ぐまでの道のり】 第26話
悩むひと
トップページを見やすくするためにヘッダーカードを作りたいけど、方法がわからない。。

 

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

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

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

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

ヘッダーカード完成図

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

 

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

 

こんな人におすすめ

  • トップページにヘッダーカードを作りたい人
  • 次のステップとしてサイトを見やすくしたい人
  • ヘッダーカードのスマホ表示が気になる人

 

ヘッダーカードの作り方

 

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

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

ヘッダーカードの作成手順1

 

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

ヘッダーカードの作成手順2

 

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

ヘッダーカードの作成手順3

 

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

ヘッダーカードの作成手順4

 

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

ヘッダーカードの作成手順5

 

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

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

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

 

プレビュー画面(ヘッダーカード1枚)ヘッダーカードの作成(完成画面)

 

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

 

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

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

  • ヘッダーカードをサイト全体に表示させる
  • PCに表示しないorスマホ・タブレットに表示しない
  • PCに表示しないorスマホ・タブレットに表示しない
  • 背景の画像をぼかすor背景をぼかさないor背景を暗くする
  • 背景画像の角を丸くする
  • テキストを任意の場所で改行する

 

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

Enaka blogのヘッダーカード設定

プレビュー画面

Enaka blogのヘッダーカード設定(プレビュー画面)

 

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

 

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

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

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

ヘッダーカードのカスタマイズ(サイト全体に表示する方法)

プレビュー画面

ヘッダーカードのカスタマイズプレビュー画面(サイト全体に表示する方法)

 

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

 

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

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

ヘッダーカードのカスタマイズ(PCに表示しない)

プレビュー画面

ヘッダーカードのカスタマイズプレビュー画面(PCに表示しない)

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

・スマホ・タブレットに表示しない方法
チェックON → スマホ・タブレットにのみ表示されなくなる。

 

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

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

ヘッダーカードのカスタマイズ(背景のカスタマイズ)

プレビュー画面

ヘッダーカードのカスタマイズプレビュー画面(背景のカスタマイズ)

 

背景画像の角を丸くする

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

ヘッダーカードのカスタマイズ(背景画像の角を丸くする)

プレビュー画面

ヘッダーカードのカスタマイズプレビュー画面(背景画像の角を丸くする)

 

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

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

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

 

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

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

ヘッダーカード任意の場所で改行する方法

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

まとめ

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

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

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

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

 

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

 

記事のまとめ

  • ヘッダーカードの挿入は『AFFINGER5 管理』→『おすすめ記事一覧』から
  • テキストを改行するときは、任意の場所に『</br>』

 

合わせて読みたい

はじまりの記事

  • この記事を書いた人

いなさら

田舎系副業ブロガー|九州の田舎でサラリーマンをしながら発信しています! Enaka Blogでは、『ブログの情報やポケットWi-Fiのこと、アウトドアを中心に発信しています。』 少しでもみなさんのお役に立てれば幸いです!! よろしくお願いします(≧◇≦)

-ROAD

© 2021 Enaka Blog Powered by AFFINGER5