AFFINGER（アフィンガー）のカスタマイズ方法を解説！【トップページ・サイドバー・メニュー対応】

悩んでいる人

「AFFINGER（アフィンガー）のカスタマイズ方法が分からない。」
「AFFINGER（アフィンガー）でカスタマイズできるエリア名称が分からない。」

こういった悩みを解決します。

AFFINGERはカスタマイズ性が高いWordPressテーマです。
自分好みのWebサイトを作れる一方で、初心者のときは分からないことも多いですよね。

Taki

他人のサイトを全て真似すると、「独自性」がなく印象に残りづらいサイトになってしまいます。

本記事では、AFFINGERの設定内容を理解しながら、理想とするデザイン・機能にカスタマイズできるようになることを目指します。

上記の記事内容でお伝えしていきます。

それでは、解説していきます。

AFFINGER（アフィンガー）をカスタマイズする方法は4つ

早速ですが、AFFINGERをカスタマイズする方法は大きく分けて4つあります。

「AFFINGERをカスタマイズする」＝「上記の4つからカスタマイズする」ということです。
上記の4つからカスタマイズする内容と手順をカンタンに説明しますね。

AFFINGER 管理

AFFINGER 管理では、Webサイトの根幹となるデザインや機能を設定します。

基本的なデザインや機能のオンオフを決めるだけでなく、SEOやOGPに関する設定が可能です。AFFINGERを使用するなら優先して「AFFINGER 管理」から設定しましょう。

AFFINGER 管理からカスタマイズする手順は、WordPress管理画面>「AFFINGER 管理」です。

カスタマイザー

Taki

見栄えに直結するカスタマイズ内容が多いので重要ですよ。

カスタマイザーからカスタマイズする手順は、WordPress管理画面>「外観」>「カスタマイズ」です。

自分好みのWebサイトを作るために「カスタマイザー」の設定は必須です。

ウィジェット

ウィジェットでは、トップページやサイドバー、投稿ページの上下などに任意のコンテンツをカンタンに挿入できます。
Googleアドセンス広告もウィジェットから挿入します。

ウィジェットからカスタマイズする手順は、WordPress管理画面>「外観」>「ウィジェット」です。

37箇所の挿入場所（エリアの名称）があり、有効活用できれば他のサイトとの差別化しやすいです。

ランキング管理

ランキング管理では、ランキングデザインの設定ができ、ランキング用ボタンのカラー設定などが可能です。他のカスタマイズと比べると優先順位は下がります。

ランキング管理からカスタマイズする手順は、WordPress管理画面>「ランキング管理」です。

AFFINGER（アフィンガー）でカスタマイズできるエリアの名称

AFFINGERをカスタマイズする方法が4つあると分かったところで、エリアの名称についても説明させてください。

「AFFINGER 管理」や「ウィジェット」では、AFFINGER独自のエリアの名称が頻繁に使われています。
そのため、「エリアの名称」が分からないと、どこをカスタマイズしているのかイメージができません。

まず、AFFINGERのサイトは「headerエリア」と「header以下のエリア」の2つに分けられます。

headerエリアは「各ページの最も上部～本文まで」の部分です。
また、header以下エリアは「本文～フッターの最下部までのエリア」を指します。

これから、それぞれを画像付きで解説しますので、まだ理解できていなくても問題ありません。

headerエリア

headerエリアから解説していきます。「各ページの最も上部～本文まで」のことです。

上記画像のとおり、headerエリアは「ヘッダーエリア」から始まり、「ヘッダー画像下エリア」までのことを指します。

Taki

英語表記（headerエリア）とカタカナ表記（ヘッダーエリア）で意味が異なるので、少しややこしいかもしれません。

もう一度だけ上記画像を見てほしいのですが、オレンジ色のエリア（「ヘッダー右（フッター）」・「ヘッダー画像上エリア」・「ヘッダー画像下エリア」）はウィジェットで使用されるエリアの名称となっています。

