ワードプレス

アフィンガーでヘッダーカードを作る|設定と表示の方法を徹底解説

AFFINGERで"ヘッダーカード"を設定する方法をご紹介します。

ヘッダーカードを入れることで、以下のようにサイトが変化します。

アフィンガーでヘッダーカードを作る|設定と表示の方法を徹底解説
アフィンガーでヘッダーカードを作る|設定と表示の方法を徹底解説

ヘッダーカードを設置することで、「サイトがおしゃれに華やかになる」「サイト訪問者に読んでもらいやすくなる」というメリットがあります。

作成方法【簡易版】

  • どのようなヘッダーカードを作るか、構想を練る
  • ヘッダーカードの背景画像を作る(canvaなど)
  • ヘッダーカードの挿入と設定(デザインや文字入など)
  • ヘッダーカードの背景を変更する(必要な場合のみ)

どのようなヘッダーカードを置く?(ヒント)

ヘッダーカードは、ページの上部に設置されるものですので、サイト訪問者(読者)に読んでほしい記事を置きましょう。

ヘッダーカードの上限数は4つです。

  • 『おすすめの本BEST10』
  • 『ホラー映画特集』
  • 『U-NEXTで動画を見よう』

など、読んでもらいたい記事を書いて、置いてください。

管理人の場合、サイトマップの投稿を書き、各記事のまとめにしました。詳細は、当サイトヘッダーカードを覗いてみてください!

また、記事だけでなく、カテゴリーを置いてもいいですね。

ヘッダーカードの画像を作成

背景になる画像を用意しましょう。私が愛用しているフリー素材サイトはO-DANです。高品質な画像がたくさんあり、日本語検索も可能です。

Canvaなどの画像作成ツールで画像を作ります。

このときに、ヘッダーカードタイトルに予め「文字あり」で作成しても良いです
好きなフォントやカラーでタイトルやキャッチフレーズが記入できるので、より個性的なヘッダーカードにしたい方はにおすすめです。

アフィンガーでヘッダーカードを作る|設定と表示の方法を徹底解説

ヘッダーカードのタイトルやキャッチフレーズは、後ほどアフィンガー側で設定することもできますので、画像のみでももちろんOKです。ただし、アフィンガーで文字入れをした場合、よからぬところで文字が改行してしまう場合がありますので、ご注意ください。

アフィンガーでヘッダーカードを作る|設定と表示の方法を徹底解説

ヘッダーカードの最適サイズ

ヘッダーカード推奨サイズ

  • カード1枚の場合:2400px ×600px ( 4:1 )
  • カード2枚の場合:1200px ×300px ( 4:1 )
  • カード3枚の場合:1200px × 650px ( 1.8:1 )
  • カード4枚の場合:1200px × 650px ( 1.8:1 )

あくまで「推奨」ですので、お好みでサイズ変更してください。

アフィンガーでヘッダーカードを作る|設定と表示の方法を徹底解説
アフィンガーでヘッダーカードを作る|設定と表示の方法を徹底解説
アフィンガーでヘッダーカードを作る|設定と表示の方法を徹底解説

3枚以上の場合、縦サイズを小さく(300pxなど)しますと、よりスッキリしたヘッダーカードになります。

アフィンガーでヘッダーカードを作る|設定と表示の方法を徹底解説

ヘッダーカードを設置する

それでは、作成したヘッダーカードを設置していきます。

ダッシュボード > AFFINGER管理 > ヘッダー下/おすすめ  >「ヘッダーカード

アフィンガーでヘッダーカードを作る|設定と表示の方法を徹底解説

画像設置

画像のURL:」に、作成したヘッダーカード画像をアップロードしてください。

アフィンガーでヘッダーカードを作る|設定と表示の方法を徹底解説

リンク設置

リンク先URL:」に、置きたいページのリンクを入力してください。

アフィンガーでヘッダーカードを作る|設定と表示の方法を徹底解説

