ヨガスクールの中の人が教える、ブログのつくり方

AFFINGER5

AFFINGER5(アフィンガー5)ヘッダーカードの設定方法|デザイン済みデータの変更

2020-12-29

AFFINGER5(アフィンガー5)ヘッダーカードの設定方法
AFFINGER5(アフィンガー5)のデザイン済みデータをインストールしたけど、「ヘッダーカード」を表示させるには、どうすればいいのかな?

本日は、こんな悩みに答えます

 

記事の内容

  • ヘッダーカードはサイトの離脱防止に有効
  • AFFINGER5(アフィンガー5)のヘッダーカード設定方法
  • ヘッダーカードのさらに細かい設定を解説

 

✔本記事を書いた人

profile

ucozi(@ucozi_ikeda

この記事を書いている私は、ヨガスクールで宣伝部長として働いています。

仕事を通じて得た情報をもとに、信頼性の高い記事をお届けしています。

 

今回も、WordPressの有料テーマ「AFFINGER5(アフィンガー5)」を使ったデザイン済みデータの設定方法についての解説です。

 

AFFINGER5(アフィンガー5)ってナニ?という方や、デザイン済みデータのインストール方法について知りたい方は、こちらの記事からご覧ください。

 

AFFINGER5(アフィンガー5)なら「ヘッダカード」を最大4つまで、しかも簡単に設定できます。

それでは、さっそく設定を行っていきましょう。

 

《 当サイトの使用テーマ 》

AFFNGER5(アフィンガー5)を詳しくみる

 

ヘッダーカードはサイトの離脱防止に有効

ヘッダーカードを説明するには見てもらった方が早いでしょう。

下記の画像のような内部リンクのことを指します。

ヘッダーカードはサイトの離脱防止に有効

 

ヘッダーカードは通常、ヘッダー画像の下に位置しますのでとても目立ちます。

なのでヘッダーカードは、見てもらいたいページに誘導するのに便利です。

 

また、ページから離脱してしまうのを防ぎ、訪れた読者をサイトに長く滞在してもらうのにも有効です。

サイトの滞在時間が長いと、Googleからよいコンテンツを提供しているサイトと判断してもらえるので長くたくさん見てもらうことはブログ運営をするうえでとても大事です。

 

AFFINGER5(アフィンガー5)ではこのヘッダーカードの設定を簡単に行うことが可能。

最大で4つまで設定できます。

画像さえ用意してしまえば、ものの5分程度で設定できてしまうので、ぜひチャレンジしてみてください。

 

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

AFFINGER5(アフィンガー5)でヘッダーカードを設定方法は、以下の2ステップです

  1. ヘッダーカード用の画像を用意
  2. AFFINGER5管理にて設定

 

画像さえ準備できてしまえばカンタンです。

では、順番に解説します。

 

ヘッダーカード用の画像を用意

まずは画像を選びましょう。

ヘッダーカードは最大で4つまで設定できるので、4枚の画像を準備します。

 

使用する画像は必ず著作権をクリアしたものを使う

ブログで画像を使用する際は、必ず著作権をクリアしたものを利用するようにしてください。

つまりは、ご自身で撮影した写真を使うか、以下の記事で紹介するようなサイトから入手するようにしましょう。

 

画像のサイズは1200×700ピクセルを推奨

画像サイズは「1200×700」ピクセルで用意することをおすすめします。

PC閲覧時は「700」ピクセルも高さは必要ありませんが、後ほど解説する「スマホ閲覧時(959px以下)のおすすめヘッダーカードの高さを倍に」という設定にチェックをした場合に必要になります。

 

AFFINGER5管理にて設定

画像が用意できたら、あとは設定だけです。

WordPressの管理画面にログインしましょう。

 

左側のメニューより「AFFINGER5管理」→「AFFINGER5管理」へと進みます。

左側のメニューより「AFFINGER5管理」→「おすすめ記事一覧」へと進みます

 

続いて「おすすめ記事一覧」をクリックします。

「おすすめ記事一覧」をクリック

 

下にスクロールすると「おすすめのヘッダーカード」の設定項目があります。

以下の3つの項目を埋めていきます。

  • ヘッダーカード:画像のURL
  • ヘッダーカード:テキスト
  • ヘッダーカード:リンク先URL
「おすすめのヘッダーカード」の設定項目

 

ヘッダーカード:画像のURL

ヘッダーカードに表示する画像を設定します。

「アップロード」ボタンを押して画像をドラッグ&ドロップするか、「ファイルを選択」から選びましょう。

 

画像を選択するとURLが自動で入力されます。

ポイント

デザイン済みデータの場合、デフォルトでグレーの正方形の画像が指定されていますが、上書きしてOKです。

 

ヘッダーカード:テキスト

ヘッダーカードの上に表示させるテキストを入力します。

ここにテキストを入力すると画像の高さが小さくなって表示されます。

テキストを空欄のままにしてもOKです。

 

※テキストを入力した場合

 

※テキストを空欄にした場合

 

ヘッダーカード:リンク先URL

ヘッダーカードをクリックした際のリンク先を設定します。

カテゴリーページか読んで欲しい個別記事のURLを入力します。

 

3つの設定が終わったら「save」ボタンを押して完成です。

 

ヘッダーカードのさらに細かい設定を解説

基本は先に紹介した3つを設定すれば問題ありません。

ただ、AFFINGER5(アフィンガー5)はさらに細かく設定できますので、ここではそれぞれの設定について解説します。

 

ヘッダーカード:PC・モバイルの表示

ヘッダーカード:PC・モバイルの表示
  • PCで閲覧したときに表示させたくない
  • スマホ・タブレッドで閲覧したときに表示させたくない

を希望する場合はチェックを入れます。

PC、スマホ・タブレッドどちらも表示させる場合は空白のままでOKです。

 

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

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

ヘッダーカードは、デフォルト設定ではトップページのみに表示されるようになっています。
個別のページなど、他のページにも表示させたい場合はチェックを入れます。

ただ、チェックすると読んでもらいたい記事の邪魔になって離脱を誘発するので設定しないケースの方が多いです。

 

ヘッダーカードの画像表示デザイン

ヘッダーカードの画像表示デザイン

ヘッダーカードの画像の表示を選べます。

それぞれサンプルを用意しました。

ブログ全体のデザインに応じてお好みで選んでOKです。

 

※デフォルト
デフォルト

 

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

 

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

 

スマホ閲覧時ヘッダーカードの画像表示の高さ

「スマホ閲覧時ヘッダーカードの画像表示の高さ」にチェックすることで、スマホで見た場合のヘッダーカードの高さを倍に表示することができます。

 

この場合、用意する画像は「1200×700」ピクセルの画像を推奨します。

上下の高さが「700」ピクセル以下だと左右が自動でトリミングされてしまいます。

トリミングされても問題ない画像ならよいですが、そうでないなら何の画像が分からなくなりますのでご注意ください。

 

※1200×700ピクセルで設定した場合

 

※1200×400ピクセルで設定した場合

 

以上でヘッダーカードの設定についての解説は終わりです。

 

まとめ:AFFINGER5ならヘッダーカードの設定&カスタマイズが簡単

いかがでしたでしょうか?

ヘッダーカードの役割を改めて説明すると下記の2点です。

ポイント

  • 目立つので見て欲しい記事に誘導させやすい
  • 目立つのでページの離脱を防ぐのに役立つ

上記はサイトの滞在時間を増やすのに役立ちますので、Googleから高く評価されることにつながります。

AFFINGER5(アフィンガー5)なら、このヘッダーカードの設定が簡単にできますので、ぜひチャレンジしてみてください。

本日はこのあたりで。

今回の記事が、皆さまのお役に立てれば嬉しいです。

本日も最後までお読みいただきまして、誠にありがとうございました。

  • この記事を書いた人
ucozi

ucozi(うこじ)

ヨガスクールの中の人。WEB集客のほか、ヨガ情報サイトの企画・立ち上げやWEBライター養成講座などのコース開発を行ってます。 本ブログは「ヨガインストラクターのためのブログの始め方」をメインテーマに、ヨガ関連情報を発信しています。

-AFFINGER5
-,

Copyright © ucozi.com , All Rights Reserved.