AFFINGER(アフィンガー)

AFFINGER5ヘッダーカードの設定&カスタマイズ方法【5分で設定完了】

2020年7月8日

affinger-header-card

 

悩む人
AFFINGER5(アフィンガー5)のテーマを導入してるサイトでよく見かけるトップページ上のヘッダーカードを表示させるには、どうすればいいのかな...?

 

こんな悩みに答えます

 

本記事では、AFFINGER5(アフィンガー5)のヘッダーカードの設定方法について、解説しています。(以下キャプチャ)

 

最終完成イメージ

AFFINGER5(アフィンガー5)ヘッダカード

 

アフィンガー5のヘッダカードの表示は最大4つまで設定することができます。

 

メモ

AFFINGER5のヘッダーカードは、トップページの目立つ位置に表示できるため、見てもらいたいページに誘導させるのに有効的な設定です。

 

ヘッダーカードの設定自体は、5分ほどで完了できますので、少しの間お付き合い頂けますと幸いです。

 

それでは、早速始めていきます。

 

 

AFFINGER5のヘッダーカード設定手順

 

まずは、Wordpressの管理画面から、「AFFINGER5 → AFFINGER5管理 → おすすめ記事一覧」をクリックします。

 

おすすめ記事一覧のページが開きましたら、「おすすめのヘッダーカード」の中を設定していきます。

 

「AFFINGER5 → AFFINGER5管理 → おすすめ記事一覧 → おすすめのヘッダーカード」

 

 

おすすめのヘッダーカードで設定していく項目は、

 

  • ①画像のURL: 「アップロード」のボタンを押して、メディアから表示させたい画像を選択
  • ②テキスト: 画像の上に表示させたいテキストを入力
  • ③リンク先URL: 遷移させたいページのURLを入力

 

になります。

 

あとは、同じ要領でMax4個までヘッダーカードを表示させることができますので、設定が完了したら「save」をクリックして完了になります。

 

設定お疲れ様でした!
KEI

 

AFFINGER5ヘッダーカードその他基本設定

 

ここまでヘッダーカードの設定方法について紹介しました。

 

次にヘッダーカードのその他の設定について解説します。

 

サイト全体の表示

サイト全体に表示にする(デフォルトはTOPのみ)

 

  • チェックあり:TOPページ以外の記事ページにも表示
  • チェックなし:TOPのみヘッダーカードを表示

 

PC、スマホ・タブレットの出し分け

PC, スマホ・タブレットの表示出し分け

 

各端末でのヘッダーカードの表示の出し分けができます。両方ともチェックしなければ、PC、スマホ・タブレット共にヘッダーカードが表示されます。

 

デザイン設定

ヘッダーカードのデザイン設定

 

以下、表示例のキャプチャです。

 

「テキストのある背景画像をぼかす」「角丸にする」

「テキストのある背景画像をぼかす」「角丸にする」

 

「テキストのある背景画像を暗くする」「角丸にする」

「テキストのある背景画像を暗くする」「角丸にする」

 

「デフォルト」「角丸にする」

「デフォルト」「角丸にする」

 

「スマホ閲覧時(959px以下)のおすすめヘッダーカードの高さを倍に」にチェックでスマホのヘッダーカードの高さが変わります。

 

 

細かなヘッダーカードの設定が完了したら「save」をクリックで完了です。

 

AFFINGER5のヘッダーカードの文字色を変更する方法

 

ヘッダーカードの文字色を白ではなく、好きな色に変更したい場合の設定方法について、紹介します。

 

自分のサイトカラーに合いそうな色があればカスタイズしてみてください
KEI

 

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:」のコロンの後ろに好きな色の指定をしてあげます。

 

color:brown;

 

今回は「brown」で指定していますので、テキスト色は茶色に変わります。

 

参考までに、CSSの色(color)の種類を一部ですが、掲載しておきます。

 

カラーの種類

  • gray → 灰色
  • silver → 銀
  • blue → 青
  • yellow → 黄色
  • red → 赤
  • green → 緑

 

AFFINGER5 ヘッダーカードの設定に役立つツール

 

最後にヘッダーカードに役立つツールを紹介します。

 

  • O-DAN(画像フリー素材)
  • TinyPNG(画像圧縮ツール)

 

O-DAN(画像フリー素材)

 

O-DAN』は高品質な画像を無料でダウンロードできます。

 

ヘッダーカードに入れる画像を探すのにかなり便利なサイトです!
KEI

 

その他フリー素材や画像を無料でダウンロードできるサイトを「ブログで使えるおすすめのフリー写真・イラスト素材」で紹介していますので、参考にしてみて下さい。

 

TinyPNG(画像圧縮ツール)

 

画像の表示速度は早いことに越したことはないので、念のため画像の圧縮化をしておきましょう。

 

TinyPNG』は、画質維持をしながらも画像圧縮を行えるサイトです。

 

その他『Optimizilla』も画像圧縮することができ、1度に20個までファイルをアップロードでき個人的に使いやすいと思います。

 

両サイトとも無料で使えるので、ヘッダーカード画像アップ前に画像圧縮化したい際に使用してみて下さいね。
KEI

 

まとめ:AFFINGER5ヘッダーカードの設定&カスタマイズ方法

 

冒頭でも紹介しましたようにヘッダーカードを設定することで、ページにきた時に目につきやすいエリアなので、訴求させてページに誘導させたい時なんかに役立ちます。

 

また、ページの離脱を防ぐ役割にもなりますので、読者を長くページに滞在させたい時にも有効です。

 

ぜひ、AFFINGER5で自分オリジナルのヘッダーカードを設定してみて下さい。

 

今回は以上です。

 

ここまで読んでいただきありがとうございました!

 

  • この記事を書いた人

keiblog

当ブログは、『シンプルで見やすい記事を発信!』をモットーに「ブログ・WordPress」などWebに関する役立つ情報を発信していきます。【経歴】アメリカ留学▶︎ 2015年ヨーロッパバックパック▶︎Webディレクター就職(歴6年)(コーディング・SEOが好きです!)▶︎ブログ開設

-AFFINGER(アフィンガー)