アフィンガー6のヘッダーカード設定方法・出来立て記事のPVを増やす施策にグッド

プロモーションを含むことがあります

アフィンガー６のヘッダーカードリンクは、「ヘッダー下のみに表示される『特定の記事へのリンクが貼れるテキスト付画像』」です。下のようにカードのような形をして目立ちますのでPV増えます。

ここではアフィンガー６のヘッダーカードリンクについて、その基本設定と、ブログの雰囲気やイメージに合わせて調整できるカスタマイズのやり方をお伝えしていますので参考にしてください。

熊谷からのアフィンター６ご購入15大特典の詳細はこちら

アフィンガー６のカスタマイズ ヘッダーカードリンクを実装するメリット

ヘッダーカードは最大４個まで表示可

アフィンガー６のカスタマイズとしてヘッダーのカードリンクは、閲覧の際に目立つのでクリックされやすく、リンクが付いているのでクリックを促しやすいです。

上のようにヘッダー下に４個まで「画像+テキスト+サブテキスト」を設定できるようになっています。

アフィンガー６でヘッダーカードリンクをカスタマイズする方法

アフィンガー６のヘッダーカードリンクは基本設定と、いくつかの設定でカスタマイズのバリエーションが増えて行くようになっています。

• 基本項目４つ
• カスタマイズ

すべてのバリエーションを試してみましたので参考にしてみてください。

ヘッダーカードリンクの基本設定

ヘッダーカードリンクは以下の順にクリックしていくと設定画面にたどり着きます。

以下の趣旨でヘッダーカードの基本項目４つを埋めて行くだけです。

基本項目① 画像のＵＲＬを入力する

ヘッダーカードの画像は、「画像のURL」を入力することで表示させるようになっています。

メディアライブラリからヘッダーカードに表示させたい画像を選択し、以下「ファイルのＵＲＬ」の下「ＵＲＬのコピー」をクリックします。

以下の場所でURLをペーストします。

注意したいのがヘッダーカードの画像サイズです。

大きな画像をアップロードしてもそのサイズに縮小表示されるようになっており、正方形タイプの画像はトリミングされて表示されます。

。

基本項目②③ テキストを入力

次にヘッダーカード上に表示させるテキストを入力して行きます。出来上がりイメージとしては以下のように。

テキストの入力は以下の場所で行います。

このヘッダーカードの上に表示されるテキストの文字数は以下を参考にしてみてくださいね。

 

基本項目④ 飛び先記事リンクＵＲＬを入力

次に飛び先の記事リンクＵＲＬを入力します。

どの記事のURLを貼り付けるか迷った場合は、おすすめのカテゴリ（カテゴリ一覧のURL）でもいいと思います。

ここまで設定が終わったら、右上の「ＳＡＶＥ」を押して、実際にトップページを表示させてみましょう。

サンプルとして設定したヘッダーカードは、以下のように表示されるようになりました。

ヘッダーカードをさらにカスタマイズ

ヘッダーカードは、以下のようなカスタマイズが可能です。

1. 背景画像をぼかす
2. 背景画像を暗くする
3. カードを角丸にする
4. 全ての投稿・固定ページのヘッダーにカードを表示させる
5. スマホで倍の高さにする

カスタマイズ① アフィンガー６のヘッダーカードで 背景画像をぼかす

ヘッダーカードで画像の背景をぼかした場合、デフォルトの画像の状態と比べると以下のようになります。

アフィンガー６のヘッダーカードで背景画像をぼかしたパターン

アフィンガー６のヘッダーカードのデフォルト状態の背景画像

設定方法は以下の順にクリックして行き、ぼかすにチェックを入れて保存するだけです。

なお、ぼかしたパターンの背景画像にマウスオーバーの状態にすると、そのカードだけぼかしが消えてデフォルトに近く表示されます。

カスタマイズ② アフィンガー６のヘッダーカードで背景画像を暗くする

ヘッダーカードで画像の背景を暗しくた場合、デフォルトの画像の状態と比べると以下のようになります。

