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

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/12/27    

AFFINGER6(アフィンガー6)では、ヘッダーのすぐ下にスライドショーを表示することができます。 このような感じです トップページに動きのあるデザインを取り入れたい方にとって、非常に便利な機能です ...

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

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

2025/7/8    

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