AFFINGER5

AFFINGER5のヘッダーカードの作り方と表示設定の方法を解説

2020年11月5日

【5分でできる】AFFINGER5のヘッダーカードの設定方法を解説
悩んでいる人
アフィンガー5のヘッダーカード作り方がよくわからないので教えてください!

 

このような疑問にお答えします。

 

本記事の内容

・アフィンガー5のヘッダーカードの作り方
・アフィンガー5ヘッダーカードの表示設定
・ヘッダーカードを設置することのメリット

 

WordPressテーマ 「WING(AFFINGER5)」を使用しているサイトのトップページに、よくヘッダーカードを設置しているサイトをよく見かけますよね。

 

本サイトの場合

 

実は、アフィンガー5では難しい知識なしで誰でも簡単に作ることができます。

 

なぜなら、管理画面の設定にあらかじめ用意されているからです。

 

この記事では、そんなヘッダーカードの作り方を解説していきます。

 

難しいことはなく、流れさえ見れば5分ほどで設置できますよ。
ふじさん

 

アフィンガー5のヘッダーカードの作り方

アフィンガー5のヘッダーカードの設定方法

手順は次の通り。

 

手順

  1. 管理画面に入り画像の設定
  2. テキストの入力
  3. リンク先のURL設定
  4. カード表示の有無

 

順に解説していきます。

 

step
1
管理画面に入り、画像を設定しよう

 

AFFINGER5の管理画面から『おすすめ記事一覧』に進んでいき、『おすすめヘッダーカード』という項目に入力していきます。

 

 

ヘッダーカードの背景に設置したい画像は、初めにワードプレスのメディアにアップロードします。

 

基本ワードプレス内で使用する画像は、メディアにアップロードしましょう。
ふじさん

 

まだ画像が決まってない人はO-DANというサイトで無料で入手できます。画像のサイズは1200×630px。がおすすめされています。

 

詳しい使い方はブログなどに使えるフリー写真素材サイトO-DANとは?【おすすめです】で解説していますので、参考にしてみてください。

 

メディアに画像をいれたら『アップロード』を押し、挿入したい画像を選択してください。

 

 

ヘッダーカードの背景に設置したい画像を選びましたら、右下の『投稿に挿入』を押します。

 

 

アップロードを終えると『画像のURL』のところに自動でその画像のURLが表示されます。

 

うまく設置されているか心配ならば、一度『SAVE』をおして保存し、ご自身のサイトのトップページで確認してみてください。
ふじさん

 

ヘッダーカードは全部で4つ設置できるので、お好みで設置しましょう。大抵は4か所に設置している人がほとんどですね。

 

step
2
テキストの入力をしよう

 

カード内に入れたいテキストを入力していきます。カードに設置したい記事の内容がわかるものがいいです。

 

僕の場合はクイックスタートでのブログ開設の記事を置いているので『クイックスタートでのブログ開設』と入力してます。
ふじさん

 

step
3
リンク先(設置したい記事)のURLの入力をしよう

 

ヘッダーカードをクリックした時に表示する記事のURLを入力します。各記事のURLの見方は簡単です。

 

表示したい記事の画面に入り、上の検索バーの所に表示されるURLをコピーして張り付けるだけ。

 

 

step
4
カード表示の有無の設定

 

作成したヘッダーカードをパソコンまたは、スマホやタブレットで表示・非表示にするかの設定です。

 

『pcに表示しない』にチェックを入れると、pcで閲覧時にヘッダーカードが表示されなくなります。

 

『スマホ・タブレットに表示しない』にチェックを入れると、スマホ・タブレットで閲覧時にヘッダーカードが表示されなくなります。

 

AFFINGER5のヘッダーカードの表示設定

AFFINGER5のヘッダーカードの表示設定

 

AFFINGER5のヘッダーカードの表示設定する項目は以下の通りです。

 

・サイト全体表示の設定
・ヘッダーカードの背景画像の表示パターン3つ
・ヘッダーカード角丸にする
・スマホ閲覧時のヘッダーカードの高さ

 

手順を解説していきます。

 

サイト全体表示の設定

 

ヘッダーカードをサイト全体に表示するか、トップページのみに設置するかを選択できます。

 

 

チェックを入れるとサイト全体に、入れないとトップページにのみヘッダーカードが表示されます。お好みで選んでください。

 

ヘッダーカードの背景画像の表示パターン3つ

 

ヘッダーカードを作る時と同じように『AFFINGER5管理画面』から『おすすめ記事一覧』⇒『おすすめヘッダーカード』のしたの方に行くとある『デザイン』という項目から設定していきます。

 

 

各背景画像のパターンは以下の通りです。

 

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

 

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

 

デフォルト

 

お好みで好きなものを選んでみましょう。

 

注意ポイント

画像を見てわかる通り、ヘッダーカードに入れた画像の背景にテキストがある場合と、背景色が白い場合、『ぼかす』と『デフォルト』を選ぶと、テキストの色と背景色が同化して見えにくくなってしまうため、注意してください。

 

ヘッダーカードを角丸にする

 

ヘッダーカードの四隅に丸みがつけられます。

 

 

ヘッダーカードを角丸にする

 

ちょっとわかりにくけど、これもお好みで選んでみて下さい。

 

スマホ閲覧 時のヘッダーカードの高さ

 

『スマホ閲覧時(959px以下)のおすすめヘッダーカードの高さを倍に』では、スマホ画面での表示サイズの設定ができます。

 

 

デフォルト(チェックなし)

 

 

チェックあり

 

 

こちらもお好みで選びましょう。ちなみに僕はデフォルトでチェックをいれていません。

 

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

 

ヘッダーカードを設置することのメリット

ヘッダーカードを設置することのメリット

ヘッダーカードを設置するメリットは以下の通り。

 

・サイトが華やかになる
・読者さんに読んで欲しい記事が目立たせられる

 

ヘッダーカードは設置するだけでかなりサイトらしくなります。

 

デザインも大事

 

何もない殺風景なサイトよりも見た目が整っているほうが目を惹きますよね。

 

目で見て楽しめて、記事もよければ読んで楽しめる。読者さんを満足させられれば、今後も読んでもらえる可能性があります。

 

とはいえ、初めのうちはデザインに凝りすぎるよりも記事を書くのに専念しましょう。デザインに凝りすぎて記事がなければ、読まれるブログにはならないからですね。

 

わかりやすさも大事

 

ヘッダーカードにおすすめの記事を配置しておけば、サイトに訪れた読者さんにクリックされやすいし、これが一押しの記事なんだと気づいてもらいやすいです。

 

なので、自分がおすすめしている記事・読んで欲しい記事があるのであれば、設置してみましょう。

 

まとめ:ヘッダーカードは簡単に作れる

まとめ:ヘッダーカードは簡単に作れる

 

アフィンガー5のヘッダーカードは、管理画面から簡単に誰でも作れます。流れとしては

 

簡単な流れ

  • 背景画像を用意する
  • ワードプレスにアップロードする
  • ヘッダーカードを作る
  • ヘッダーカードの表示設定をする

 

こんな感じです。

 

まだカードを設置していなくてこれから設置しようと思っている人は、簡単にできるのでサクッとやってみましょう。

 

関連記事【Affinger5】トップページをシンプルに魅せるカスタマイズ

  • この記事を書いた人
  • 最新記事

ふじさん 

サービス業の店長をしています。片手間に副業にとブログを運営しています。ブログ運営のことや、日々の生活に役立つ情報を発信中。猫が好きだったりします。

© 2021 Fujisanblog