こんな悩みに答えます
本記事では、AFFINGER5（アフィンガー５）のヘッダーカードの設定方法について、解説しています。（以下キャプチャ）
最終完成イメージ
AFFINGER5（アフィンガー５）ヘッダカード
アフィンガー５のヘッダカードの表示は最大４つまで設定することができます。
メモ
AFFINGER5のヘッダーカードは、トップページの目立つ位置に表示できるため、見てもらいたいページに誘導させるのに有効的な設定です。
ヘッダーカードの設定自体は、５分ほどで完了できますので、少しの間お付き合い頂けますと幸いです。
それでは、早速始めていきます。
[toc]
AFFINGER5のヘッダーカード設定手順
まずは、Wordpressの管理画面から、「AFFINGER5 → AFFINGER5管理 → おすすめ記事一覧」をクリックします。
おすすめ記事一覧のページが開きましたら、「おすすめのヘッダーカード」の中を設定していきます。
「AFFINGER5 → AFFINGER5管理 → おすすめ記事一覧 → おすすめのヘッダーカード」
おすすめのヘッダーカードで設定していく項目は、
- ①画像のURL： 「アップロード」のボタンを押して、メディアから表示させたい画像を選択
- ②テキスト： 画像の上に表示させたいテキストを入力
- ③リンク先URL： 遷移させたいページのURLを入力
になります。
AFFINGER5ヘッダーカードその他基本設定
ここまでヘッダーカードの設定方法について紹介しました。
次にヘッダーカードのその他の設定について解説します。
サイト全体の表示
サイト全体に表示にする（デフォルトはTOPのみ）
- チェックあり：TOPページ以外の記事ページにも表示
- チェックなし：TOPのみヘッダーカードを表示
PC、スマホ・タブレットの出し分け
PC, スマホ・タブレットの表示出し分け
各端末でのヘッダーカードの表示の出し分けができます。両方ともチェックしなければ、PC、スマホ・タブレット共にヘッダーカードが表示されます。
デザイン設定
ヘッダーカードのデザイン設定
以下、表示例のキャプチャです。
「テキストのある背景画像をぼかす」「角丸にする」
「テキストのある背景画像をぼかす」「角丸にする」
「テキストのある背景画像を暗くする」「角丸にする」
「テキストのある背景画像を暗くする」「角丸にする」
「デフォルト」「角丸にする」
「デフォルト」「角丸にする」
「スマホ閲覧時（959px以下）のおすすめヘッダーカードの高さを倍に」にチェックでスマホのヘッダーカードの高さが変わります。
細かなヘッダーカードの設定が完了したら「save」をクリックで完了です。
AFFINGER5のヘッダーカードの文字色を変更する方法
ヘッダーカードの文字色を白ではなく、好きな色に変更したい場合の設定方法について、紹介します。
CSSを編集するので編集前に念のためバックアップをしておくと安全です
※バックアップのやり方については以下記事を参考にしてみてください。
» UpdraftPlusプラグインを使ってバックアップするやり方
「WordPress管理画面 → 外観 → カスタマイズ → 追加CSS」を開き「追加CSS」の中に以下のCSSコードを貼り付けます。
.st-cardlink-card.has-bg.is-darkable .st-cardlink-card-text {
z-index: 2;
color:brown;
}
「WordPress管理画面 → 外観 → カスタマイズ → 追加CSS」
下記の黄色線の「color:」のコロンの後ろに好きな色の指定をしてあげます。
今回は「brown」で指定していますので、テキスト色は茶色に変わります。
参考までに、CSSの色（color）の種類を一部ですが、掲載しておきます。
カラーの種類
- gray → 灰色
- silver → 銀
- blue → 青
- yellow → 黄色
- red → 赤
- green → 緑
AFFINGER5 ヘッダーカードの設定に役立つツール
最後にヘッダーカードに役立つツールを紹介します。
O-DAN（画像フリー素材）
『O-DAN』は高品質な画像を無料でダウンロードできます。
その他フリー素材や画像を無料でダウンロードできるサイトを「ブログで使えるおすすめのフリー写真・イラスト素材」で紹介していますので、参考にしてみて下さい。
TinyPNG（画像圧縮ツール）
画像の表示速度は早いことに越したことはないので、念のため画像の圧縮化をしておきましょう。
『TinyPNG』は、画質維持をしながらも画像圧縮を行えるサイトです。
その他『Optimizilla』も画像圧縮することができ、１度に20個までファイルをアップロードでき個人的に使いやすいと思います。
まとめ：AFFINGER5ヘッダーカードの設定&カスタマイズ方法
冒頭でも紹介しましたようにヘッダーカードを設定することで、ページにきた時に目につきやすいエリアなので、訴求させてページに誘導させたい時なんかに役立ちます。
また、ページの離脱を防ぐ役割にもなりますので、読者を長くページに滞在させたい時にも有効です。
ぜひ、AFFINGER5で自分オリジナルのヘッダーカードを設定してみて下さい。
今回は以上です。
ここまで読んでいただきありがとうございました！