AFFINGER

AFFINGER5 のヘッダーエリアのカスタマイズ法【写真あり】

たたずむライオンの図

悩む学生
アフィンガー5を使ってます。サイトの上の部分(ヘッダーの部分)をどうやってカスタマイズしたらいいのか分かりません。有名なブロガーさんみたいなヘッダーにしたいです。せっかくアフィンガー5にしたのにカスタマイズで心が折れそう。

今回はこんな悩みを解決します。

 

カスタマイズ性が豊富なアフィンガー5ですが、逆にカスタマイズできる箇所が多すぎてどこをいじればいいのか悩みますよね。

 

ぼくもめちゃくちゃ苦労しました。ときには表示が崩れたりもしましたね。
リットン

 

そこで、今回はアフィンガー5のヘッダー部分(サイトの上)のカスタマイズ方法を、ネットの知識のない初心者の人でも絶対にできるように紹介します。

 

この記事を見れば、アフィンガー5でのヘッダー部分も自在にカスタマイズできて、あなたのブログが自分好みに仕上がりますよ。

 

ぜひ見てください。

 

アフィンガー5のヘッダー部分を大まかに説明

 

ヘッダーの部分といってもいろいろあるので、大まかにどこをいじっていくのかを解説しますね。以下の写真の部分を今回はカスタマイズしていきます。

 

アフィンガー5のヘッダー部分

 

上記のように、ヘッダー部分でカスタマイズできるところは大きく5つ。

 

  • ヘッダーエリア
  • ヘッダー画像エリア上
  • ヘッダーメニュー
  • ヘッダー画像エリア
  • おすすめヘッダーカード

 

これを念頭に置きながら作業を進めると楽になりますよ。以下では上から順に1つずつ詳しく解説していきます。

 


ヘッダーのエリアのカスタマイズ

 

ヘッダーエリアでは以下のようなカスタマイズが可能です。

 

  • キャッチフレーズとサイトタイトルを変える
  • ロゴ画像を表示する

 

キャッチフレーズとサイトのタイトルは外観カスタマイズサイト基本情報から変えられます。

 

サイトの基本情報

 

デフォルトの場合だとキャッチフレーズとサイトタイトルはサイトの左側に表示されるはずです。
真ん中に位置を変えたい人は、AFFIGNER5管理ヘッダー→Hヘッダー設定でヘッダー分割をしないヘッダーエリアをセンタリングにチェックします。

AFFINGER5→Hヘッダー設定

 

ただし、ヘッダーを分割しないと、ヘッダーエリアをセンタリングは同時にチェックができません。
そのため、ヘッダーを分割しないにチェックを入れ保存してから、ヘッダーエリアをセンタリングにもチェックを入れるようにしましょう。

 

もし、ヘッダーエリアの背景色などを変えたくなったら、カスタマイズ基本エリア設定ヘッダーエリアから色などを変えられます。

基本エリア設定→ヘッダーエリア設定の図

ヘッダーエリアの詳細設定

 

簡単に設定を紹介します。

 

サイト上部にライン色を変えるとサイトの上部にラインが引かれます(個人的に見栄えがよくないので非推奨)
ラインの高さサイト上部のラインの太さが変わります
ラインの横幅を100%にするラインがサイトの横幅一杯に広がります
背景色背景の色が変わります(このサイトは白)
背景色(グラデーション上部)背景色と違う色にするとグラデーションができます
ヘッダー背景の横幅を100%にするサイトの幅いっぱいにヘッダーが広がります
グラデーションを横向きグラデーションの向きが変わります
ヘッダーエリア背景画像挿入した画像を背景にサイトのタイトルやキャッチコピーが表示されます
サイトタイトルとキャッチフレーズの文字色テキストの色が変わります

 

上記の項目以外は個人ブログではとくに必要ありませんので、いじらなくても大丈夫です。

 

ただ、この場合サイトのタイトルやキャッチコピーのフォントなど自由にしづらいので、自分でもっと調整したい人は、ロゴ画像の使用をおすすめします。

 

ちなみに、ロゴ画像を使用するとこんな感じです。(適当に作りました)

サイトのロゴ画像の例

 

ロゴ画像はCanvaなどを利用して作製しましょう。
幅や高さは挿入したい画像によるので、各自お好みですが、幅は600px前後で問題ありません。お気に入りの画像ができたら、アフィンガー5側の設定をします。

 

カスタマイズロゴ画像をクリック。ロゴ画像に自分の画像をアップロードすれば、下記の項目にお好みでチェックを入れましょう。

アフィンガー5のロゴ画像設定

  • モバイル用ロゴを使用する
  • モバイル用ロゴサイズ調整
  • モバイル用ロゴ(又はタイトル)をセンター寄せ

 

これでヘッダーエリアのカスタマイズは終了です。

 

ヘッダー画像エリア上のカスタマイズ

 

ヘッダー画像エリア上とはこの部分。インフォメーションバーとも呼ばれ、こちらに収益記事や有料noteのURLを載せる人が多いです。

アフィンガー5のインフォメーションバー

 

