この記事には広告が含まれています。

AFFINGER6:ヘッダー下にヘッダーカードを表示させる方法

AFFINGER6:ヘッダー下にヘッダーカードを表示させる方法

この記事ではAFFINGER6(アフィンガー6)でヘッダー下にヘッダーカードを表示させる方法を初心者向けに解説しています。

こんな感じのヘッダーカードです。

AFFINGER6:ヘッダーカード

ヘッダーカードの設定方法

ヘッダーカードは「AFFINGER管理」「ヘッダー下/おすすめ」で設定することができます。

AFFINGER6(アフィンガー6)ではヘッダーカードを4つ設定して表示させることができます。

「AFFINGER管理」→「ヘッダー下/おすすめ」

ヘッダーカードの設定項目

ヘッダーカードの項目に入力することで、簡単にヘッダーカードを表示させることができます。

各設定項目について解説していきます。

AFFINGER6:ヘッダーカード入力項目
AFFINGER6:ヘッダーカード入力項目
①:画像のアップロードヘッダーカード画像をアップロード
②:テキストヘッダーカードにテキストを表示
③:サブテキストヘッダーカードにサブテキストを表示
④:リンク先URLリンクの設定
⑤:PC/スマホ・タブレット表示有無PC/スマホ・タブレットへの表示・非表示の設定
⑥:デザイン画像のぼかしや角丸の設定

①:画像のアップロード

ヘッダーカードの画像をアップロードします。

アップロードする画像は同じサイズを使用するのがお勧めです。

②③:テキスト/サブテキスト

テキストを表示させることができます。

AFFINGER6:ヘッダーカード、テキスト入力欄

テキストを表示させるとこんな感じです。

AFFINGER6:ヘッダーカードにテキストを表示させた表示例

④:リンク先URL

リンク先URLの設定です。

⑤:PC/スマホ・タブレット表示有無

PCに表示させたくない場合、スマホ・タブレットに表示させたくない場合には各項目にチェックを入れてください。

⑥:デザイン

デザインでは次の項目を設定できます。

  • テキストある背景画像をぼかす
  • テキストのある背景画像を暗くする
  • 角丸にする
  • スマホ閲覧時のおすすめヘッダーカードの高さを倍に

背景画像をぼかすとこんな感じです。

AFFINGER6:ヘッダーカードの背景画像をぼかした表示例

背景画像を暗くするとこんな感じです。

AFFINGER6:ヘッダーカードの背景画像を暗くした表示例

角丸にするとこんな感じです。

AFFINGER6:ヘッダーカードの背景画像を角丸にした表示例

AFFINGER6(アフィンガー6)でヘッダーカードを表示させる方法は以上になります。

AFFINGER6(アフィンガー6)では他にもヘッダー下にスライドショーを表示させたりもできます。

スライドショーを表示させる方法は別記事で紹介していますので、参考にしてみてください。

こちらの記事もチェック!

AFFINGER6でヘッダー下にスライドショーを設置する方法
AFFINGER6でヘッダー下にスライドショーを設置する方法

2025/5/17    

この記事では、下の画像のようにヘッダー下にスライドショーを設置する方法を初心者向けに解説しています。 ヘッダー下にスライドショーを設置する方法 「AFFINGER管理」→「ヘッダー下/おすすめ」→「サ ...

AFFINGER6の使い方については、このブログで詳しく解説しています。

AFFINGER6の使い方【まとめ】-初心者向けガイド-
AFFINGER6の使い方【まとめ】-初心者向けガイド-

2025/5/14    

AFFINGER6の使い方に関するまとめ記事です。 記事数が多いので、知りたい内容を目次から探してみてください。 設定に関する使い方 インストールの方法 AFFINGER6を使えるようにするまでの手順 ...

【知っておくべき!】AFFINGER6の購入方法と購入プランの選び方-⑤種類から最適を選択!

2025/5/16    

AFFINGER6を使ってみたい! という方に ちょっと待ってください! AFFINGER6を購入する際には複数のプランが存在しますので、自分の取り組み方に合った購入方法を選択した方がお得に購入できま ...

AFFINGER6で出来ること【まとめ】-AFFINGER6を徹底解説
AFFINGER6で出来ること【まとめ】-AFFINGER6を徹底解説

2025/5/14  

AFFINGER6を使ってみたい!気になる!という方向けに AFFINGER6ってどんなテーマ? AFFINGER6でどんなことができるの? AFFINGER6を使うにはどうすればいいの? といった内 ...

(通常版)AFFINGER6と(上位版)AFFINGER6 EXの違い【まとめ】
(通常版)AFFINGER6と(上位版)AFFINGER6 EXの違い【まとめ】

2025/5/16    

AFFINGER6を購入しようと検討している方や既に通常版のAFFINGER6を使用している方で、その違いが気になる方も多いと思います。 そこで、この記事では(通常版)AFFINGER6と(上位版)A ...

AFFINGER6は初心者が購入しても大丈夫?-初心者にお勧めの理由
AFFINGER6は初心者が購入しても大丈夫?-初心者にお勧めの理由

2025/5/16    

WordPressの有料テーマであるAFFINGER6(アフィンガー6)は、「収益化に強い」と評判のテーマです。 ただ、初めてブログを始める初心者にとっては「本当に使いこなせるの?」と不安もありますよ ...

【本音レビュー】AFFINGER6の評判は?実際に使ってわかったメリット・デメリット
【本音レビュー】AFFINGER6の評判は?実際に使ってわかったメリット・デメリット

2025/5/16    

「収益化に強いWordPressテーマ」として有名なAFFINGER6(アフィンガー6)。 ブロガーやアフィリエイターに人気ですが、「評判は本当?」「使いこなせるの?」と不安に感じる方も多いのではない ...

AFFINGER6 vs SWELL|どっちを選ぶべき?徹底比較!
AFFINGER6 vs SWELL|どっちを選ぶべき?徹底比較!

2025/5/9    ,

この記事では、迷ってしまうことの多いテーマ選びについて今回は『SWELL』と『AFFINGER6』の比較ガイドをお届けします。 現在、シェアNo,1の有料テーマである『SWELL』と有名ブロガーさんも ...