タイトルの入力

  • テキスト…タイトル
  • サブテキスト…キャッチフレーズ

ヘッダーカードに文字入れをしていないかたは、「テキスト:」にタイトルを入力します。テキストは全角で10文字以内に収めましょう。

キャッチフレーズとして「サブテキスト」も入力できます。「テキスト」の下に入力されて、小さな文字サイズになります。

アフィンガーでヘッダーカードを作る|設定と表示の方法を徹底解説

サブテキストは全角で15文字以内に収めましょう。

キャッチフレーズをタイトルの上の表示したい場合は、以下のコードを「テキスト」のところに入力してください。

<span class="st-h-copy">キャッチフレーズ</span>タイトル
アフィンガーでヘッダーカードを作る|設定と表示の方法を徹底解説

ここまで完了したら、"Save"ボタンをクリックして、保存してください。

ヘッダーカードのデザインをカスタマイズ

お好みでヘッダーカードのデザインを変更できます。

この章では全て、ダッシュボード > AFFINGER管理 > ヘッダー下/おすすめ  >「ヘッダーカード」での操作です。

ヘッダーカードをサイト全体に表示する

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

ヘッダーカードの項目から『サイト全体に表示する』にチェックを入れて、保存(Save)してください。

アフィンガーでヘッダーカードを作る|設定と表示の方法を徹底解説

表示する範囲を決める

ヘッダーカード毎に表示する範囲を指定することができます。

PCに表示しない」「スマホ・タブレットに表示しない」をチェックをいれることで設定できます。お好みで設定をしてください。

アフィンガーでヘッダーカードを作る|設定と表示の方法を徹底解説

デフォルト

そのまま表示されます。

アフィンガーでヘッダーカードを作る|設定と表示の方法を徹底解説

 テキストのある背景画像をぼかす

画像がぼやけます。

テキストのある背景画像を暗くする

画像が暗くなります。

アフィンガーでヘッダーカードを作る|設定と表示の方法を徹底解説

角丸にする

画像の角が丸まります。

アフィンガーでヘッダーカードを作る|設定と表示の方法を徹底解説

スマホ閲覧時(959px以下)のおすすめヘッダーカードの高さを倍に

ヘッダーカードを959px以下のスマホで見た時、表示サイズの設定ができます。

アフィンガーでヘッダーカードを作る|設定と表示の方法を徹底解説

全て入力したら必ず『SAVE』を押して保存をお忘れなく

ヘッダーカードの背景を変える

ヘッダーカードの背景は、カスタマイズ画面で変更できます。

ダッシュボード > 外観 > カスタマイズ >  基本エリア設定 > ヘッダーカードエリア

背景色を変える

"色を選択"よりヘッダーカードエリアの背景色を変更できます。

アフィンガーでヘッダーカードを作る|設定と表示の方法を徹底解説

背景画像を設定する

"画像を選択"よりヘッダーエリアの背景画像を設定できます。

サイズは、2400px ×600px ( 4:1 )推奨です。

アフィンガーでヘッダーカードを作る|設定と表示の方法を徹底解説

背景画像設置の際に、綺麗に表示されなければ、「背景画像を繰り返さない」「背景画像を幅100%のレスポンシブにする」にチェックをいれてみてください。

背景画像を幅100%のレスポンシブにする

以上で、ヘッダーカードを設定する方法を完了です。

お疲れ様でした。

関連記事

アフィンガー|「目次に戻る」をスマホの固定フッターメニューの中に入れる
アフィンガー|「目次に戻る」をスマホの固定フッターメニューの中に入れる

2022/9/2

今やスマホでサイトを閲覧することが多いです。 「興味あるところだけ読みたい」「さっき読んだところをもう一度確認したい」というニーズが発生することは、往々にしてあります。そのときにあると便利なのが「目次 ...

UpdraftPlusで自動バックアップから復元方法を解説|保存先はGoogle ドライブ
UpdraftPlusで自動バックアップから復元方法を解説|保存先はGoogleドライブ

