AFFINGER６（アフィンガー）のヘッダー画像エリアの作り方！サイズ調整も

ブログ運営半年で月20万超の元サラリーマンブロガーなつです。

AFFINGER6はデザイン性にすぐれたWordpressテーマです。ヘッダーには、静止画や動画も設定でき画像に重ねてボタンやテキストを配置することも可能です。

AFFINGER6のヘッダーカードの設置についてもお伝えしていきます。

　ブロガーが欲しい機能が満載のワードプレステーマ「AFFINGER6/ACTION」
⇒AFFINGER6（アフィンガー6）の公式ページを確認する。
※今なら、5大購入特典をお付けしています！

関連記事【AFFINGER6のレビュー】実際使ってみた感想と評判。

※　AFFINGER6（ACTION）は　AFFINGER5（WING）の後継版です。
⇒　違いについてはコチラの記事でどうぞ。

AFFINGER6の基本的なヘッダー画像の設置方法

まずは、AFFINGER6のヘッダー画像の基本的な設定方法をお伝えしていきます。一般的に静止画を設置しその上にタイトルなどのテキストを重ねていきます。

やり方の手順は2つあります。

1. カスタマイザーで画像を設定
2. AFFINGERの管理画面でテキストを重ねる

カスタマイザーで画像を設定

ダッシュボードの左側の黒のラインのところに「外観」がありますので、そちらから入ります。

▼　外観　⇒　カスタマイズ　⇒　ヘッダー画像

画像の設定をします。ヘッダーの高さを指定し、画像をどういう風に見せたいかこの部分で調整していきます。

　速報！
芸大卒のなつが作ったデザインのマニュアルも特典に追加しました。

⇒　詳しくはコチラをご覧ください。

※ヘッダーの画像は、イラストACのイラストレーターさん方の作品です。特典内でURLをお伝えしています。

AFFINGER6の管理画面でテキストを重ねる

次に、テキスト部分を重ねていきます。テキストが必要ない場合にはここは飛ばしてください。

▼　AFFINGER5管理画面　⇒　ヘッダー

ヘッダーコンテンツ設定の部分にテキストを入力します。

▼　タグ　⇒　テキストパーツ　⇒　カスタムフォント　⇒　白影

中央寄せや全体的に画像を暗くするなど調整をして「save」をクリックします。

すると以下のように画像の上にテキストが浮かび上がってきます。

↓　AFFINGER6の「着せ替え」を使って独自デザインの作り方です。

関連記事AFFINGER６サンプルデザインをブログで作ってみた！

ヘッダー画像の最適サイズとは

AFFINGER6のヘッダー設定部分では以下のようなサイズが推奨されています。他のサイズでも作れますが、念のためにお伝えしておきます。（絶対このサイズというわけではないのでご安心を）

AFFINGER6のヘッダーカードの設置方法

AFFINGER6には、ヘッダーの下にヘッダーカードという場所を設置できます。特にユーザーの目を引く部分なので設置方法を覚えておくと便利です。

ヘッダーカードは、Cocoonにも同じ機能としてありますしSTORKもSTORK19でグレードアップした時に機能追加されていますので、おそらく今の人気パーツなんだと思います。

デフォルトではでていませんので、ぜひ追加してください。

▼　AFFINGER管理画面　⇒　おすすめ記事一覧

4つ設置できますので、それぞれ画像をアップロードし、テキストと誘導したいURLを設定していきます。

（最後にテキストが見やすいように画像を少し暗くする設定もありますので、ご自身で見ながら調整してみてください）

4つ設定できたら「save」をクリックします。

ヘッダーカードはメインのヘッダーとは別に小さい画像で配置されますが、グローバルナビ以外に記事誘導ができるため人気の機能です。

AFFINGER以外にも、STORKやJINなどでも取り入れられています。

AFFINGER6のヘッダー画像の表示＆非表示（透過画像を使う方法）

他の人と同じ画像よりも少し個性的にしたい場合には、PNG画像などを使ってヘッダーを作る方法があります。

透過の画像（PNG）をダウンロードしておいてください。

