AFFINGER5

AFFINGER5でヘッダーカードを表示させる方法

2020年12月4日

AFFINGER5でヘッダーカードを表示させる設定方法
AFFINGERでヘッダーカードを設定する方法を知りたい!
AFFINGER5でヘッダーカードをカスタマイズする方法を知りたい!

今回はこんな疑問にお答えしていきます!

AFFINGER5のデザイン上の強みとして「ヘッダーカードの実装機能」が挙げられます。

トップページのヘッダー部分にヘッダーカードとしておしゃれな内部リンクを貼り付けることができるのです。

実際のヘッダーカード赤枠の部分がヘッダーカードになります

そこで今回はAFFINGER5に標準で搭載されている「ヘッダーカード機能」の設置方法やカスタマイズの方法についてご紹介していきます。

今回のテーマはこちら!

  • AFFINGER5のヘッダーカード機能の設置方法
  • AFFINGER5のヘッダーカード機能のカスタマイズ方法

当サイトではウェブサイトやブログに関する記事を毎日投稿しています。
他の記事も合わせて読んでいただけると嬉しいです。

\今なら当サイト限定の豪華特典付き/

AFFINGER5の詳細を見る

AFFINGER5のヘッダーカード機能の設置方法

AFFINGER5のヘッダーカード機能の設置方法

AFFINGER5ではヘッダーカードを誰でもカンタンに設置できちゃいます。

手順は以下の通りです。

AFFINGER5のヘッダーカード機能の設置方法の手順

  1. AFFINGER5管理画面へ
  2. おすすめヘッダーカードから画像とテキストとURLを設定

たったこれだけです!

早速順番に見ていきましょう。

1. AFFINGER5管理画面へ

まずはWordPress管理画面からAFFINGER5管理画面に移動します。

affinger管理画面へ

画像のように

  1. WordPress管理画面から「AFFINGER5管理」を選択
  2. AFFINGER5管理画面から「おすすめ記事一覧」を選択
  3. おすすめ記事一覧画面から「おすすめヘッダーカード」の項目へ

といった風に移動しましょう。

2. おすすめヘッダーカードの設定

するとご覧のように、ヘッダーカード設定が4つ並んでいることが分かります。

2. おすすめヘッダーカードの設定

ヘッダーカードの主な設定項目は以下の通り。

ヘッダーカードの設定項目

それぞれの概要はこんな感じです。

ヘッダーカードの設定項目

  • 画像のURL
    アップロードボタンを押してヘッダーカードに表示させたい画像を選択すると自動で入力されます。
  • テキスト
    ヘッダーカードに表示されるテキストを設定できます。リンク先の紹介文を端的に書くと良いでしょう。(空欄でも大丈夫です)
  • リンク先URL
    ヘッダーカードをクリックしたときの移動先のURLを設定できます。
  • PCに表示させない
    ヘッダーカードをPC画面で表示させたくないときはチェックを入れましょう
  • スマホ・タブレットに表示しない
    ヘッダーカードをスマホ・タブレットで表示させたくないときにチェックを入れましょう
これらの設定を4つ分設定していきましょう!

ヘッダーカードの画像は横長になります。

もしも縦長や正方形のサイズの画像を設定する際は、自動でトリミングされてしまうので縦横比には注意しましょう。

横幅:縦幅が5:2くらいがオススメです!

すべて設定が終わったら画面下部の「save」ボタンをクリックして設定を保存しましょう。

ヘッダーカード設定完成図

「save」ボタンを押した後は、こんな風に4項目に画像と画像URL、テキストとリンク先URLが設定されていれば大丈夫です。

AFFINGER5のヘッダーカード機能のカスタマイズ方法

AFFINGER5のヘッダーカード機能のカスタマイズ方法

実はAFFINGER5ではヘッダーカード設定画面の一番上と一番下に、カスタマイズメニューが用意されています。

AFFINGER5のヘッダーカード機能のカスタマイズ方法

AFFINGER5のヘッダーカード機能のカスタマイズ方法

それぞれの項目の概要は以下の通りです。

AFFINGER5のヘッダーカード機能のカスタマイズ設定

  • サイト全体に表示にする(デフォルトはTOPのみ)
  • ヘッダーカード画像の設定
  • 角丸にする
  • スマホ閲覧時(959px以下)のおすすめヘッダーカードの高さを倍に

それでは順番に見ていきましょう!

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

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

