アフィンガー5でヘッダー画像にキャッチフレーズを表示できる？
上記のように「ヘッダー画像にキャッチフレーズを表示させるアフィンガー5での設定方法」についてまとめています。
※当サイトではアフィンガー5（AFFINGER5）を使用しています。
☑この記事では以下の要点で構成しています。
- アフィンガー5のヘッダー画像設定方法
- ヘッダー画像に文字・キャッチフレーズを表示する方法
有料テーマをお使いの方はテーマによってヘッダーの推奨サイズが異なり、設定方法も異なります。この記事では当ブログで使用しているアフィンガー5（AFFIINGER5）での設定方法について紹介しています。
-
参考アフィンガー５（AFFINGER５）は初心者には難しい？実際に使用してみた感想
アフィンガー5（AFFINGER5）ってよくおススメされるけど実際使いやすいの？ アフィンガー5（AFFINGER5）は何に優れてるの？初心者でも使える？ 今回は上記のフィンガー5（AF ...
続きを見る
アフィンガー5でのヘッダー画像設定方法
WordPressの管理画面の「外観」で設定する事が可能です。
- 外観⇒ヘッダー⇒ヘッダー画像で設定
- 推奨サイズ「2200×500」
ヘッダー画像を用意するまたは作っておき、メディア画像を追加してから上記の操作を行うとスムーズに設定が行えます！また推奨サイズで用意するのが一番いいですが、難しい場合、推奨サイズ内に完璧にフィットするように切り抜くことも可能です
ヘッダー画像を作成するには？
無料サイトを使用することがお金もかからず素早く手に入れることが出来ます。ブログやっている方なら誰しもが使用している「Canva」の使用をおススメします。
-
参考ブログのアイキャッチ画像は必要？アイキャッチ作りは無料サイトで十分です
ブログのアイキャッチ画像って必要？？ アイキャッチ画像の作るのってめんどくさいですよね(;'∀') そもそもアイキャッチ画像を設定する必要性や効果ってあるのかについてまとめていきます。 ...
続きを見る
ヘッダー画像に文字を入れる設定方法
アフィンガー5（AFFIINGER5）の「外観」で設定は元から”ヘッダー画像に文字を入れる設定が備わっていません”そこで使用するのが「ウィジェット」です。
- 外観⇒ウィジェット⇒ヘッダー画像エリアウィジェット⇒テキスト追加
- テキストに表示したいキャッチフレーズを入力し保存する
- 外観⇒ヘッダー⇒ヘッダー画像⇒ヘッダー画像の後ろに配置する背景画像を設定
今回は例として下記のコードを使用していきます。
html [st-flexbox title="表題（メインのキャッチフレーズ）" height="400" color="#fff" fontsize="200"]添えるキャッチフレーズ[/st-flexbox]
メインキャッチフレーズをENJOY MY LIFEにし、添えるキャッチフレーズを『OL×ブログ』としてみました。
注意ポイント
イメージとしてはテキストに設定した文字だけが表示されるのではなく、ヘッダー画像の上にテキスト画像として設定が上書きされ表示されるため現段階で設定しているヘッダー画像が無効になります。
代わりに「ヘッダー画像の後ろに配置する背景画像を設定」をすることで、テキストを載せることによりヘッダー画像が表示されなくなる現象の穴埋めが出来ます！
まとめ
今回はアフィンガー5にて”味気ないヘッダー画像にキャッチフレーズを入れる設定方法”について紹介してきました。
初めの内はなかなかブログのヘッダーって疎かになりがちですが、ブログの細部までこだわることで自分にとっても読み手にとっても閲覧しやすい・したくなると感じていただけます。
ヘッダー画像に文字を入れる設定を行う事で背景画像さえ用意すれば文字入れは設定で行えたり、プラスαのブログの説明を入れたい場合に補足できたりとヘッダー1つでブログのトップページの表現の仕方を変えることが出来ます！
ここまで読んでくださりありがとうございました。