ではカスタマイズ方法を紹介していきます。ちなみに、ほかのサイトではCSSを追加する方法を紹介していますが、当サイトのやり方ならCSSの追加をおこなわずに設定可能です。

 

まず、カスタマイズウィジェットヘッダー画像エリア上のウィジェットウィジェットの追加までクリックしたら00_STINGERカスタムHTMLを追加します。

 

ヘッダー画像エリア上のウィジェット設定

 

そして、下記のようにカスタムHTMLに以下のコードを張りつけます。

画像エリア上のウィジェットのカスタムHTML

 

 html
<a href="自分の記事のURL "><span style="font-size:150%"><strong><i class="fa fa-bolt"></i>任意のテキスト</strong></span></a>

 

もし、このヘッダー画像エリア上(インフォメーションバー)の部分に動きをつけたいなら、コードを以下のものに変えます。

 

 command
<div><maruquee><a href="自分のキラーコンテンツのURL "><span style="font-size:150%"><strong><i class="fa fa-bolt"></i>任意のテキスト</strong></span></a></maruquee></div>

 

先ほどと違い、以下のコードを増やしました。

 html
<div><maruquee>流したい文字</maruquee></div>

もし文字の大きさを変えたい人は、font-size:150%の150%の部分を好きに変化させてください。文字を大きくしたり、動きをつけたらここからは色を自分好みに変えていきます。

 

カスタマイズ基本エリア設定ヘッダー画像エリア上/下ウィジェットをクリック。

 

ヘッダー画像エリアの上のウィジェット

 

  • ヘッダーエリア上の背景色
  • ヘッダーエリア上の背景色(右)
  • ヘッダーエリア上の文字色

 

以上の3つの色を自分好みにカスタマイズしてください。カラーコードのサイトを参考にするといいでしょう。

 

以上でヘッダー画像エリア上のカスタマイズは終了です。

 

ヘッダーメニュー

 

続いてはヘッダーメニューの作成をします。PC版で見たときにほとんどの人が設定していますし、読者が見たいカテゴリーまですぐに飛べるので、ユーザビリティの面でも必須です。

 

メニューの作り方の手順

  1. カテゴリーの作成
  2. メニューの作成
  3. メニューの見た目のカスタマイズ

 

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

 

step
1
カテゴリーの作成

 

メニューを作る前にカテゴリーの準備がいるので、まずはカテゴリー作成から。

 

投稿カテゴリーから新規カテゴリーを追加のところでスラッグと名前を設定します。スラッグというのはカテゴリーのページのURLの末尾の部分です

 

カテゴリの新規作成

 

(例)lytton-diary.com/category/affinger/

 

上記のように、この記事はAFFIGNERというメニューの名前でスラッグがaffingerとなっています。スラッグで悩んだら英語に翻訳したものにすればOKです。

 

自分が作るメニューが子カテゴリーなら親のカテゴリーも指定しましょう。親カテゴリーというのは、例えば下記のようなもの。

 

親カテゴリーと子カテゴリーの説明

 

親カテゴリーのなかに子カテゴリーがあるということです。

 

ちなみに作るにしても子カテゴリーまでに抑えた方が訪問者には優しいサイト設計ですよ。
リットン

 

設定できたら、下にある新規カテゴリーを追加をクリック。これでカテゴリーの作成は終了です。

 

step
2
メニューの作成

 

続いて外観メニュー新しいメニューを作成しましょう。をクリック

 

PCメニューの作成

 

メニュー名はなんでも大丈夫ですが、今回はPCヘッダー用とでもつけておきましょう。メニューの位置はヘッダー用メニューにチェックを入れます。そしメニューを作成をクリック。

 

そしたら、左のカテゴリーから先ほど作ったカテゴリーにチェックして、メニューに追加をクリック。

 

新しいメニューの作成

 

当サイトのようにカテゴリーの横にアイコンを表示させたい場合は、カテゴリーをクリックして、ナビゲーションラベルの部分にカテゴリー名と共に以下のコードを加えましょう。

 

 html
<i class="fa fa-globe" aria-hidden="true"></i>

 

fa-globeの部分は自分で変えられるので、webアイコンのサイトから探してみてください。階層やナビゲーションラベルまできちんと設定できたら、メニューの保存をクリックします。これで、メニューはひとまず作成終了です。

 

step
3
メニューのカスタマイズ

 

カスタマイズしたことがなければ、メニューは左詰めになっているはずです。

 

真ん中に寄せたい場合は、外観カスタマイズメニューのカラー設定PCヘッダーメニューのメニューをセンター寄せにするをクリックすればOKです。

メニューをセンターに

 

 背景色や文字色もここでカスタマイズできるので、このまま設定項目を紹介します。

 

