AFFINGER6カスタマイズ

AFFINGER6『ヘッダーカード』の設置&カスタマイズ方法【画像サイズ1200×630px】

\当サイト限定豪華7特典付き/

AFFINGER5(WING)をみる

/今すぐ申し込む\

AFFINGER6『ヘッダーカード』の設置&カスタマイズ方法【画像サイズ1200×630px】
悩む人

  • AFFINGER5とかAFFINGER6を使っているブロガーさんのヘッダーにオシャレな画像リンクはどうやったらできるの?
  • アフィンガー6のヘッダーカードってどうやって設定するの?
  • ヘッダーカードの画像を暗くしたり、曇らせたりカスタマイズする方法は?
  • ヘッダーカードに設定する画像のサイズは?ピクセル(px)は?

こういった疑問にお答えします。

AFFINGER5やAFFINGER6にはヘッダーカードという下のような画像リンクをヘッダー(サイト上部)に設置できます。

テキストリンクやブログカードと同じで、ヘッダーカードはクリックすると指定した任意のURLへアクセスできます

WordPressの無料テーマや一部の有料テーマだとヘッダーカードを作るのはけっこう大変ですが、AFFINGER6を使えば一瞬でヘッダーカードを設置できますよ

AFFINGER6でヘッダーカードを設定する方法は下の手順です。

  • 『WordPressダッシュボード』→『AFFINGER管理』→『ヘッダー下/おすすめ』を開く
  • ヘッダー/おすすめの『ヘッダーカード』の項目を探す
  • ヘッダーカードを設定したい枚数だけ『画像』『テキスト』『リンク先URL』を入力してSaveする(最大4枚まで)

管理人ハチ
ちなみにヘッダーカードに設定する画像サイズは1200×630pxがおすすめです。

この記事はAFFINGER5&AFFINGER6歴1年強の私が画像や動画を豊富に使って、ヘッダーカードの設置方法からカスタマイズ方法までを解説します。

この記事では下の内容を解説します。

  • AFFINGER6のヘッダーカード設定方法
  • ヘッダーカードのオシャレなカスタマイズ方法

この記事を読んであなたのブログにもヘッダーカードを設置して読者に誘導したい収益化記事や読んでもらい記事を目立つ場所に設置してアクセスアップを目指しましょう。

管理人ハチ
憧れのあの人のブログにも近づけるかも!?

当サイト限定豪華7特典

今すぐゲット

AFFINGER6のヘッダーカード設置・設定方法

AFFINGER5やAFFINGER6でヘッダーカードを設定するには、AFFINGER管理の『ヘッダー下/おすすめ』の『ヘッダーカード』を設定するだけで簡単に設置できます。

  • 『WordPressダッシュボード』→『AFFINGER管理』→『ヘッダー下/おすすめ』を開く
  • ヘッダー/おすすめの『ヘッダーカード』の項目を探す
  • ヘッダーカードを設定したい枚数だけ『画像』『テキスト』『リンク先URL』を入力してSaveする(最大4枚まで)

動画で解説すると下のとおりです。

管理人ハチ
AFFINGER管理の『ヘッダー下/おすすめ』の一番上にヘッダーカードを設定する欄があるので簡単です。

順番に解説していきますね。

『WordPressダッシュボード』→『AFFINGER管理』→『ヘッダー下/おすすめ』を開く

初めに下の流れでAFFINGER管理の『ヘッダー下/おすすめ』を開きましょう。

  • 『WordPressダッシュボード』→『AFFINGER管理』をクリックする
  • AFFINGER管理から『ヘッダー下/おすすめ』をクリックする
WordPressダッシュボードからAFFINGER管理を開いてヘッダー下/おすすめのヘッダーカード設定画面へ移動する
AFFINGER管理の『ヘッダー下/おすすめ』を開く

ヘッダー/おすすめの『ヘッダーカード』の項目を探す

ヘッダー/おすすめの『ヘッダーカード』を探す。(ヘッダー下/おすすめを開くと一番上に表示されます。)

AFFINGER6のヘッダーカードを設定する場所
AFFINGER管理『ヘッダー下/おすすめ』のヘッダーカード設定部分

ヘッダーカードを設定したい枚数だけ『画像』『テキスト』『リンク先URL』を入力して保存する

ヘッダーカードはヘッダーカード1~4まで最大4つまで設定できます。