ウィジェットからコンテンツを挿入する場合に役立てることでしょう。

header以下のエリア

続いてheader以下のエリアを解説します。「本文～フッターの最下部までのエリア」のことです。

headerエリアでもお伝えしましたが、オレンジ色のエリアがウィジェットで挿入できる場所になっています。

上記画像を見て分かるとおり、header以下エリアにはコンテンツを挿入する箇所が豊富に用意されています。画像を見ながら、制作するWebサイトのイメージをしてみてはいかがでしょうか。

Taki

繰り返しですが、AFFINGERは「headerエリア」と「header以下のエリア」の2つによって構成されています。各エリアの名称を正しく理解することで、効率よく正確なカスタマイズができるしょう。

AFFINGERトップページのカスタマイズ方法

それでは、実際にAFFINGERトップページのカスタマイズをしてみましょう。

前提として、WordPress管理画面>「設定」>「表示設定」の"ホームページの表示"にて『最新の投稿』が選択された状態を想定しています。

固定ページを選択するよりも、デフォルトの『最新の投稿』が選択された状態のほうがAFFINGERの機能を最大限に活用できるのでおすすめです。

1.「AFFINGER 管理」の「トップページ」からカスタマイズする

トップページをカスタマイズする場合、WordPress管理画面>「AFFINGER 管理」>「トップページ」にて設定できます。

1つずつ解説します。

カラム数

まず、WordPress管理画面>「AFFINGER 管理」>「トップページ」からカラム数を変更できます
（カラムとは「列」という意味で、縦に並んでいる要素のこと。）

デフォルトでは2カラムですが、1カラムにできたり、LP化できたりします。

ブログやアフィリエイトサイトでは、デフォルトの2カラムが多い印象です。
企業サイトは、1カラムでイメージ画像を大きく見せるレイアウトが人気の印象です。

Taki

LP化のレイアウトは、トップページでSEOキーワードを対策しているアフィリエイトサイトに人気があります。

「必ず〇カラムにしなければならない」という決まりごとはないので、あなたの好みで選択するのがおすすめです。

本文へのコンテンツの挿入

の2つから選ぶことができます。

「あらかじめ作成した固定記事の挿入」の場合は、上記画像の①に記事IDを入力してください。

「挿入コンテンツにて作成した内容の挿入」の場合は、上記画像の②（挿入コンテンツ）に入力した内容がトップページに自動挿入されます。

②でトップページの内容を挿入すると、プレビュー機能による事前確認できません。
そのため、固定記事から挿入する①のカスタマイズ方法をおすすめします。

記事一覧の表示

記事一覧の表示は必ずしも設定する必要はありません。

新着記事を手当たり次第に表示しても、読者の興味をひくことはできないでしょう。

新着記事よりも、あなたのイチオシ記事（おすすめ記事）を読んでもらう工夫をするのがおすすめです。

この機能の良いところは、ワンボタンで新着記事を一覧表示できるところにあります。

使用する場合には、カテゴリーIDを記載すれば、新着記事をすぐに表示できるでしょう。

また、記事一覧で表示される記事数は、WordPress管理画面>「設定」>「表示設定」の”1ページに表示する最大投稿数”の数が反映されます。

ただし、この機能を使用せずにショートコードから新着記事を表示できます。

新着記事を表示するショートコードをウィジェットの好きなエリアに貼り付けるほうが便利です。

以下のショートコードの「cat="カテゴリーID"」に、あなたのWebサイトのカテゴリーIDを記載するだけです。

 shortcode
[st-catgroup cat="カテゴリーID" page="表示する記事数" order="desc" orderby="id" child="on" slide="off" slides_to_show="3,3,2" slide_date="" slide_more="ReadMore" slide_center="off" type=""]

「page="表示する記事数"」には、表示したい記事数を記載してください。

タブ式カテゴリーの表示

