どこを操作したらいいか教えてくれる？
ブログやサイトの顔ともいうべき、トップページ。
自分の個性や、扱う商品・コンテンツの特徴を表す、魅力的で読者が利用しやすいデザインにしたいですね。
でも、いざテーマを導入したものの、どこをいじって良いのか迷ってしまう初心者の方もいるかも知れません。
そこでここでは、AFFINGER5のトップページをカスタマイズするやり方を、画像を交えながら紹介していきたいと思います。
目次
アフィンガーをカスタマイズする３つの方法
トップページのカスタマイズをする前に、AFFINGER5のカスタマイズ方法について見ていきます。
AFFINGER5では基本的に、「カスタマイザー」・「ウィジェット」・「テーマ管理」の３つの方法でカスタマイズを行います。
それぞれ主に、以下のようなカスタマイズができるようになっています。
- カスタマイザー：各カラー・ロゴ・ヘッダー画像・背景画像・基本エリアの設定など
- ウィジェット ：トップページやサイドバー、投稿の上下などへの任意のコンテンツ表示
- テーマ管理 ：基本的なデザインパターン、カラムやサイドバーの位置変更、各項目の設定など
それぞれの場所への入り方は、次の通りです。
ダッシュボード（管理画面）左のメニューより、
- カスタマイザー ：「外観」→「カスタマイズ」
- ウィジェット ：「外観」→「ウィジェット」
- テーマ管理 ：「AFFINGER5 管理」→「AFFINGER5 管理」
を選択することで、それぞれのカスタマイズができるページに移動できます。
アフィンガーはカスタマイズ要素が多いと言っても、この３つを抑えておけば、基本的なカスタマイズ作業はほぼ行えます。
トップページの構成
この記事では、「固定ページ」を別に作ってトップページ（フロントページ）にするのではなく、元からあるトップページの状態からカスタマイズする方法について説明していきます。
固定ページを使ってトップページをカスタマイズする方法については、こちらの記事をどうぞ。
-
-
AFFINGER5で固定ページを使ったトップページの作り方は？
AFFINGER5のトップページはそのままでも機能的で使いやすいですが、カスタマイズして自分好みのトップページにしたい人も多いかも知れませんね。ここでは、固定ページを使ったトップページのカスタマイズ方法について見ていきます。
続きを見る
大きく分けると、トップページはこのような部分で構成されてますね。
それぞれどういったカスタマイズができるのか、一つずつ見ていきます。
【１】ヘッダーのカスタマイズ
カスタマイザー
- 「カスタマイズ」→「基本エリア設定」→「ヘッダーエリア」から、ヘッダーのカラーなどの細かい設定
- 「カスタマイズ」→「ヘッダー画像」で、ヘッダー下部（メニュー下）に入れる画像のアップロードや設定
- 「カスタマイズ」→「ウィジェット」より、ヘッダー部分に任意のコンテンツを入れることが可能
ウィジェット
「外観」→「ウィジェット」より、ヘッダー部分に任意のコンテンツを入れることができます。
テーマ管理
「AFFINGER5 管理」→「ヘッダー」→「ヘッダー設定」より、ヘッダー右側に電話番号を入れるなどの細かい設定ができます。
【２】メニューのカスタマイズ
まず、メニューを新規作成する必要があります。
- 「外観」→「メニュー」を選択
- 画面左上の「メニューを編集」タブから「新しいメニューを作成しましょう」をクリック
- あとはメニュー名を入力したり項目を追加したり、画面の説明にしたがって設定していきます
ちなみに『AFFINGER5』では、PCヘッダー用メニューの項目数は「６個」を理想として作られてるようです。
カスタマイザー
- 「カスタマイズ」→「メニュー」よりメニューの編集
- 「カスタマイズ」→「メニューのカラー設定」→「PCヘッダーメニュー」より、カラーその他の細かい設定ができます
ウィジェット
ウィジェット画面で「01_STINGERサイドバーメニュー」を右側の各ウィジェットにドラッグすることで、任意の場所にメニューを表示できます。
なお、左上の「ライブビューで管理」をクリックすると、「カスタマイザー」に切り替わりプレビュー画面を見られます。
このように、ヘッダー部分だけでなく、サイドバーやそれ以外の任意の場所にメニューを表示できます。
カラーは、「カスタマイズ」→「メニューのカラー設定」→「サイドメニューウィジェット」より変更可能です。
テーマ管理
「AFFINGER5 管理」→「メニュー」より、PCだけでなくスマホ用のメニューの細かい設定などが可能です。
【３】ヘッダーコンテンツのカスタマイズ
カスタマイザー
「カスタマイズ」→「ヘッダー画像」より、メニュー下ヘッダー画像の新規追加・変更ができます。
ウィジェット
ヘッダー画像のエリアに、任意のコンテンツを入れることができます。
テーマ管理
ヘッダー画像のトリミング・リンク先設定
「AFFINGER5 管理」→「ヘッダー」→「ヘッダー画像」より、ヘッダー画像のトリミングや、クリックした時のリンク先などの設定が可能です。
任意コンテンツの設定および、画像や投稿記事のスライドショー
同じく「AFFINGER5 管理」→「ヘッダー」より、ヘッダー部に任意のコンテンツを入れたり、画像や投稿記事のスライドショーを表示することができます。
テキスト入りのヘッダー画像を挿入する
- 「カスタマイズ」→「ヘッダー画像」よりヘッダー画像をアップロード
- 「AFFINGER5 管理」→「ヘッダー」→「ヘッダーコンテンツ設定」より文字を入力
すると、上の映像のようなテキスト入りの画像が入ったヘッダーができます。
おすすめヘッダーカード
「AFFINGER5 管理」→「おすすめ記事一覧」→「おすすめヘッダーカード」より、ヘッダー画像の下にカード型リンクを４つまで設置できます。
【４】メインコンテンツのカスタマイズ
テーマ管理
任意のコンテンツを挿入
「AFFINGER5 管理」→「トップページ」より、「お知らせ」や任意のコンテンツを挿入したり、トップページを１カラムやLPにするといった、レイアウトの変更が行えます。
サムネイル画像・フォントのカスタマイズ
「AFFINGER5 管理」→「デザイン」よりサムネイル画像やフォントなど、サイト全体のデザイン設定ができます。
【５】サイドバーのカスタマイズ
カスタマイザー
「カスタマイズ」→「ウィジェット」より、サイドバーに任意のコンテンツを挿入できます。
「カスタマイズ」→「各テキストとhタグ（見出し）」→「ウィジェットタイトル（サイドバー）」より、サイドバーに挿入したコンテンツの見出しをカスタマイズできます。
ウィジェット
ウィジェット画面からもカスタマイザーと同様、サイドバーに任意のコンテンツを挿入できます。
【６】プロフィールカードのカスタマイズ
まず、ウィジェット画面からプロフィールカードをサイドバーに挿入します。
「11_STINGERサイト管理者紹介」を、右の「サイドバートップ」もしくは「サイドバーウィジェット」にドラッグします。
サイドバーに、サイト運営者のプロフィールが表示されました。
「カスタマイズ」→「オプションカラー」→「サイト管理者紹介」より、ヘッダー画像も入ったプロフィールカードに変更するなど、様々なカスタマイズができます。
【７】フッターのカスタマイズ
カスタマイザー
「カスタマイズ」→「基本エリア設定」→「フッターエリア」から、フッターのカラーや画像をカスタマイズできます。
ウィジェット
フッターを２列・３列にする
ウィジェット画面の「フッター右用ウィジェット」（２列目・３列目）に、左の項目からそれぞれ任意のコンテンツをドラッグします。
このように、フッターの真ん中にウィジェットの「２列目」のコンテンツが、右側に「３列目」のコンテンツが入ります。
２列目のウィジェットのみにコンテンツを入れると、このように横幅の右側70%のスペースに、コンテンツが表示されます。
まとめ
以上、『AFFINGER5』のトップページのカスタマイズ方法について、詳しく見てきました。
今回記事を書くにあたり、筆者も色々このブログをカスタマイズしてみて、知らないことも色々あって勉強になりました。
しばらく経ってカスタマイズ方法を忘れてしまったらこの記事を見返してみて、ブログを見に来てくれる人にとって、より見やすく使いやすいトップページにしていこうと思います。
『AFFINGER5』について詳しくは、こちらからどうぞ。
-
-
アフィンガーの評判・口コミをレビュー！購入して損した理由とは？
アフィンガー（AFFINGER5）はSEOにも強く高速、カスタマイズ性も高く、多くのブロガーやアフィリエイターに人気のWordPressテーマです。ここではどんなテーマなのか紹介しつつ、個人的に感じるイマイチな点を書いてみたいと思います。
続きを見る