それぞれのヘッダーカードの設定部分に

  • 画像をアップロード(画像サイズは1200×630pxがおすすめ)
  • テキストを入力
  • リンク先URLに任意のURLを入力

上の設定ができたら保存(Save)したら完了です。

AFFINGER6のヘッダーカードの各種設定方法や入力方法
AFFINGER6のヘッダーカードの設定方法

上記のようにすべて設定が終わると下のようにヘッダーカードが設定できます。

管理人ハチ
AFFINGER6でヘッダーカードを設定するとあなたの記事からトップページを見た読者を『あなたの見せたい記事』へ導線ができますよ。

当サイト限定豪華7特典

今すぐゲット

AFFINGER6ヘッダーカードのカスタマイズ方法

AFFINGER6ヘッダーカードは下のようなカスタマイズができます。

  • ヘッダーカードをサイトすべてに表示させる(デフォルトはトップページのみ表示)
  • ヘッダーカードを「PC」「スマホ・タブレット」に表示しない
  • ヘッダーカード画像を4パターンで表示を切り替える
  • スマホでヘッダーカードの幅を倍にして目立たせる
管理人ハチ
ヘッダーカードのカスタマイズはすべてAFFINGER管理の『ヘッダー下/おすすめ』で変更可能です。

順番にカスタマイズ方法を解説していきます。

ヘッダーカードをサイトすべてに表示させる(デフォルトはトップページのみ表示)

AFFINGER6のヘッダーカードはデフォルトではトップページのみ表示されますが、ヘッダーカードをサイトすべてに表示させるには下の流れでカスタマイズします。

  • 『WordPressダッシュボード』→『AFFINGER管理』→『ヘッダー下/おすすめ』
  • ヘッダーカードの項目から『サイト全体に表示する』にチェックを入れて保存(Save)する
AFFINGER6(アフィンガー6)のヘッダーカードをサイト全体に表示する方法
AFFINGER管理『ヘッダー下/おすすめ』からAFFINGER6(アフィンガー6)のヘッダーカードをサイト全体に表示する方法
  • 『サイト全体に表示する』にチェックを入れると『トップページ』『固定ページ』『記事ページ』などすべてのページにヘッダーカードが表示されます。
  • 『サイト全体に表示する』からチェックを外すと、『トップページ』のみにヘッダーカードが表示されます。

ヘッダーカードを「PC」「スマホ・タブレット」に表示や非表示のカスタマイズ方法

AFFINGER6(アフィンガー6)のヘッダーカードは『PCのみに表示』させたり、『スマホやタブレットだけに表示』させたりもできます。

デフォルトでは、『PC』も『スマホ・タブレット』も両方にヘッダーカードが表示されます。

  • 『WordPressダッシュボード』→『AFFINGER管理』→『ヘッダー下/おすすめ』
  • ヘッダーカード1~4の各項目の下に『PCに表示しない』『スマホ・タブレットに表示しない』あり
  • 表示したくない方にチェックを入れて保存。両方とも表示したいならチェックを入れなくてOK。
AFFINGER6(アフィンガー6)のヘッダーカードをスマホ・タブレット・PCでの表示や非表示の設定方法
AFFINGER管理の『ヘッダー下/おすすめ』からPCやスマホ・タブレットの表示非表示の切り替え可能

ヘッダーカード画像を3パターンで表示を切り替える

AFFINGER6(アフィンガー6)のヘッダーカード画像は下の3つのパターンのデザイン切り替えができます。

  • デフォルト(画像をそのまま表示する)
  • ぼかす
  • 暗くする
  • 角丸にする(上の3つのデザインと併用可能)

それぞれのヘッダーカード画像のカスタマイズ方法は下の手順で簡単にできます。

  • 『WordPressダッシュボード』→『AFFINGER管理』→『ヘッダー下/おすすめ』
  • デザインから任意の背景画像設定にチェックを入れて保存(Save)する

デフォルトは下のような画像になります。

AFFINGER6(アフィンガー6)ヘッダーカード画像をデフォルト設定にする方法
AFFINGER6(アフィンガー6)ヘッダーカード画像をデフォルト設定

『テキストのある背景画像をぼかす』設定のヘッダーカードは下のようになります。

AFFINGER6(アフィンガー6)ヘッダーカード画像を『テキストのある背景画像をぼかす』に設定する方法
AFFINGER6(アフィンガー6)のヘッダーカード『テキストのある背景画像をぼかす』の設定