「サイト全体に表示にする(デフォルトはTOPのみ)」ではヘッダーカードをすべての記事で表示させるか、それともトップページのみに表示させるかを設定できます。

  • チェックが入っていない状態ではトップページのみにヘッダーカードが表示されます。
  • チャックを入れた場合はすべての固定・投稿記事にヘッダーカードが表示されます。

お好みで設定しましょう。

当ブログではOFFにしているので、トップページでしか表示されません

ヘッダーカード画像の設定

ヘッダーカード画像の設定

続いてはヘッダーカード画像の表示を3つの項目から設定できます。

とはいえ文章で説明しても分かりにくいと思います。

百聞は一見にしかず!
ここでは各項目の実際の表示をご紹介します。

デフォルト↑「デフォルト」の表示はこんな感じ↑

テキストのある背景画像をぼかす ↑「テキストのある背景画像をぼかす」の表示はこんな感じ↑

テキストのある背景画像を暗くする↑「テキストのある背景画像を暗くする」の表示はこんな感じ↑

このように3項目用意されていますが、複数選択はできませんのでご注意ください。

個人的には画像のテキストもくっきり見える「テキストのある背景画像をぼかす」がオススメです

角丸にする

角丸にする

ヘッダーカードの四隅を丸めるかどうか設定できます。

こちらも実際の表示を見ながら確認していきます。

デフォルト↑「デフォルト」の表示はこんな感じ↑

角丸設定↑「角丸」の表示はこんな感じ↑

みなさんのサイトのテイストに合わせてカスタマイズしていきましょう。

ポップでやさしいテイストのサイトなら「角丸」、シンプルでスタイリッシュなサイトなら「デフォルト」のままといった感じです。

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

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

最期の項目ではスマホ(横幅が959px以下)で閲覧したときのヘッダーカードの高さを長くするか設定できます。

こちらも実際の表示を見ながら確認していきましょう。

デフォルトの表示(スマホ版)↑「デフォルト」の表示はこんな感じ↑

高さを2倍にしたときのヘッダーカードの表示↑高さを長くした時の表示はこんな感じ↑

「スマホ閲覧時(959px以下)のおすすめヘッダーカードの高さを倍に」にチェックを入れると、縦幅が2倍になります

お好みに合わせて設定しましょう。

当ブログではチェックを入れて高さを2倍にしています

設定が完了したら先程と同様、「save」ボタンをクリックして設定を保存しましょう。

まとめ:AFFINGER5でヘッダーカードを表示させる設定方法

AFFINGER5でヘッダーカードを表示させる設定方法

AFFINGER5でヘッダーカードを表示させる設定方法のまとめ

  1. AFFINGER5ならWordPressブログのヘッダーカードを簡単に設定・カスタマイズできる
  2. ヘッダーカードの画像の縦横比は横長がオススメ!

今回はAFFINGER5でWordPressブログにヘッダーカードを表示させる設定方法をご紹介しました。

ヘッダーカードは閲覧ユーザーに対しておすすめ記事を紹介するための重要な要素です。

みなさんのWordPressブログの渾身の記事を見てもらうためにも、今回紹介した方法でヘッダーカードを設置していきましょう。

AFFINGER5の便利機能を活かして、より良いサイト制作を目指していきましょう!

もしも分からない部分があればお問い合わせフォームで質問して頂ければすぐに返信致します。

今サイトではこれからもウェブサイト運営に関する有益な情報をたくさん発信していきますので応援よろしくお願いします!

AFFINGER5のカスタマイズ方法のまとめはこちら

AFFINGER5(アフィンガー5)のカスタマイズ方法まとめ
AFFINGER5(アフィンガー5)のカスタマイズ方法まとめ

続きを見る

\今なら当サイト限定の豪華特典付き/

AFFINGER5の詳細を見る

  • この記事を書いた人(執筆者情報)

wagtechblog

プログラミングとWordPressに溺れた私立大学生。フリーランスのiOSエンジニアとしてアプリ開発しています。その傍らWeb集客のベンチャー企業で勤務。主にフロントエンドエンジニア・WebアプリケーションエンジニアとしてWebアプリケーション開発、SEOマーケティング、データビジュアライゼーションといった業務もしてます。好きな言語はSwiftとPythonとPHPとRuby。趣味はApex Legendsとゲーミングデバイス集め。

-AFFINGER5

Copyright © wagtechblog All Rights Reserved.