2022/8/28

UpdraftPlusは、WordPressのデータをバックアップ・復元できるプラグインです。 WordPressで構築したウェブサイトのデータベース、プラグイン、テーマ、アップロードファイル、wp- ...

アフィンガーでヘッダーカードを作る|設定と表示の方法を徹底解説
アフィンガーでヘッダーカードを作る|設定と表示の方法を徹底解説

2022/8/23

AFFINGERで"ヘッダーカード"を設定する方法をご紹介します。 ヘッダーカードを入れることで、以下のようにサイトが変化します。 ヘッダーカードを設置することで、「サイトがおしゃれに華やかになる」「 ...

ブログの作り方|当ブログのサイトマップ

2022/8/24

ブログを始めるにあたり、おすすめのサーバーやテーマ、またブログをはじめたら押さえておくべき設定などの記事をまとめました。 Contentsおすすめサーバー「スターサーバー」スターサーバーのメリット・デ ...

Contact Form 7の問い合わせフォーム作成方法と使い方を紹介
Contact Form 7の問い合わせフォーム作成方法と使い方を紹介

2022/8/28

ブログをはじめたら必ず導入するべき、問い合わせフォームのプラグイン「Contact Form 7」。作成者は日本人ですので、公式サイトは日本語で解説されています。 Contact Form 7公式サイ ...

スターサーバーのメリット・デメリットと、性能や料金を徹底紹介
スターサーバーのメリット・デメリットと、性能や料金を徹底紹介

2022/8/28

月額138円~という格安でありながら、高性能サーバーであると言われているスターサーバー。 日本マーケティングリサーチ調べでは、 WordPress 利用者注目度・ブロガー&アフィリエ ...

スターサーバーの契約方法・設定方法を徹底解説
スターサーバーの契約方法・設定方法を徹底解説

2022/8/28

この記事ではスターサーバーを使い、ワードプレスの設定方法を初心者でもわかりやすいようにお伝えします。 スターサーバーのメリット・デメリットについては、こちらの記事をご参照ください。 スターサーバーの有 ...

アフィンガー|スマホのヘッダーやメニューをおしゃれに設定する方法
アフィンガー|スマホのヘッダーやメニューをおしゃれに設定する方法

2022/8/20

当ブログでも愛用中の人気WordPressテーマ「ACTION AFFINGER6」にて、スマホのヘッダーをおしゃれにする方法を、ブログ初心者さん向けに1からわかりやすく解説していきます。 今回紹介す ...

投稿タグを選択式(チェック)にする|らくらくタグ設定
投稿タグを選択式(チェック)にする|らくらくタグ設定

2022/8/25

投稿記事の作成編集ページのタグは、フリー記述方式なので、タグの入れ漏れがある可能性があります。 管理人も、どんなタグ前に作ったっけ?と、確認しながら入力していました。 しかしながら、そのような面倒な作 ...

AFFINGERでヘッダーを個性的でおしゃれにする方法
AFFINGERでヘッダーを個性的でおしゃれにする方法

2022/8/28

有料テーマのAFFINGERを購入したからには、デザインに優れた機能をつかい、かっこいいブログにしたいところです。 今回は、AFFINGER6のヘッダーエリアと、ヘッダーメニューエリアを個性的でおしゃ ...

ウィジェット表示・非表示をカスタマイズ!Widget Optionsの使い方徹底解説
ウィジェット表示・非表示をカスタマイズ!Widget Optionsの使い方徹底解説

2022/8/25

ワードプレスでウィジェットを使っていると、「トップページには表示したくない」「この投稿ページにのみ表示させたい」といった要望が出てくるものです。 「Widget Logic」というプラグインも便利です ...

アフィンガーでサイドバートップに表示される新着記事を非表示にする

2022/8/28

管理人はブログやアフィリエイトで効果的に収益を上げる為の機能が豊富に備わっているWING(AFFINGER6)を使用しています。 アフィンガーは機能が充実していて、知識がなくてもデザイン性が高いブログ ...