複数のカテゴリーがあるWebサイトであれば、タブ式カテゴリーを表示してもいいでしょう。

WordPress管理画面>「AFFINGER 管理」>"タブ式カテゴリー一覧"から設定できます。

まず、トップページに表示するためには「タブ式カテゴリー一覧をフロントページに表示する」が有効化されている必要があります。

また、カテゴリーIDを2つ以上設定する必要があるため、1つしかカテゴリーがないWebサイトでは表示できません。

さらに、タブ式カテゴリーで表示できるカテゴリーは4つまでなので、5つ以上のカテゴリーが存在する場合、表示するカテゴリーを選ぶ必要があります。

いくつかの制限はありますが、Webサイトを見やすく、読者に分かりやすい構造にするためにも、タブ式カテゴリーは積極的に使いたい機能です。

NEWS（おしらせ）の表示

上記画像のようなNEWS（おしらせ）の表示ができます。

表示するカテゴリーや件数も変更できるため、融通が利く機能です。

企業サイトやビジネスサイトでは使用されるケースが多い一方で、ブログでは使用されることが少ないです。

使用しなくても問題ない機能なので、カスタマイズする優先順位は低いといえます。

動画背景の表示

好きなYouTubeの動画を背景に流すことができます。
ただし、この機能の使用は推奨しません。

理由は明確で、Webサイトが重たくなってしまうためです。

アーティストや芸能人の運営するサイトであれば、重たいサイトでも読者は読みたいかもしれません。
しかし、多くの場合には重たいサイトは避けられてしまいます。

どうしても使用したい場合には、YouTubeの共有リンクIDを「背景に流すYouTube動画ID」に入力します。

YouTubeの共有リンクIDは、動画を閲覧時に「共有」をクリックすれば確認できます。

共有リンクは上記のようなURL構造になっているため、「共有リンクIDのみ」を該当箇所に入力してください。

2.スライドショーを実装・カスタマイズする

1つずつご紹介します。

ヘッダー画像エリアに大きなスライドショーを実装できます。

Webサイトの表示速度は若干低下しますが、読者の印象に残りやすく興味をひきつけるので、実装する価値は十分にあります。

ヘッダー画像下エリアにサムネイル画像のスライドショーを実装できます。

確実に読者の目に入りながらも、ヘッダー画像エリアのスライドショーよりもコンパクトなことが利点です。

また、トップページだけでなく、全ページに実装することが可能です。

3.ヘッダーカードリンクを実装・カスタマイズする

上記画像のような"ヘッダーカードリンク"を見たことがある人も多いのではないでしょうか。
AFFINGERではカンタンに実装できます。

デフォルトの設定では、トップページのみに表示されます。

トップページ以外でも表示したい場合は「サイト全体に表示する」を有効化してください。

また、テキストを設定したときに背景をぼかしたい場合は「テキストのある背景画像をぼかす」を有効化しましょう。

4.「ウィジェット」からカスタマイズする

「AFFINGER 管理」だけでなく、ウィジェットでもトップページにコンテンツを挿入できます。

上記の3点にコンテンツの挿入が可能です。

「トップページ上部」と「トップページ下部」は使用している人がたまにいる印象です。

あえてウィジェットを使用しなくても、コンテンツを挿入できることが多いため、使用する機会は少ないかもしれません。

AFFINGERサイドバーのカスタマイズ方法

次に、AFFINGERサイドバーのカスタマイズ方法を解説します。

そもそもサイドバーとは、メインコンテンツとは区別されて、グループ化されたブロックです。
AFFINGERでは、メインコンテンツの右端または左端に配置できます。

サイドバーを適切に表示できれば、読者にとって使いやすいWebサイトになります。

注意点として、AFFINGERは「サイドバーはスマホで非表示」という設定がデフォルトです。

スマホで表示されていると勘違いしないようにしましょう。

1.「AFFINGER 管理」の「全体設定」からカスタマイズする