▼　外観　⇒　カスタマイズ　⇒　ヘッダー画像

ヘッダー画像エリアの高さを指定し、背景色を設定します。透過型の画像（PNGなど）を設定してみてください。（高さはエディターを見ながら調整してください）

この設定だけで以下のようなヘッダー画像が出来上がります。

横並びが若干ウザいな～という方は、画像を繰り返ししないにチェックを入れておけばワンポイントで画像が挿入されます。

以下のようなヘッダーになりワンポイント画像になります。

AFFINGER6のヘッダー画像にテキストとボタン設置

ヘッダー画像にタイトルやメッセージの他、URLの誘導ボタンの設置方法をお伝えします。画像の設定をしてAFFINGER5の管理画面で設定します。

▼　外観　⇒　カスタマイズ　⇒　ヘッダー画像

ヘッダー画像エリアでヘッダーの高さを調整し、画像を追加してください。

▼　AFFINGER管理画面　⇒　ヘッダー画像

ヘッダーコンテンツ設定のエディターにテキストを入力します。反転させ、タグからカスタムフォント、デフォルトを選択します。

同じエディターにボタンを挿入していきます。

タグ　⇒　カスタムボタン（お好きなボタンを指定します）

HTMLが挿入されたら「url=”#”」という部分の＃を誘導したいURLと差し替えます。ここまで設定したら「save」をクリック。

すると以下のようにヘッダー画像の上にタイトルとボタンが挿入されます。

AFFINGER6のヘッダー画像をスライダーにする

複数のヘッダー画像を設定しておき、画像をスライドショーにする方法をお伝えします。こちらも、カスタマイザーで画像を設定し、AFFINGERの管理画面でスライドショーにします。

▼　外観　⇒　カスタマイズ　⇒　ヘッダー画像

「新規画像を追加」でスライドショーに入れたい画像を追加していきます。

▼　AFFINGER管理画面　⇒　ヘッダー画像

この設定をすると、一番簡単にヘッダー画像をスライドショーにできます。

AFFINGER6のヘッダー画像上にロゴを設置する

AFFINGER6のヘッダー画像の上にロゴを設置することもできます。タイトルだけよりもちょっとグレードの高いヘッダーになりますので、設置してみてください。

ロゴ画像のダウンロード

まず、今回使うロゴはICOOON MONOというサイトでアイコンをダウンロードして使っていきます。

出典：ICOOON MONO

ICOOON MONOで好きなアイコンを検索します。

真ん中のcolorの部分で色の指定をします。今回は、ヘッダーの色をグラデーション2色にしていますので、スッキリ見えるように白にしています。

（画像は見えづらいですが左側にあります）

色の指定ができたら「PNG」でダウンロードしてください。

ロゴの設置

カスタマイザーでロゴ画像をインストールをします。ヘッダーとフッターをそれぞれ別に設定していきます。

▼　外観　⇒　カスタマイズ　⇒　ロゴ画像　

ロゴ画像という部分でヘッダーとフッター部分のロゴの追加ができます。この部分で設定をするとタイトルが消えてしまうのとヘッダーとフッター別々に設定しないといけません。

もし、ヘッダーとフッターのロゴが同じ画像を使いタイトルを残したい場合には以下のやり方で設定します。

ちなみに、このロゴの大きさは64px×64pxです。

アイコンロゴ画像の設定

カスタマイザーの同じ場所で設定をします。前章のロゴ画像設定の下にスクロールすると「アイコンロゴ画像」を設定する場所が現れます。

• タイトルとロゴを併記したい場合
• ヘッダーとフッターを同時に設定したい
• ロゴの大きさを調整したい

アイコンロゴの部分に256px×256pxのアイコンを導入すると上のようになります。タイトルが折り返してしまっているので少し調整してみましょう。

ロゴ画像を入れる部分の下に「アイコンロゴの最大サイズ」という部分がありますので、100（px）と入れてみました。

↓　当ブログからWordpressテーマAFFINGER6を購入くださった方に特典をプレゼント！

記事を取得できませんでした。記事IDをご確認ください。

初心者だからこそWordpress有料テーマ を使うべき理由