AFFINGER

【AFFINGER】ヘッダーカードを使う方法!サイトの見た目が一段上がる!

広告:ページ内にてアフィリエイト広告を利用しています。

AFFINGER ヘッダーカードを作る

ブログの見た目を向上し、サイトの回遊率を上げる秘儀「ヘッダーカード」をご紹介します。

WordPress のテーマ「AFFINGER6」の優良な機能の一つ「ヘッダーカード」は、サイトの見た目が一段(以上)上がり、かつ直帰率も改善するという、良いことづくめの機能です。

ポイント

本記事では、

「ヘッダーカード」の利用方法を紹介します。

おすすめ副業

\AFFINGER でオシャレサイトを作る方法は こちら をクリックしてください/

PR

AFFINGER6 のヘッダーカードとは

ヘッダーカードとはサイトのヘッダ部分にカード上のリンクです。

ヘッダーカードの例

ヘッダカードには次のメリットがあります。

  • サイトの見た目が美しくなる
  • サイトの直帰率を改善する

■ サイトの見た目が美しくなる

ヘッダー箇所にヘッダーカード(イメージ)が並ぶことで、サイトの見た目が引き締まって美しくなります。

■ サイトの直帰率を改善する

目を引くイメージがヘッダ部分にあることによりページを訪問したユーザが必ず目にします。

記事を読み終えたとき、(もしくは読みもせずに)気になるキーワードのヘッダーカードをクリックしてもらうことにつながりますので、ユーザがサイト内を回遊してくれる可能性が高くなります。

ポイント

直帰率とは、最初のページを見て(サイト内の)他のページに行かずに、サイトを離れてしまった割合を表します。

ヘッダーカードの利用方法

ヘッダーカードは AFFINGER6 の機能で実現します。

■ Step.1 ヘッダーカード作成画面の表示

ヘッダーカード設定画面

WordPress の管理画面から 「AFFINGER 管理」 → 「ヘッダー下 / おすすめ」 をクリックし、「ヘッダーカード」 を表示します。

■ Step.2 ヘッダーカードを作成する

ヘッダーカードの例

「ヘッダーカード1」 ~ 「ヘッダーカード4」 を設定します。

かならずしも4個作る必要はなく、3個のサイトも多く見かけます。1個、2個はバランスが悪く見えますので殆どありません。

項目内容
画像のURLヘッダーカードのイメージ画像を指定します。
URLを記入しますが、「アップロード」ボタンからメディアライブラリを呼び出して画像を指定することで(URLを直接手入力しなくても)イメージ画像を指定できます。

画像は、800(px)×400(px) 程度の大きさの画像(※)を用意すると良いでしょう。

※ PC で表示する場合は、上下を切り取り中心部を表示します。
※ スマホで表示する場合(かつ高さ2倍の設定をする場合)は、上下切り取りなく表示します。
テキストイメージ上に表示するテキスト文字列を入力します。
リンク先URLヘッダーカードをクリックした場合の移動先 URL を入力します。
PCに表示しないPCに表示しない場合はチェックします。(通常チェック不要です)
スマホ・タブレットに表示しないスマホ・タブレットに表示しない場合はチェックします。(通常チェック不要です)

■ Step.3 ヘッダーカードの共通設定を行います

「おすすめヘッダーカード」 にある共通設定を行います。

項目内容
サイト全体に表示するチェックを付けた場合、サイト全体(すべてのページ)でヘッダーカードを表示します。
(チェックしない場合は、トップページのみ)
○テキストのある背景画像をぼかす
○テキストのある背景画像を暗くする
○デフォルト
イメージ画像の明度、ぼかしを設定します。
※デフォルトがおすすめです。
角丸にするイメージ画像の角を丸くします。
※チェックなしがおすすめです。
スマホ閲覧時のおすすめヘッダカードの高さを倍にスマホ画面で表示した場合、イメージ画像の高さが倍になります。
800(px)×400(px)で作成していた場合、ほぼイメージ通りの縮尺で表示します。
※チェックありがおすすめです。

■ Step.4 完了です

設定を保存して完了です。

AFFINGER もっと!お役立ちテクニック

AFFINGER のお役立ちテクニックはこちら

まとめ

WordPress のテーマ「AFFINGER6」の優良な機能の一つ「ヘッダーカード」は、サイトの見た目が一段(以上)上がり、かつ直帰率も改善するという、いいことづくめの機能です。

ポイント

  • サイトの見た目が美しくなる
  • サイトの直帰率を改善する
  • ヘッダーカードを利用する場合は、「AFFINGER 管理」の 「ヘッダーカード」 機能を使う

サイトはちょっとした一工夫で見た目やユーザの使いやすさがガラっと変わるので、不思議で面白いですね。

Enjoy!4個のリンクを厳選するのが一番の悩みどころだったりします!

おしゃれサイト
ノートパソコン

AFFINGER の利用方法などについてココナラにて「支援作業」を販売しております。

よかったらご利用くださいませ。

アフィリエイトを戦うなら「AFFINGER」

「Affingerタグ管理マネージャー4とPVモニター2のセット」では、

コードの管理、クリック数の計測など、アフィリエイトに役立つ解析機能が付いています。

「Affingerタグ管理マネージャー4とPVモニター2のセット」のご利用も是非ご検討ください。

PR
AFFINGER TAG MANAGER
PR
AFFINGER TAG MANAGER
  • サイト全体と記事ごとのアクセス推移
  • ユーザーの導線の確認
  • 人気記事の把握
  • アクセス元の把握
  • リンクや広告の効果測定(表示回数 / クリック数)
  • クリックされた記事の把握
PR

\気になったら、とりあえず見てみよう/

詳しく見る

WordPress のテーマ「AFFINGER」の情報、テクニック一覧はこちらをクリック!

PR
―― 今日のおみくじ ――

第 48 番

”末吉"


今日のメッセージ

人が想像できる未来は、いつか必ず実現できる未来です。
ブログの始め方
レンタルサーバー
WordPress
AFFINGER

ブログランキング・にほんブログ村へ  

Presented By Boon Boon Blog .Com

広告の設置・収入について

当サイトは Amazonのアソシエイトとして、適格販売により収入を得ています。

当サイトは Google アドセンスを利用し、広告により収入を得ています。

当サイトは ASP が提供するサービスを利用し、広告、適格販売により収入を得ています。

電気通信事業法改正に伴う表記