【AFFINGER6】ヘッダーカードの作り方とカスタマイズ方法

2022年2月28日

 

ヘッダー下におしゃれに画像リンクってどうやったらできるの?

 

今回のAFFINGER6における、ヘッダーカードの設置方法について紹介していきます。

 

   本記事の内容

  • ヘッダーカードの設置方法について
  • ヘッダーカードのカスタマイズ方法

 

 

\ 当ブログ使用テーマ /

  • 誰でもかんたんにオシャレデザイン
  • インフォトップ月間総合ランキング第1位
  • SEO対策と広告収入UP機能を標準装備!

初心者から有名ブロガーまで愛用されているSEO最強WordPressテーマ。下記のボタンから購入で、今なら5,000円相当のプラグインが無料でついてきます。

AFFINGER6の購入はこちら

 

\ AFFINGERのカスタマイズまとめ /

【徹底的に解説】AFFINGER6の設定・デザインをカスタマイズ方法まとめ

続きを見る

 

今回はこのブログ「ルーティンラボ」でも使用していWordPressテーマである「AFFINGER」のヘッダーカードについて解説していきます。

 

ヘッダーカードでは、強調したい記事やカテゴリーを読者の方にみやすい位置に置くことで、読んでもらいやすくなる効果があります。

 

また、おしゃれな画像と組み合わせる事で、サイト全体のデザイン性がぐっと上がっていい感じのページを作ることもできるので、ぜひ参考にしてみてください。

 

ヘッダーカードとは?

ブログのヘッダーカードってどのあたりの??

 

ブログ初心者の方は、こういった疑問があるかと思いますが、「ヘッダーカード」とは、ブログやホームページのヘッダーエリアで見ることがあると思います。

 

 

赤枠で囲まれたところがヘッダーカードです!

 

 

スマホならこんな感じで表示されますよ!

 

ヘッダーカードを差し込むことでブログ全体の見栄えを華やかにデザインすることができるのでぜひ設定してみましょう

 

ヘッダーカードの特徴

  • 最大4枚まで設置ができる
  • カードの中にタイトルの設定が行える
  • 画像の表示パターンやPC・スマホの「表示・非表示」の指定ができる
  • 記事ページのリンク先もヘッダーにヘッダーカードに指定可能

 

こういったように、細かい設定とカスタマイズで自分が強調したいページへの誘導もしやすくなります。

 

「ヘッダーカード」の作り方

メールテンプレート作成

 

それでは、それでは早速「ヘッダーカード」の作り方です。

 

step
1
設定画面に移動する

WordPress管理画面より「AFFINGER 管理」→「ヘッダー下/おすすめ」に移動します。

 

 

 

step
2
カードの設定項目に移動する

ヘッダーカード」の項目に移動しましょう。当ブログの設定ではこのようになっています。以下が設定画面です。

 

 

表示結果は以下のようなデザインになります

 

 

 

「ヘッダーカード」の作成手順

「ヘッダーカード」は4つのブロックに分かれており、「ヘッダーカード1」の項目から順に設定していきます。

 

step
1
画像のアップロード

「ヘッダーカード」の画像を選択していきます。ここでは、事前にアップロードておいた画像などを読み込むことで画像を選ぶことができます。

 

 

step
2
表示テキストの入力

ヘッダーカード上に表示される「テキスト」と「サブテキスト」を入力してください。

 

 

step
3
リンク先の設定

ヘッダーカードのリンク先を任意のURLを埋め込むことができます。

 

 

step
4
端末別の表示設定

PCもしくはスマホでの表示切り替えが行えます。どちらとも切り替え不要の場合には、そのままでOKです。

 

以上「ヘッダーカード」の 作成は終了になります。このブログのヘッダーカードの一部はこんな感じになっています。

 

完成は感じに!

 

 

「ヘッダーカード」の基本的な表示カスタマイズ

 

ヘッダーカードの基本的な表示に関するカスタマイズ方法について解説します。

 

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

  • 「ヘッダーカード」はサイト全体に表示可能(デフォルトはTOPページのみ)
  • 「PC」「スマホ&タブレット」それぞれにおける、ヘッダーカードの表示・非表示を指定可能
  • ヘッダーカードの画像表示のパターンを変更
  • スマホ「ヘッダーカード」の高さを倍にする

 

設定画面はヘッダーカードの作成方法同様のページから行えます。それでは、順番にカスタマイズしていきましょう!

 

 

「ヘッダーカード」はサイト全体に表示可能

 