まず、WordPress管理画面>「AFFINGER 管理」>「全体設定」からサイドバーをカスタマイズできます。

特別なこだわりがなければ、サイドバーはデフォルトの右側で問題ありません。

そして、「サイドバーのカテゴリーリンクに簡易デザインを適用する」については、デフォルトの有効化している状態で問題ありません。

自分で書いたCSSを適用させるうえで、不都合がある場合のみ無効化しましょう。

2.ウィジェットからカスタマイズする

「サイドバートップ」→「サイドバーウィジェット」→「スクロール広告用」のエリア順に上から表示されます。

「スクロール広告用」は、PC閲覧時にスクロールに応じて追尾する広告エリアです。

"広告エリア"ではありますが、広告以外のコンテンツを挿入しても問題ありません。

当ブログでは、WordPress管理画面>「AFFINGER 管理」>「ヘッダー下/おすすめ」>"おすすめ記事一覧"から、「サイドのスクロールに表示する」を有効化しています。

広告ではなく、おすすめの記事を「スクロール広告用」のエリアに表示しているということです。

AMPサイドバーウィジェットは、AMP機能を使用しているときのみ表示されます。
AMPを使用していない人は設定する必要がありません。

プロフィールカードは、ブログ型のサイトであれば挿入しましょう。
挿入方法は「11_STINGERプロフィールカード」をサイドバーのウィジェットエリアに追加するだけです。

「お問い合わせフォーム」については、ほとんどのWebサイトで挿入すべきです。
「02_STINGER問い合わせボタン」をサイドバーのウィジェットエリアに追加すれば挿入できます。

カテゴリーリンクの設置は自由です。
当ブログでは設置したほうが読者にサイト構成を伝えやすいため挿入しています。

サイドバーウィジェットにデフォルトで追加されている「メタ情報」を残している人がいますが、必ず削除するようにしましょう。

「メタ情報」が設置してあっても読者のためにはなりません。

それどころか、ログインページに移動できるため、サイトのセキュリティ面から問題があります。

3.カスタマイザーからカスタマイズする

WordPress管理画面>「外観」>「基本エリア」>「サイドバー」から、背景色を変更できます。

作成したいサイトの雰囲気に合わせて背景色を変更しましょう。

AFFINGERメニューのカスタマイズ方法

続いて、AFFINGERメニューのカスタマイズ方法を解説します。

各メニューの概要やカスタマイズ方法をかんたんにご紹介します。

ヘッダーメニュー

ヘッダーメニューは、PC（960px以上）閲覧時に上部に表示されるメニューです。

グローバルメニュー（グローバルナビゲーション）とも呼ばれます。

読者がWebサイトの全体像をつかむためにも、できる限りカスタマイズしたいメニューです。

ヘッダーメニューをカスタマイズする上で重要なポイントは、「Webサイトの主要なコンテンツをまとめること」です。

偏ったメニューを作っていると、読者に適切なWebサイト構造を伝えることはできません。

ヘッダーメニュー（横列）

ヘッダーメニュー（横列）とは、ヘッダーエリアに横並びで表示するメニューのことです。

デザインの違いとして、ヘッダーメニューは「2階層」まで表示できますが、ヘッダーメニュー（横列化）は「1階層」までしか表示できません。

また、ヘッダーメニューとは異なり、PCだけでなくスマホでも表示できるのが「ヘッダーメニュー（横列化）」です。

以下画像のとおり、ヘッダーメニュー（横列）はスマホで表示することができます。

サイドメニュー

サイドメニューとは、サイドバーに表示するメニューのことです。

サイドメニューの役割は、ヘッダーメニューと役割が似ています。

ヘッダーメニューと差別化できる場合のみ、カスタマイズしてもよいでしょう。

ただし、Webサイトを作成した時点では、ヘッダーメニューだけで十分です。

サイドメニューは、Webサイトのコンテンツ量が多くなってから使用するのがおすすめです。