『テキストのある背景画像を暗くする』設定のヘッダーカードは下のようになります。

AFFINGER6(アフィンガー6)ヘッダーカード画像を『テキストのある背景画像を暗くする』に設定する方法
AFFINGER6(アフィンガー6)のヘッダーカード『テキストのある背景画像を暗くする』の設定

『角丸にする』設定のヘッダーカードは下のようになります。

AFFINGER6(アフィンガー6)ヘッダーカード画像を『角丸にする』に設定する方法
AFFINGER6(アフィンガー6)のヘッダーカード『角丸にする』の設定

スマホのみヘッダーカードの高さ幅を倍にして目立たせる

AFFINGER6(アフィンガー6)でヘッダーカードの高さ幅をスマホのみ倍にして表示する手順は下のとおりです。

  • 『WordPressダッシュボード』→『AFFINGER管理』→『ヘッダー下/おすすめ』
  • デザインから『 スマホ閲覧時(959px以下)のおすすめヘッダーカードの高さを倍に』にチェックを入れて保存(Save)する
AFFINGER6(アフィンガー6)のヘッダーカードの高さをスマホのみ倍にする方法
AFFINGER6(アフィンガー6)のヘッダーカードの高さをスマホのみ倍にする方法

当サイト限定豪華7特典

今すぐゲット

AFFINGER6(アフィンガー6)のヘッダーカード用の無料画像サイト3選

AFFINGER6(アフィンガー6)のヘッダーカード用に使えるおしゃれで高品質な画像サイトを3つ紹介しておきます。

管理人ハチ
私が愛用しているのはO-DANです。高品質な画像がたくさんあるので一度調べてみてください。日本語検索も自動で英語翻訳検索してくれるのがいいところ。

画像サイズ変更やトリミング、圧縮におすすめなツール3選

画像サイズ変更やトリミング、画像の圧縮におすすめなツールも合わせて3つ紹介しておきます。

  • iLOVEIMG(画像編集をブラウザ上で行えるサイト)
  • canva(図解からトリミングまで行えるサイト)
  • Voralent Antelope(画質を維持しつつ画像圧縮ができるツール)
管理人ハチ
ブログ歴1年のわたしは主に上の3つだけで画像編集を完結させています。

当サイト限定豪華7特典

今すぐゲット

AFFINGER6(アフィンガー6)ヘッダーカードのテキスト色を変更方法

AFFINGER6(アフィンガー6)ヘッダーカードのテキスト色を変更する方法は下の流れできます。

  • 『WordPressダッシュボード』→『外観』→『カスタマイズ』→『追加CSS』
  • 下記のCSSコードを追加して保存する

上記の『color:○○;』の○○に下の好きな色を指定して貼り付けるだけでOKです。

  • gray:灰色
  • silver:銀
  • blue:青
  • yellow:黄色
  • red:赤
  • green:緑
管理人ハチ
例えば、灰色にしたいなら『color:gray;』に書き換えましょう。

追加CSSを編集するので不具合やバグが発生する恐れがあります。必ずバックアップを取ってから行ってください。

\当サイト限定豪華7特典付き/

AFFINGER5(WING)をみる

/今すぐ申し込む\

AFFINGER5おすすめランキング

AFFINGER5(アフィンガー5)

通常版のAFFINGER5(アフィンガー5)で価格は14,800円。今なら期間限定で4000円相当のプラグインも無料で付いてきます。

また当サイト限定特典も多数セットにしているので、今すぐにでも稼ぎたい、結果を出したい人はまずこの通常版のAFFINGER5(アフィンガー5)を試してみましょう。

AFFINGER PACK3(WING対応)

AFFINGER5(アフィンガー5)と『AFFINGERタグ管理マネージャー3』『ABテストプラグイン』2つのプラグインのセットになったオールインワンパックで価格は39,800円。単品で買うより13,600円お得!

どの記事からどのように読者が行動しているのかが丸見えになり導線を貼りやすくなるので費用対効果が高いセットになります。

  • この記事を書いた人

hachi

副業ブロガー / 現役看護師【経歴】国立大学▶︎公務員(保健師)▶︎縦社会と副業禁止で退職決意▶︎精神科看護師▶︎4サイト運営し月4万円収益まで到達(2021年5月現在)▶︎●嫁1太郎1姫と暮らす

-AFFINGER6カスタマイズ