●アフィンガー6のヘッダーカードのカスタマイズ方法を教えてほしい。
今回はこのようなお悩みにお答えします。
こんな方におすすめ
- AFFINGER6を使用している方
- AFFINGER6でヘッダーカードにリンクをつける方法を知りたい方
- AFFINGER6初心者
本記事の信頼性
今回設定するヘッダーのリンクカードは下記です。
カード型リンク例
AFFINGER6では最大4枚までリンクカードを設定できます。AFFINGER6利用者の方は多く利用していますが、サイト全体がおしゃれに見えたりメリットが多いですよね。
とはいえAFFINGERやブログ初心者だと設定方法がわからないということがあると思います。
今回はAFFINGER6のヘッダーカード設定方法を画像を使って解説していきます。
なお、AFFINGERを始めとしたブログテーマをまだ導入してない方は【2025年1月版】WordPressブログのおすすめテーマ11選【無料版と有料版を徹底比較】でまとめているので参考にしてみて下さい。
それでは早速始めていきます。
目次
AFFINGER6でヘッダーカードを作る方法
AFFINGER6でヘッダーカードを作る方法
それでは早速AFFINGER6のヘッダーカードを作る方法について解説します。
まずはWordPressの管理画面からAFFINGER管理をクリックします。
AFFINGER5管理画面へアクセス
するとAFFINGER管理画面に移るので、項目の中から『おすすめ記事一覧』を選択します。
AFFINGER5管理画面：おすすめ記事一覧
上記のような画面になりました。
後はおすすめヘッダーカードの中で下記3項目を入力すればOKです。
おすすめヘッダーカード入力項目
- 画面のアップロード
- テキスト
- リンク先URL
テキストは画像の上に表示されるので、お好みで入力しましょう。リンク先URLはブログ記事のURLを入力すればOKです。
後は画面下の『SAVE』をクリックして保存しましょう。
AFFINGER6のヘッダーカードとカテゴリーページをリンクさせる方法
AFFINGER6のヘッダーカードとカテゴリーページをリンクさせる方法
次にヘッダーカードとカテゴリーページをリンクさせる方法についても解説します。カテゴリーページはこんな感じですね。
カテゴリーページ例
具体的に言うと上記画像のようなカテゴリーページとヘッダーカードをリンクさせる方法です。
こちらも設定方法は超簡単。まずはカテゴリーページのURLをコピーします。
カテゴリーページのURLをコピーする
後は先ほどと同じヘッダーカード設定のページでコピーしたURLを入力するだけです。
AFFINGER6ヘッダーカードのカスタム方法
AFFINGER6ヘッダーカードのカスタム方法
これでAFFINGER6のヘッダーカードの設定は完了できました。
このヘッダーカードは細かなカスタム可能なのでやり方をご紹介します。
ヘッダーカードのカスタマイズについて
カスタマイズは下記5つになります。
ヘッダーカードのカスタム方法
- ①サイト全体に表示する（デフォルトはTOPページのみ）
- ②『PC』、『スマホ・タブレット』の表示・非表示を選択
- ③ヘッダーカードの表示方法を選択（3パターン）
- ④角丸にする
- ⑤スマホ閲覧時（959px以下）のおすすめヘッダーカードの高さを倍に
1つずつ見ていきましょう。
その①：サイト全体に表示する（デフォルトはTOPページのみ）
ヘッダーカードのカスタマイズ①サイト全体に表示する（デフォルトはTOPページのみ）
ヘッダーカードをサイト全体に表示するかしないかを選択できます。
サイト全体に表示するにチェックを入れると個別記事にもヘッダーカードの表示がされるようになります。
当ブログはトップページのみの表示にしています。
その②：『PC』、『スマホ・タブレット』の表示・非表示を選択
ヘッダーカードのカスタマイズ②『PC』、『スマホ・タブレット』の表示・非表示を選択
各ヘッダーカードごとに『PC』、『スマホ・タブレット』の表示・非表示を選択できます。
上記画面のようにヘッダーカードごとに選択できるので、表示させたくない場合はチェックを入れておきましょう。
当ブログは『PC』、『スマホ・タブレット』ともに表示の設定にしています。
その③：ヘッダーカードの表示方法を選択（3パターン）
ヘッダーカードのカスタマイズ③ヘッダーカードの表示方法を選択（3パターン）
ヘッダーカードの表示方法は下記3パターンから選択できます。
デフォルト
デフォルト例
テキストのある背景画像をぼかす
テキストのある背景画像をぼかした例
テキストのある背景画像を暗くする
テキストのある背景画像を暗くした例
この3パターンから選択できます。
当ブログはデフォルトか背景画像を暗くするかのどちらかを使い分けています。
その④：角丸にする
ヘッダーカードのカスタマイズ④角丸にする
ヘッダーカードの隅を丸くすることもできます。
ヘッダーカード通常
ヘッダーカード：角を丸くした場合
こんな感じですね。
当ブログは通常のヘッダーカードを設定しています。
その⑤：スマホ閲覧時（959px以下）のおすすめヘッダーカードの高さを倍に
ヘッダーカードのカスタマイズ⑤スマホ閲覧時（959px以下）のおすすめヘッダーカードの高さを倍に
スマホ閲覧時のヘッダーカードの高さを変えることもできます。
ヘッダーカードの高さ通常時
ヘッダーカードの高さ2倍時
こんな感じですね。当ブログはヘッダーカードの高さ倍にしています。
まとめ：AFFINGER6（アフィンガー）でヘッダーカードを設定してサイトをおしゃれにしよう
まとめ：AFFINGER6（アフィンガー）でヘッダーカードを設定してサイトをおしゃれにしよう
今回はAFFINGER6のヘッダーカードの設定方法について解説しました。
今回紹介したようにアフィンガー5はブログ初心者でもおしゃれなサイトを簡単に作ることができるので、ぜひチェックしてみてください。
本記事が参考になれば幸いです。最後まで読んで頂きありがとうございました。
それでは本日はこの辺りで。
関連記事AFFINGER6の特典14個付きレビュー！評判やメリット・デメリットを徹底解説
関連記事AFFINGER6でサイドバーに目次を表示する方法【ブログ初心者向け】