GoogleアドセンスをAMP化して、アフィンガーに設置する方法を徹底解説
GoogleアドセンスをAMP化して、アフィンガーに設置する方法を徹底解説

2022/8/20

AMP 用ページでは通常ページの広告コードをそのまま貼り付けるのは NG です。AMP 用ページには AMP 用の広告コードを取得して貼り付ける必要があります。 この記事では、Google AdSen ...

アフィンガー6でAMP設定方法をわかりやすく徹底解説|画像付きで説明
アフィンガー6でAMP設定方法をわかりやすく徹底解説|画像付きで説明

2022/8/20

WordPressの有料テーマであるアフィンガー6。 せっかくの有料で購入したテーマを、最大限に活用できていますか? この記事では、アフィンガー6にAMPを設定して、モバイルページを高速化させる方法を ...

reCAPTCHv2を導入してスパム対策 徹底解説します|Invisible reCaptchaを使用
reCAPTCHv2を導入してスパム対策 徹底解説します|Invisible reCaptchaを使用

2022/8/20

reCAPTCHAとは、スパムコメントやメールなどの不正攻撃からWebサイトを保護するために、Googleが提供しているサービスのことです。 サイトを守り、情報の漏洩を防ぐためには必ず導入すべきサービ ...

reCAPTCHAv2とreCAPTCHAv3の違い、どちらを選ぶかがわかる解説
reCAPTCHAv2とreCAPTCHAv3の違い、どっちを選べばよいかがわかる解説

2022/8/20

CAPTCHAは、オンラインユーザーが人間であり、botではないかどうかを判断する、スパム対策のためのプログラムです。 CAPTCHAは「Completely Automated Public Tur ...

reCAPTCHv3を導入してスパム対策 徹底解説します|Invisible reCaptchaを使用
reCAPTCHv3を導入してスパム対策 徹底解説します|Invisible reCaptchaを使用

2022/8/20

reCAPTCHAとは、スパムコメントやメールなどの不正攻撃からWebサイトを保護するために、Googleが提供しているサービスのことです。 サイトを守り、情報の漏洩を防ぐためには必ず導入すべきサービ ...

Contact Form 7でスパム対策
Contact Form 7のスパム対策|クイズ・チェックボックス・禁止ワードを導入する

2022/8/20

WordPressで問い合わせフォームを設置するときに、よく使われているContact Form 7。 しかし、Contact Form 7を使うとき同時に考えないといけないのがスパムメール対策です。 ...

スパムコメント・スパムメール対策を「Akismet」で行う|無料プラグイン
スパムコメント・スパムメール対策を「Akismet」で行う|無料プラグイン

2022/8/20

WordPressでサイトを作った初心者の洗礼、それは「スパムコメント」と「スパムメール」。 管理人にもうざいコメントがついて、うざくて困っていました。 WordPressでのスパムコメントやスパムメ ...

アフィンガーで文字色を変更
アフィンガー| ブロックエディターで文字色をカラフルに変更する方法

2022/8/20

ワードプレスには、ブロックエディタにて文字色を変更する機能が備わっています。 しかしながら、ワードプレスの子テーマ「AFFINGER」を利用した場合、文字色を変更する項目が消えてしまいます。 この状態 ...

このサイトはアフィンガーを使用しています

アフィンガー

WING(AFFINGER6 ver)

デザイン簡単、SEO対策と広告収入UPの機能が標準装備。さらに美しく、パワフルに。「稼ぐ」に特化したテーマ。

WING(アフィンガー6)公式サイト

2022年最新!おすすめレンタルサーバー

月額料金がライトプランで220円〜(税込)なので、コスパよく爆速なサイト運営が可能に!

管理画面は使いやすくなっているので、これからはじめてサイト運営をする方にもおすすめです!

Twitterでも口コミ良好!

スターサーバー公式サイト

-ワードプレス
-, ,