ブログのトップページにヘッダーカードを置きたいのですが、どうやって作るのでしょうか？
この記事でご紹介します！
有料テーマのAFFINGERを使えばあっという間につくれちゃうので、サクッと作っていきましょう！
この記事では、AFFINGERを使うことで簡単に作れるヘッダーカードの作り方をご紹介しています。
ヘッダーカードとは…
ヘッダーカードとは、下図のようにブログのトップページでタイル状に表示されるメニューのことです。
ヘッダーカードを使うことで、読者の目をひけてブログの回遊性が増します。
読んでもらいたい記事やカテゴリをピックアップすることで、その記事のPV数にプラスの影響を与えることができます。
ヘッダーカードを作ることで、ブログの見た目も洗練されるので、ぜひヘッダーカードの作成にチャレンジしてみてください。
画像付きで紹介するので、記事を読むだけでとても簡単につくれますよ！
【AFFINGER】ヘッダーカードの作り方
AFFINGERなら、ヘッダーカードがほんとに簡単につくれちゃいます。
早速手順を確認していきましょう。
①まずはWordPressの管理画面を開きます
②管理画面が表示されたら左のメニューバーから「AFFINGER管理」→「AFFINGER管理」の順に選択します。
③AFFINGER管理画面に遷移したら、画像内③の赤枠で囲われた「ヘッダー下の編集」を示すマークを選択します。
④「ヘッダー下/おすすめ」のページが開くので「ヘッダーカード１」の「アップロード」をタップして画像を選択します。
また、その下の「テキスト」にヘッダーカードに表示する文字列も入力します。
ここで選択した画像がヘッダーカードの背景になり、入力したテキストが背景の上に文字として表示されます。
⑤「リンク先URL」には、ヘッダーカードをタップしたときに遷移するページのURL（リンク）を入力します。
⑥下にスクロールすると、「デザイン」の欄が出てきます。これはお好きなものを選択してください。
今回の例では以下の設定にしています。
・テキストのある背景画像を暗くする
・角丸にする
・スマホ閲覧時（959px以下）のおすすめヘッダーカードの高さを倍に
もしこれら以外の選択肢を選んだ場合は、それぞれ以下のような表示になります。
デザイン設定
〈テキストのある背景画像をぼかす〉
→ヘッダーカードの背景画像がぼける
〈デフォルト〉
→ヘッダーカードの背景画像が無加工で表示される
〈「角を丸くする」のチェックを外す〉
→ヘッダーカードのタイルの角が角張る
〈「スマホ閲覧時（959px以下）のおすすめヘッダーカードの高さを倍に」のチェックを外す〉
→ヘッダーカードの高さが低くなる
デザインまで選んだら、下部の「Save」ボタンを押して設定を保存します。
⑦設定を保存したあとブログのトップページへいき、ヘッダーカードが表示されていることを確認します。
⑧残り３つのヘッダーカードも同様に設定します。
ヘッダーカードは最大４つまで作成可能です。
⑨ブログのトップページにいき、ヘッダーカードが４つ作成されていることを確認します。
以上が、AFFINGERでのヘッダーカードの作成方法です。
AFFINGERだと本当に簡単にヘッダーカードがつくれちゃうことがおわかり頂けたと思います。
あなたも早速ヘッダーカードを作って洗練されたトップページを作っていきましょう！
ヘッダーカードのデバイスごとの見え方
スマホでの見え方
ヘッダーカードはその数によって自動的に表示を変えてくれます。
自分でCSSをいじらなくても最適な表示になるのはとても楽ですよね。
ここからは設定したヘッダーカードの数によって、デバイスごとにそれぞれどのような表示になるのかご紹介します。
スマホの場合は次のような表示になります。
スマホでの表示
〈ヘッダーカード１枚の場合〉
〈ヘッダーカード２枚の場合〉
〈ヘッダーカード３枚の場合〉
〈ヘッダーカード４枚の場合〉
左上から順番に右上→左下→右下と増えていきます。
見ていただければわかる通り、１つだと味気ないですし３つだと不格好なので、２つか４つがおすすめです。
当ブログでは４つにしています。
PCでの見え方
次にPCの場合の表示です。
PCでの表示
〈ヘッダーカード１枚の場合〉
〈ヘッダーカード２枚の場合〉
〈ヘッダーカード３枚の場合〉
〈ヘッダーカード４枚の場合〉
PCの場合は一つ増やすごとに横に並んでいきます。
PCの場合はヘッダーカード１つでなければ、見栄えに問題はなさそうです。
ヘッダーカードのデバイスごとの表示・非表示設定
ヘッダーカードは、先ほどご紹介したようにスマホとPCで見え方が異なるので、
・PCでは表示させて、スマホでは表示したくない
・ PCでは非表示にしたいけど、スマホでは表示したい
という方もいると思います。
そんなときはヘッダーカードそれぞれで表示・非表示の設定をします。
それぞれのヘッダーカードに下記の設定欄があるので、ここから設定します。
この項目にチェックを入れたらそのデバイスでは表示されません。
試しに１つのヘッダーカードをスマホで非表示にしてみます。
今回は先ほど作ったヘッダーカードのうち「お勧めプラグイン」をスマホで非表示にしてみます。
ヘッダーカードの編集画面で「スマホ・タブレットに表示しない」にチェックを入れて保存します。
すると下図のようにPCでしか表示されなくなりました。
〈スマホでの表示〉
〈PCでの表示〉
これまた簡単ですね！
AFFINGERだとヘッダーカードの作成、そのデバイスごとの表示・非表示が簡単にできます。
AFFINGERには、ほかにもブログをデザインするにあたってさまざまな便利機能があります。
Cocoonを使ってたときはデザインにとても苦労していたので、その時間がもったいなかった！
まだAFFINGERなど有料テーマを使っていない方はこの機会にぜひ導入してみてください！