アフィンガー６のヘッダーカードで背景画像を暗くしたパターン

アフィンガー６のデフォルト状態の背景画像

設定方法は以下の順にクリックして行き、暗くするにチェックを入れて保存するだけです。

なお、暗くしたパターンの背景画像にマウスオーバーの状態にすると、そのカードだけ明るみがましてデフォルトに近く表示されます。

カスタマイズ③ アフィンガー６のヘッダーカードで 背景画像を角丸にする

ヘッダーカードの背景画像を角丸にすると、やわらかさが増すイメージになります。

カスタイマイズのパターンを全て挙げてみましたので参考にしてみてください。

ヘッダーカード「デフォルト×角丸」

ヘッダーカード「背景画像をぼかす×角丸」

ヘッダーカード「背景画像を暗くする×角丸」

設定は以下の通りにクリックして「角丸にする」にチェックを入れて保存します。

 

カスタマイズ④ トップページの他全ての投稿固定ページでヘッダーカードを表示させる

アフィンガー６のヘッダーカードは、通常「トップページだけ」表示されますが、「すべてのページに表示させる」といったカスタマイズも可能です。

以下はトップページではない投稿記事でヘッダーカードが表示されている例

設定では以下の通りクリックして、「サイト全体に表示する」にチェックを入れて保存を押します。

他には、このヘッダー下カードリンクとはちょっと違った「好きな場所に挿入できるカード式のリンク（ブログカード）」も豊富なカスタマイズが可能です。以下ぜひ参考にされてみて下さい。

カスタマイズ⑤ スマホでカードの高さを倍にする・サイズの変更

最後は、「スマホで閲覧するときにカードの高さを倍にする」といったカスタマイズで、「アフィンガー管理」で簡単にサイズ変更できるようになっています。

スマホで閲覧するときにカードの高さを倍にしたパターン

スマホで閲覧したときにカードの高さがデフォルトのままのパターン

設定ではスマホ閲覧時ヘッダーカードの高さを倍にチェックを入れて保存を押します。

なお、スマホ・タブレットでこのヘッダーカード４個を表示させると、下のように「２×２段」のレイアウトで表示されるようになっています。

２個のヘッダーカードをスマホで非表示設定にしてみたら、以下のように残り２個が表示されました。

この場合は以下のように設定します。

 

おすすめ画像サイト

ヘッダーカードは画像が命なところがあります。

私熊谷ヒカルがよく使っているおすすめのフリー画像サイトがありますので、迷ったらここで探してみてくださいね！

ヘッダーカードのテキスト色カスタマイズ方法

ヘッダーカードの文字色は基本白色ですが、実はカスタマイザーから文字色を変更することも可能です。

 

追加ＣＳＳに以下のコードをコピペします

.st-cardlink-card.has-bg.is-darkable .st-cardlink-card-text {
z-index: 2;
color:red;
}

上のコード見本での文字色は赤(red)にしていますが、下記から選んで映える文字にしてみてくださいね。

ヘッダーエリアのカスタマイズでちょっとだけ注意しよう

アフィンガー６でヘッダー下エリアのカスタマイズをするときに注意したいのが、「サムネイルショーとの併用」です。

以下は、ヘッダー下エリアに「サムネイルショー」と「ヘッダーカード４個（赤枠内）」を同時に表示させている例です。

この二つを併用すると、けっこう雑然としたイメージになりがちだと思います。

おすすめとしては「サムネイルショー」か「ヘッダーカード」のいずれかにするといったカスタマイズです。

サムネイルショーはスライダーのように動きがあるので、ここにメリットを感じる場合はサムネイルショーを選べばいいでしょう。

アフィンガー６のレビュー＆ご購入方法

当サイトからのご購入者には収益５万円になるまで質問し放題のサポートを含む豪華15大特典を贈呈していますので、どうぞご活用ください。

お問合せ

*は必須項目です *お名前またはニックネーム *メールアドレス (確認用) *お問合せ(文字数制限なし) Powered by FormMailer.

ただし、法令違反・公序良俗に抵触するご質問には一切お応えしません。