AFFINGER6

アフィンガー5のヘッダー画像にテキストとボタンを配置

アフィンガーでヘッダー画像にテキストとボタンを設置したいんだけどできるの?できれば画像をスクロールさせたいな。

といった悩みにお答えします。

 本記事の内容

  • アフィンガー5のヘッダー画像にテキストとボタンを配置する方法

 本記事の信頼性


Ryota(@ryotablogger

アフィンガー5なら、ヘッダー画像にテキストとボタンを設置することができます。

とはいえ、「ヘッダー画像にテキストとボタンを設置すればいいの?」「」と思っている方は多いのではないでしょうか?

今回は、アフィンガー5でヘッダー画像にテキストとボタンを設置する方法を解説していきます。

本記事を読むことで、アフィンガー5のヘッダー画像にボタンとテキストを設置できるようになります。

ヘッダー画像

ヘッダー画像にボタンがあると思わず押したくなりますよ!
りょーた

アフィンガー5のヘッダー画像にテキストとボタンを配置する方法

アフィンガー5のヘッダー画像にテキストとボタンを配置する方法

アフィンガー5のヘッダー画像にテキストとボタンを配置する方法は、以下の手順になります。

  1. テキストを挿入
  2. ボタンを設置
  3. ヘッダーに画像を表示させる

順番に1つずつ解説していきます。

手順➀:テキストを挿入

まずは、テキストを挿入していきましょう。

WordPress管理画面より、「AFFINGER 管理」「ヘッダー」「ヘッダーコンテンツ設定」をクリックしてください。

「ヘッダーコンテンツ設定」の下にあるエディタに表示させる文章を入力していきましょう。

お好きな文章を入力してください。(今回は、「ヘッダー画像にテキストを表示」と入力します。)

入力した文章を選択し、「タグ」「テキストパーツ」「カスタムフォント」「白影」クリックしましょう。

これで、ヘッダー画像に文章が表示されます。

手順②:ボタンの設置

次に、ボタンを設置していきます。

 

入力したテキストの下にカーソルを合わせて、「タグ」「カスタムボタン」で好きなボタンをクリックしてください。(今回は「ノーマル」の「基本」を設置していきます。)

※MCボタンの場合には手順②のテキストはなくてもいいかもしれません。

 

さらに、ボタンの文言とボタンがクリックされた時の移動先を設定しておきます。

 

  1. title="ボタンに表示する文言"
  2. url="表示させたいURL"

 

上記2つの「" "」の中を任意のものに変更すればOKです。

 

ボタンの設置が終わったら、以下の項目にチェックを入れてください。

 

  1. コンテンツ全体を上下左右を中央寄せ
  2. 背景を暗くする

 

上記の2項目にチェックを入れ終えたら、「save」をクリックして完了です。

手順③:ヘッダーに画像を表示させる

まずは、ヘッダーに表示させる画像を設定していきます。

WordPress管理画面より、「外観」「カスタマイズ」をクリックしてください。

カスタマイズ画面に切り替わったら、「ヘッダー画像」をクリックしましょう。

 

続いて、下にスクロールし「ヘッダー画像エリア」の「画像を選択」をクリックして、背景にする画像を選択してください。

※間違えやすいポイント:通常、ヘッダーに画像を表示させるには、「現在のヘッダー」で画像を設定するのですが、ヘッダーエリアにテキストとボタンを表示させる場合に「現在のヘッダー」で設定しても表示されないのでご注意ください。

 

オシャレな画像を使いたい方は、で無料含めた商用利用可能な画像サイトを紹介しているので参考にしてみてください。

 

画像の設定ができたら、ヘッダーの高さを調整していきます。

 

アフィンガー5のヘッダーにテキストとボタンを配置する際の注意点

アフィンガー5のヘッダーにテキストとボタンを配置する際の注意点

アフィンガー5のヘッダーにテキストとボタンを配置する際の注意点は以下の3つになります。

  1. 表示速度が遅くなる
  2. ヘッダー画像の幅がフルサイズになる
  3. 画像をスライドショーにすることができない

1つずつ解説していきます。

その① 表示速度が遅くなる

ヘッダー画像、さらにはテキストとボタンが表示されるので読み込みに時間がかかり、必然的に表示速度がおそくなります。

表示速度が遅くなると、クリックされやすいボタンであっても表示されるまでに時間がかかり、結果的にクリックされず離脱されてしまうといったことにもなりかねません。

そうならないように遅延読み込み対策も一緒にしておくのがおすすめです。

画像の遅延読み込みなら、アフィンガー5専用プラグイン「LazyLoad SEO」で解決できます!
りょーた

アフィンガー5専用プラグイン「LazyLoad SEO」については、【遅延読み込み】アフィンガー5専用プラグイン「LazyLoad SEO」で表示速度UP!で詳しく解説しています。

あわせて読みたい
【遅延読み込み】アフィンガー5専用プラグイン「LazyLoad SEO」で表示速度UP!

続きを見る

その② ヘッダー画像の幅を調整できない

ヘッダー画像の幅を調整できません。

例えば、ヘッダー画像の幅を小さくしたいといった場合には、画像そのものの横幅を変更しなくてはいけません。

万が一、背景画像を幅100%のレスポンシブにしないで、画像サイズを綺麗に合わせたい場合には、画像の横幅を1170pxにすれば、PCで見たときに綺麗なサイズに合わせることができます。

ちょっと面倒だけど、横幅を合わせておけば見た目がきれいになりますよ!
りょーた

その③:画像をスライドショーにすることができない

画像をスライドショーにして表示することができません。

例えば、アフィンガー5にはヘッダー画像をスライドショーにする機能もありますが、ヘッダー画像をスライドショーにしてボタンとテキストを設置することができません。

もし、ヘッダー画像をスライドショーにして、テキストやボタンを設置したい場合には、スライドショーの画面を撮影し、GIFとして画像を使えば可能です。

GIFをヘッダー画像にする場合にはできる限り圧縮してくださいね!
りょーた

まとめ:アフィンガー5なら簡単にヘッダー画像にテキストとボタンを配置できます!

今回は、アフィンガー5のヘッダー画像にテキストとボタンを配置といった内容を解説しました。

もう一度おさらいをすると、

上記の手順でヘッダー画像にテキストとボタンを配置することができます。

ただし、以下のような注意点もあります。

  1. 表示速度が遅くなる
  2. ヘッダー画像の幅がフルサイズになる
  3. 画像をスライドショーにすることができない

ヘッダー画像は、ブログのトップページで一番最初に表示される重要な箇所です。

ボタンやテキストを表示させることができるのでCVRのアップが見込めますが、必ずサイトのスピードをチェックしながら設置することをおすすめします。

これからAFFINGER5の導入を検討している方は、AFFINGER5をガチレビュー!2年間使い続けた理由をデメリット含め解説もチェックしてみてください。

アフィンガー5について知りたい方は
【限定特典付き】AFFINGER6をガチレビュー!2年間使い続けた理由をデメリット含め解説

続きを見る

 

-AFFINGER6