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