WORDPRESS

【お洒落】AFFINGER5「ヘッダーカード」の作り方とカスタマイズ方法【WordPressブログ】

AFFINGER5「ヘッダーカード」の作り方とカスタマイズ方法 アイキャッチ



あずきです🐥

このブログでも愛用中のWordPressテーマ「WING(AFFINGER5)」における…

ヘッダーカード

の基本的な作り方について、ブログ初心者さん向けに1から解説していきます

まず「ヘッダーカード」とは、ブログのヘッダーエリアで見かける…

WordPress AFFINGER5「ヘッダーカード」の作り方&カスタマイズ方法 top-01

↑ こういったデザインのこと(PCの場合の一例です)

テキストリンクや画像リンクなどと同様に、クリックするとあらかじめ指定したURLページにアクセスできる仕様です

ブログ全体の見映えも華やかになる!

で、「WING(AFFINGER5)」の場合、このヘッダーカードを…

  • 最大4枚まで設置できる
  • もちろん、カード内に任意のタイトルも指定できる
  • 画像の表示パターンや、PC・スマホにおける表示・非表示の指定
  • 個別記事ページのヘッダーにも表示させるかどうかの指定

このように、細かいカスタマイズ付きで設定できるようになってます

設定方法も超簡単です

ということで、今回は…

  • AFFINGER5における、「ヘッダーカード」の作り方
  • 作成したヘッダーカードの基本的なカスタマイズ方法

この2点にわけて解説していきます

さっそく見ていきましょー🐥

\ 本気で戦うなら /

WING AFFINGER5 バナー 02

―― 検証と改善を重ねた唯一無二のテーマ ――

「稼ぐ」に特化したWordPress テーマ『WING AFFINGER5』

今なら超時短ツール「タグ管理プラグイン(税込4,980円)」を無料配布中!

「WING AFFINGER5」の気に入ってる点・気になる点をガチレビュー アイキャッチ
【愛用】「WING AFFINGER5」って実際どうなの?気に入ってる点・気になる点をガチレビュー【WordPressのおすすめテーマ/専業ブロガー4年目】

続きを見る

WordPressの「タグ管理」とは? アイキャッチ
WordPressの「タグ管理」とは?どれだけブログに必須な機能か、3分で解説【よく使う文章や広告をテンプレート化/一括修正が最強に便利】

続きを見る

 

今回の記事はこちらの章に属しています

WordPressブログガイド 第6章「デザイン」編 

About me

あずきアイコン main-01 背景透過

- 専業ブロガー・フリーランス -

あずき

 

独立4年目 / 元アパレル → 歴10年

 

20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます。 普段はTwitter(@azuki_rinrin)にわりといるので、覗いてもらえると嬉しいです^^

AFFINGER5における「ヘッダーカード」の作り方

WordPressブログ「完全初心者」ガイド 見出し a-01

まずは、WordPress管理画面から…

WordPress AFFINGER5「ヘッダーカード」の作り方&カスタマイズ方法 1-01

↑「AFFINGER5 管理」をクリックし、つづいて左側のメニュー一覧から…

WordPress AFFINGER5「ヘッダーカード」の作り方&カスタマイズ方法 1-02

↑「おすすめ記事一覧」タブをクリックします

「おすすめ記事一覧」の画面が開いたら…

WordPress AFFINGER5「ヘッダーカード」の作り方&カスタマイズ方法 1-03

↑ こちらの「おすすめヘッダーカード」という項目を見ます

「ヘッダーカード1」~「ヘッダーカード4」までの4ブロックにわかれているので、「ヘッダーカード1」の欄から順に設定していきましょう

WordPress AFFINGER5「ヘッダーカード」の作り方&カスタマイズ方法 1-04

↑「アップロード」ボタンをクリックして、ヘッダーカードに使用する「画像」を選択しましょう

つづいて…

WordPress AFFINGER5「ヘッダーカード」の作り方&カスタマイズ方法 1-05

↑ ヘッダーカード上に表示させる任意の「テキスト」を入力します

入力したら、今度は…

WordPress AFFINGER5「ヘッダーカード」の作り方&カスタマイズ方法 1-06

↑ そのヘッダーカードのリンク先となる任意のURLを入力しましょう

ここまでできたら、あとは画面下部の「save」をクリックして保存すればOKです

同じ流れで、最大4枚までヘッダーカードを設定しよう!

一通り設定できたら、プレビューを見てみましょう

WordPress AFFINGER5「ヘッダーカード」の作り方&カスタマイズ方法 1-07

↑ こんな感じになりました

基本的な作り方については、これで以上となります

ここから、ヘッダーカードの「表示パターンや表示・非表示などのカスタマイズ」について見ていきましょう🐥

AFFINGER5における「ヘッダーカード」の基本的なカスタマイズ方法

WordPressブログ「完全初心者」ガイド 見出し a-02

