ブログ

【5分でできる】AFFINGER5のヘッダーカードの設定方法を解説

2020年11月5日

【5分でできる】AFFINGER5のヘッダーカードの設定方法を解説
悩める子
アフィンガー5のヘッダーカードを設置したいです。まだアフィンガーにしたばかりでやり方がいまいちわからないので、設定方法を教えてください!

 

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

 

本記事の内容

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

 

アフィンガー5を使用しているサイトのトップページに、よくヘッダーカードを設置しているサイトをよく見かけますよね。

 

本サイトの場合

 

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

 

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

 

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

 

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

 

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

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

手順は次の通り。

 

手順

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

 

順に解説していきます。

 

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

 

step
5
カードの背景設定をしよう

 

『デザイン』という項目から設定していきます。

 

 

各デザインの例は以下の通り。

 

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

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

 

・デフォルト

・角丸にする

 

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

 

ここににチェックを入れると、ここの設定で959px以下のサイズの画像を設定した場合に、スマホでの表示サイズが大きく表示されます。

 

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

 

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

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

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

 

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

 

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

 

デザインも大事

 

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

 

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

 

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

 

わかりやすさも大事

 

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

 

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

 

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

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

 

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

 

簡単な流れ

  • 画像を用意する
  • ワードプレスにアップロードしてURLを入力
  • テキストを入力する
  • 設置したい記事のURLを調べて入力
  • 背景の設定をする

 

こんな感じです。

 

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

 

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

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

ふじさん 

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

© 2020 Fujisanblog