背景色メニュー背景の色が変わります
背景色(グラデーション上部)背景色と違う色にした場合は、グラデーションができます
ボーダー上下メニューの上下の境界線の色が変わります(白を推奨)
ボーダー左右色メニューの一番左と右の部分の境界線の色が変わります(背景色と同じ色推奨)
ボーダー右色カテゴリー同士の境目の色が変わります
文字色メニューの文字の色が変わります
グラデーションを横向きグラデーションが横向きになります
第一階層のメニューを太字にするメニューの文字が太くなります(チェック推奨)
メニューの横幅を100%にするメニューがサイトの端まで表示されます(ヘッダーやインフォメーションバーと統一するのをおすすめです)
メニューの幅カテゴリーごとの幅が変わります(狭いと字がつぶれるので、160pxくらいで大丈夫かなと)
メニューの上限すき間を作る上下にすきまができます(設定しないをおすすめ)
下層ドロップダウンメニュー背景色子カテゴリーのメニュー色が変わります(親の背景色と同一がおすすめです)

 

 以上でPC用のヘッダーメニューは終了。

 

続いてスマホ表示されたときのヘッダーの位置に来る以下のメニュー作成を紹介します。(ハンバーガーメニューとも呼ばれる)

スマホメニューの見本

 

 

まずは先ほどと同じ手順で新しいメニューを作成します。メニュー名は分かりやすく、スマホ用メニューにして、メニュー設定ではスマートフォン用スライドメニューにチェックしましょう。

 

そしたらメニューを保存をクリック。これであとは見栄えを少し変えたりするだけです。AFFINGER5管理メニューからスマホ用スライドメニューへいきます。

 

スマホ用スライドメニューの設定

 

アイコンデザインやメニューの位置など自分で確かめつつ、カスタマイズしてみましょう。以上でPCヘッダーのメニューとスマホ用のメニューの設定が完了です。

 

ヘッダー画像エリア

 

この部分のカスタマイズ方法は大きく2パターン。

 

  • 画像を挿入する
  • 好きなカテゴリーの記事を流す

 

画像の挿入はカスタマイズヘッダー画像から新規画像を追加で好きな画像を挿入しましょう。公式も推奨するように、2200×500ピクセルがおすすめです。

ヘッダー画像の新規追加

 

この下の方にある、ヘッダー画像の横幅を100%にするをクリックすると端から端まで画像は表示されるようになります。(あまり推奨しません)

 

綺麗な画像を挿入すると訪問した人の注意を集められるのでいいですが、以下の点に注しましょう。

 

  • 画質が荒かったり、汚いと離脱の原因
  • 画像が大きい分読み込みに時間が掛かり表示速度の低下の原因

 

画像に関しては、ブログで使う理想の容量とサイズは?【圧縮手順は簡単3ステップ】表示速度に関してはアフィンガー向けブログの表示速度の改善法【53人分のデータあり】を参考にしてください。

 

次はスライドショーの流し方です。完成すると、お気に入りのカテゴリーの記事がアップでスライドショーで表示されます。

 

 方法はAFFINGER5管理ヘッダー記事スライドショーへ。ヘッダーに記事をスライドショーで表示にチェックするをクリックします。

 

ヘッダーの記事のスライドショー

 

あとは表示するカテゴリーIDに自分の表示させたいIDを入力して保存します。カテゴリーID投稿カテゴリーから確認できます。

 

ただし、ヘッダーの記事のスライドショーはサイトが重くなる可能性があるので注意が必要です。表示速度が遅すぎると感じた人は、スライドショーの機能の全停止にチェックすると記事が自動で流れないようになります。

 

以上でヘッダー画像をカスタマイズする方法は終了です。

 

おすすめ記事(ヘッダーカードエリア)

 

最後は4つの記事をヘッダーのメニューの下に表示させる方法を紹介します。

 

とても簡単ですよ。
リットン

 

手順はAFFIGNER5管理おすすめ記事一覧おすすめヘッダーカードまでいきます。あとは画像を挿入して、テキストとおすすめの記事のURLを張りつけるだけ。

 

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

 

あとは自分の好みに合わせて、

  • テキストのある背景画像をほかす
  • テキストのある背景が図尾を暗くする
  • デフォルト

のいずれかにチェックしましょう。チェックできたら、保存をクリックでおすすめヘッダーカードの設定は終了です

 

サイト全体に表示するとPCに表示しないなどはチェックしない方がいいですよ。いじるのはあくまでデザインの部分だけで十分です。
リットン

 

以上でヘッダーエリア周辺のカスタマイズは終了です。

 

アフィンガー5のヘッダーをカスタマイズしてブログをおしゃれにしよう

 

今回はアフィンガー5のヘッダーエリア周辺のカスタマイズ方法をほぼ0から100まで解説しました。

 

アフィンガー5は初心者のころにとってはカスタマイズできる箇所が多すぎて、非常に難しく感じるかもしれません。

 

しかし、カスタマイズの壁さえ乗り越えれば超優秀なテーマなので、乗り換えずに頑張ってみましょう。

 

今回は以上です。ありがとうございました。

関連記事AFFINGER5は初心者におすすめできる?【嘘なしでレビュー】

関連記事AFFINGER5のフッターのカスタマイズ方法【誰でもできる】

-AFFINGER

Copyright © Lytton Blog