WING(AFFINGER5)」におけるヘッダーカードの基本的なカスタマイズは、次の4つになります

  • ヘッダーカードを個別記事にも表示させる(デフォルトはTOPページのみ表示)
  • 「PC」「スマホ&タブレット」それぞれにおける、ヘッダーカードの表示・非表示を指定
  • ヘッダーカードの画像表示のパターンを指定(3タイプ)
  • スマホのみ、ヘッダーカードの画像表示の高さを倍にする

1つ目のパートと同様に…

WordPress管理画面 > AFFINGER5 管理 > 「おすすめ記事一覧」タブ

から、「おすすめカード」の欄で設定していきます

順に見ていきますね🐣

「ヘッダーカード」を個別記事にも表示させる(デフォルトはTOPページのみ表示)

WordPress AFFINGER5「ヘッダーカード」の作り方&カスタマイズ方法 2-01

↑「サイト全体に表示する」という項目で…

  • チェックON → TOPページだけでなく、個別記事のヘッダーにもヘッダーカードを表示させる
  • チェックOFF → 個別記事のヘッダーには表示させない(TOPページのみ表示)

という指定ができます

参考までに、このブログでは「チェックON」にしてます

「PC」「スマホ&タブレット」それぞれにおける、ヘッダーカードの表示・非表示を指定

WordPress AFFINGER5「ヘッダーカード」の作り方&カスタマイズ方法 2-02

↑「ヘッダーカード1」~「ヘッダーカード4」までの各設定欄で…

  • PC
  • スマホ・タブレット

それぞれに表示させるかどうかの指定ができます

参考までに、このブログでは両方とも「チェックOFF」つまり「表示あり」の設定してます

ヘッダーカードの画像表示のパターンを指定(3タイプ)

WordPress AFFINGER5「ヘッダーカード」の作り方&カスタマイズ方法 2-03

↑「デザイン」という項目で、ヘッダーカードの画像表示のパターンを「3タイプ」から指定できます

WordPress AFFINGER5「ヘッダーカード」の作り方&カスタマイズ方法 2-04

↑「デフォルト」の一例です

WordPress AFFINGER5「ヘッダーカード」の作り方&カスタマイズ方法 2-05

↑「テキストのある背景画像をぼかす」の一例です

WordPress AFFINGER5「ヘッダーカード」の作り方&カスタマイズ方法 2-06

↑「テキストのある背景画像を暗くする」の一例です

参考までに、このブログでは「テキストのある背景画像をぼかす」に設定してます

スマホのみ、ヘッダーカードの画像表示の高さを倍にする

WordPress AFFINGER5「ヘッダーカード」の作り方&カスタマイズ方法 2-07

↑ 同じく「デザイン」という項目の、「スマホ閲覧時のおすすめヘッダーカードの高さを倍に」という項目で…

  • スマホのみ、ヘッダーカードの画像表示の高さを倍にするかどうか

を指定できます

WordPress AFFINGER5「ヘッダーカード」の作り方&カスタマイズ方法 2-08

↑ チェックOFFの一例です(通常の高さ)

WordPress AFFINGER5「ヘッダーカード」の作り方&カスタマイズ方法 2-09

↑ チェックONの一例です(高さ2倍)

参考までに、このブログでは「チェックOFF」つまり通常の高さに設定してます

おしまい♪

あずき🐥

\ このブログでも愛用中! /

WING AFFINGER5 banner-large-01

―― 検証と改善を重ねた唯一無二のテーマ ――

WING AFFINGER5

 ✔ 洗練された美しいデザイン性と、「変幻自在」な圧巻のバリエーション!

 ✔ 時間のかかる面倒なカスタマイズも、「クリック1つ」でさくさく実現!

 ✔ 「本気で戦う」ための、最適化されたSEO対策と収益UPの機能が標準装備!

今なら超時短ツール「タグ管理プラグイン(税込4,980円)」を無料配布中!

公式:「稼ぐ」に特化したWordPress テーマ『WING AFFINGER5』

関連:「WING AFFINGER5」気に入ってる点・気になる点をガチレビュー

WordPressの「タグ管理」とは? アイキャッチ
WordPressの「タグ管理」とは?どれだけブログに必須な機能か、3分で解説【よく使う文章や広告をテンプレート化/一括修正が最強に便利】

続きを見る

 

今回の記事はこちらの章に属しています

WordPressブログガイド 第6章「デザイン」編 

あずきのWordPressブログガイド 総合TOP 

About me

あずきアイコン main-01 背景透過

- 専業ブロガー・フリーランス -

あずき

 

独立4年目 / 元アパレル → 歴10年

 

20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます。 普段はTwitter(@azuki_rinrin)にわりといるので、覗いてもらえると嬉しいです^^

-WORDPRESS

© 2019 あずきのぶろぐ