チェックON:TOPページだけでなく、サイト全体にヘッダーカードが表示される
チェックOFF:TOPページのみヘッダーカードを表示する

 

デフォルトでは、トップページのみの設定を行なっています。

 

投稿記事の上部にも表示させたい場合には、チェックを入れておきましょう。

 

 

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

 

PCもしくはスマホでの表示切り替えが行えます。どちらとも切り替え不要の場合には、そのままでOKです。

 

ヘッダーカードのテキスト・画像表示のカスタマイズ

「デザイン」という項目ではヘッダーカードの画像表示のパターンが3つのパターンから選択できます。表示のデザインを切り替えることで、かなりいい感じのヘッダーカードに仕上げることができます。

 

デフォルトのデザイン

 

 

 

 

背景をぼかしたデザイン

 

背景を暗くしたデザイン

 

 

当ブログでは、現在「背景を暗くする」使っています!

 

「ヘッダーカード」の角を丸くする

「ヘッダーカード」の角を丸くするデザインを選択できます。

 

差し込む画像によっては、丸くした方がサイト全体が柔らかいイメージになるので、自分のサイトのイメージと合わせて選択するといいと思います

 

通常のデザイン

 

 

角を丸くしたデザイン

 

スマホ「ヘッダーカード」の高さを倍にする

ヘッダーカードの設定では、スマホに表示されるヘッダーカードの高さを変更できます。

 

 

通常のスマホ用ヘッダーカードの高さ

 

倍の高さのスマホ用ヘッダーカード

 

強調したい場合には、ヘッダーカードを大きくすることで、ユーザーのクリック率を高めてくれます

 

ヘッダーカードの画像サイズについて

 

ヘッダーカードのサイズについての解説です。

 

基本的には、ヘッダーカードに設定する画像は好きな画像でOKですが、1つだけ問題があります。それが、縦と横の比率をある程度整えておかなければ、自動的に調節されて見切れてしまう問題が発生します。

 

当ブログのヘッダーカードでは基本的に【1200 × 630 px】にて設定していますので、同じように設定していただけると、同様の表示になるかと思います。

 

オススメの画像編集ツールはこちら

  • iLOVEIMG:画像編集をブラウザ上で行えるサイト
  • Canva:図やイラスト、トリミングまでかなり便利に編集が行えるサイト
  • Voralent Antelope:画質を維持しつつ画像圧縮ができるツール

 

画像の編集する際に参考にしてみてください

 

テキストのカラー設定【CSSにて】

CSS

 

最後はヘッダーカードに表示される文字のカスタマイズを行っていきます

 

デフォルトの設定は白色の文字で表示されていますが、さらに自分でカスタマイズしたい人は参考にしてみてください。

 

CSSにて、コードのコピペのみで簡単に作業が完了できます。

 

step
1
管理画面から移動する

WordPressの管理画面より、「外観」→「カスタマイズ」を選択する。

 

カスタマイズ

 

step
2
追加CSSの選択

追加CSS」の項目を選択し、CSSコードの編集画面を開きましょう。

 

追加CSS

 

step
3
CSSにコードの追加

CSSのコードを追加しましょう。以下のコードをコピペでOKです!

 

/*ヘッダーカードの文字色固定*/
.st-cardlink-card.has-bg.is-darkable .st-cardlink-card-text {
z-index: 2;
color:#ffffff;
}

 

color:○○○の項目を変更することで、ヘッダーカードのテキストの色が固定できます!

 

注意ポイント

追加CSSを編集する時は、不具合やバグが発生した時に備えて、事前にバックアップをとっておきましょう。

 

まとめ

以上、AFFINGER6のヘッダーカードの作成方法と基本的なカスタマイズの解説でした!

 

ブログの記事をコツコツ書くことはもちろん大切ですが、自分好みのホームページにカスタマイズすることもサイト運営の楽しいところです

 

テーマをご使用の方は、デフォルトの設定だけでも結構おしゃれにカスタマイズできますが、CSSにてコードを編集するとさらにおしゃれにできます

 

参考書籍も掲載しておきますので、是非参考にしてみてください!

 

 

created by Rinker
¥2,178 (2022/09/26 14:53:04時点 楽天市場調べ-詳細)

 

  • この記事を書いた人

ANZU

ブログで毎日コツコツ積み上げ|ITスキルとライフハックをアウトプット|プログラミングも独学中|より良い学びと習慣のノウハウを発信| 詳細はブログに掲載していきます。

-AFFINGER
-, ,