ガイドマップメニュー

ガイドマップメニューとは、読者に「どこから読んでほしいか」を伝えるためのメニューです。

読者が「どこから読んだらいいのか分からない」と迷ってしまわないように、設置したほうがいいメニューです。

ただし、読む順番がバラバラでも問題ない記事が多い場合には設置の必要はありません。

ボックスメニュー

ボックスメニューとは、アイコン付きのボックスメニューのことです。

1つだけではなく複数の設置が可能で、列数や並びをカスタマイズできます。

各デザインの見本を以下の画像にまとめました。

フッターメニュー

フッターメニューとは、下部に横並び表示されるメニューです。

ヘッダーメニューやサイドメニューと比べて、読者の目に入りづらいため挿入するコンテンツの重要度は低いです。

ただし、カスタマイズすることで、ヘッダー上部にフッターメニューと同じリンクを追加できます。

プライバシーポリシーポリシーやお問い合わせフォームを設置することをおすすめします。

スマホスライドメニュー

スマホスライドメニューとは、スマホ（600px以下）で表示されるメニューです。

アイコンをタップすると表示されるメニューのことです。
当ブログでは左上にスマホスライドメニューがあります。

多くのWebサイトでスマホスライドメニューが採用されています。

ヘッダーメニュー（PC※960px以上）はPCだけのメニューなので、スマホスライドメニューなどのスマホ用のメニューが必要です。

検索メニュー

検索メニューとは、スマホ閲覧時に表示する検索アイコン型のメニューです。

デフォルトのデザインとして、「オーバーレイ」と「スライド」の2種類が用意されています。

検索アイコン（虫メガネアイコン）のため、「読者が検索しそうなコンテンツ」をあらかじめ挿入するのがおすすめです。

スマホミドルメニュー

スマホミドルメニューとは、スマホの上部に表示する2～3列の固定メニューです。

スマホで表示するメニューの中でもクセがなく、使いやすいのが特徴的です。

PCではヘッダーメニューを表示して、スマホではミドルメニューを表示しているWebサイトが多く見られます。

そのため、ヘッダーメニューの内容をミドルメニューでも表示することが多いです。

スマホフッターメニュー

スマホフッターメニューとは、スマホ閲覧時にスクロールすると下部に表示されるメニューのことです。

スクロールすると表示されるため、読者の目に入りやすく、他のメニューよりも使用してもらえるのが特徴的です。

スマホフッターメニューを表示しているときは、「ページTOPへのボタン」が非表示になります。

そのため、スマホフッターメニューの中にページTOPに移動するボタンを用意するのがおすすめです。

カスタマイズのアイディアを広げる「AFFINGERのサンプルサイト集」

ここまでの内容でAFFINGERのカスタマイズ方法について理解を深めることができました。

しかし、「カスタマイズのアイディア」が浮かばない人もいるでしょう。
そんな人のために、"AFFINGERのサンプルサイト"をご紹介します。

企業サイトのサンプルサイト①

>>「企業サイトのサンプルサイト①」をもっと見る

企業サイトのサンプルサイト②

>>「企業サイトのサンプルサイト②」をもっと見る

ブログサイトのサンプルサイト①

>>「ブログサイトのサンプルサイト①」をもっと見る

ブログサイトのサンプルサイト②

>>「ブログサイトのサンプルサイト②」をもっと見る

まとめ

本記事では、AFFINGERのカスタマイズ方法を解説しました。

「他人のサイトを全て真似すること」ではなく、「自分の理想とする個性的なWebサイトを作れるようになること」を目指した内容でした。

本記事を読む前は、カスタマイズできるエリア名称や実際のカスタマイズ方法で分からなかったところも多いでしょう。

もし、カスタマイズしていて不明な点があれば、本記事を読み直して独自性のあるWebサイトを作成してみてはいかがでしょうか。

以上、「AFFINGERのカスタマイズ方法」に関する記事でした。