AFFINGER5

AFFINGER5のウィジェットカラー変更方法!各パーツ・エリアの解説も!

悩める人

  • 「AFFINGER5」のウィジェットパーツ、エリアの詳細を知りたい
  • ウィジェットエリアのカラー変更変更方法が分からない

このような疑問にお答えします。

 

本記事の内容

  • ウィジェットエリアのカラーカスタマイズ方法
  • ウィジェットパーツ・エリアの詳細

 

本記事の信頼性

私は「AFFINGER5」を2年半以上使用しており、現在は専業ブロガーとして活動しています。

 

「AFFINGER5」では、非常に多くのウィジェットパーツとエリアが用意されています。

有料WordPressテーマの中でも、ウィジェットの機能性は随一でしょう。

しかし、豊富さ故に機能を活用しきれていない方も多い印象なので、ウィジェットパーツ・エリアの詳細を解説していきます。

また、サイドバーの見出しカラー変更方法についても、併せてご紹介します。

本記事を読み終えることで、「AFFINGER5」のウィジェット機能を最大限に活用できるようになりますよ。

それでは、早速内容を見ていきましょう。

 

 

AFFINGER5(アフィンガー5)の見出しウィジェットカラー変更方法

まず、「AFFINGER5」のウィジェットの見出しカラーを変更する方法です。

ウィジェットの見出しとは、例えば下記のようなイメージです。

ウィジェットの見出し

 

見出しカラーの変更方法ですが、WordPressのダッシュボード画面から「外観 > カスタマイズ」をクリックします。

外観 > カスタマイズ

 

カスタマイザー画面が開くので、「各テキストとhタグ(見出し)> ウィジェットタイトル(サイドバー)」と遷移します。

各テキストとhタグ(見出し)> ウィジェットタイトル(サイドバー)

 

「ウィジェットタイトル(サイドバー)」から見出しのカスタマイズを行っていきましょう。

ウィジェットタイトル(サイドバー)

見出しのカスタマイズ項目

  • 文字色
  • 背景色
  • ボーダー色
  • スタイル
  • 背景画像
  • 余白
サイドバーはパソコン画面で必ず表示されるエリアなので、デザインはしっかり整えておきましょう!
はらちゃん

 

AFFINGER5(アフィンガー5)のウィジェットパーツを解説

ウィジェットパーツとは、ウィジェット設定画面の左半分に表示されているパーツのことを言います。

「AFFINGER5」の場合、下記ウィジェットパーツが備わっています。

なお、名称に「STINGER」と付いているものが「AFFINGER5」の専用ウィジェットパーツです。

どのようなウィジェットパーツなのか、またカラーをカスタマイズできるパーツもあるので、順番に詳細を解説していきます。

 

00_STINGERカスタムHTML

00_STINGERカスタムHTML

「00_STINGERカスタムHTML」とは、HTML形式でコンテンツ配置できるウィジェットパーツです。

WordPressの標準として「カスタムHTML」のパーツもありますが、機能は同様になります。

HTML形式なので、テキストを装飾することも可能です。

当サイトの利用例を挙げると、「00_STINGERカスタムHTML」のウィジェットパーツでアドセンス広告を表示しています。

 

01_STINGERサイドバーメニュー

01_STINGERサイドバーメニュー

「01_STINGERサイドバーメニュー」とは、その名の通りサイドバーのウィジェットエリアに配置することを想定したメニューパーツです。

サイドバーメニューの設置イメージとしては、下記の通りです。

サイドバーメニュー

親カテゴリーだけでなく、子カテゴリーも展開して表示されます。

なお、サイドバーメニューを設置するには、事前にメニュー構成を設定しておく必要があります。

メニューの設定方法については、下記記事で詳細を解説していますので、よろしければご覧ください。

関連記事AFFINGER5(アフィンガー5)の各種メニュー設定方法!スマホ用も解説!

カラーカスタマイズメニュー

WordPressカスタマイザー画面 >メニューのカラー設定 > サイドメニューウィジェット

 

02_STINGER問合せボタン

02_STINGER問合せボタン

「02_STINGER問合せボタン」とは、お問い合わせページへのリンクを設置できるウィジェットパーツです。

リンクの設置イメージとしては、下記の通りです。

お問い合わせページへのリンクボタン

サイズやデザイン的にも、サイドバーへ設置するのが最適なウィジェットパーツでしょう。

なお、お問い合わせページは自動で作成されるのではなく、自分で作成し、URLを指定する必要があります。

お問い合わせページへのURL指定

お問い合わせページの作成方法は下記の記事で解説しています。

関連記事AFFINGER5(アフィンガー5)のお問い合わせフォームは標準機能で設置できる?

まだページを作成していない方は、是非参考にしてください。

カラーカスタマイズメニュー

WordPressカスタマイザー画面 >オプションカラー > 問合せボタン(ウィジェット)

 

03_STINGERフリーボックス

03_STINGERフリーボックス

「03_STINGERフリーボックス」とは、タイトル付きでボックスを表示できるウィジェットパーツです。

例えば、下記は記事上にフリーボックスを表示したものです。

フリーボックス

機能としては、「AFFINGER5」に備わっている見出しフリーボックスと同様です。

なお、HTMLやCSSで装飾も可能となっているので、アピールしたい商品やアイテム、挿入したいテキストがあれば、必要に応じてご利用ください。

カラーカスタマイズメニュー

WordPressカスタマイザー画面 >オプションカラー > フリーボックスウィジェット

 

04_STINGER_RSSボタン

04_STINGER_RSSボタン

「04_STINGER_RSSボタン」とは、サイトの更新情報などを通知するための機能です。

例えば、下記はサイドバーにRSSボタンを設置したイメージです。

サイドバーRSSボタンを設置したイメージ

読者のサイト訪問率アップを期待できる機能となっています。

カラーカスタマイズメニュー

WordPressカスタマイザー画面 >オプションカラー > RSSボタン

 

05_STINGER最新の投稿一覧

05_STINGER最新の投稿一覧

「05_STINGER最新の投稿一覧」とは、その名の通り最新記事を表示できるウィジェットパーツです。

例として、下記はサイドバーに最新記事一覧を表示したイメージです。

サイドバーに最新記事一覧を表示

特に設定は必要なく、ウィジェットエリアにパーツを配置するだけで完了する、お手軽な機能となっています。

 

06_STINGERオリジナルボタン

06_STINGERオリジナルボタン

「06_STINGERオリジナルボタン」とは、アイコン付きで指定した記事へのリンクを配置できるボタンです。

例えば、下記はサイドバーにおすすめWordPressテーマの記事リンクを配置したものです。

オリジナルボタンの例

 

なお、ボタンに表示されるアイコンは「FontAwesome 4」のコードを指定することで、自由に変更可能です。

アイコンコードの指定画面

2020年11月現在、「FontAwesome」はバージョン6までリリースされています。

しかし、「AFFINGER5」はバージョン4の「FontAwesome」を利用しています。

最新バージョンのアイコンは利用できないので、ご注意ください。

 

「FontAwesome 4」のアイコンコードの取得方法ですが、まず「FontAwesome 4」の公式サイトへアクセスします。

「FontAwesome 4」の公式サイト

 

アクセスするとアイコンの一覧が表示されるので、設定したいアイコンボタンをクリックします。

アイコンボタンをクリック

 

クリックすると、アイコンの詳細情報が表示されます。

画面下に「<i class="○○ ○○○○" aria-hidden="true"></i>」と表示されているので、「○○ ○○○○」のアイコンコードをコピーしてください。

アイコンコード

 

最後に、コピーしたアイコンコードをウィジェットの「Webフォント」へ貼り付ければ完了です。

「Webフォント」へ貼り付け

アイコンが反映され、オリジナルボタンが表示されていることを確認しましょう。

カラーカスタマイズメニュー

WordPressカスタマイザー画面 >オプションカラー > オリジナルボタン(ウィジェット)

 

07_STINGERお知らせエリア

07_STINGERお知らせエリア

「07_STINGERお知らせエリア」とは、最新記事をお知らせ一覧として表示できるウィジェットパーツです。

例えば、下記はサイドバーにお知らせを表示したものです。

サイドバーにお知らせを表示

先ほどの「05_STINGER最新の投稿一覧」とは異なり、アイキャッチ画像なしで最新記事が簡易表示される形式となっています。

カラーカスタマイズメニュー

WordPressカスタマイザー画面 >オプションカラー > お知らせ

 

08_STINGERカテゴリ別ボックス

08_STINGERカテゴリ別ボックス

「08_STINGERカテゴリ別ボックス」とは、指定したカテゴリページにのみ表示されるウィジェットパーツです。

例えば、下記は当サイトの「WordPress」というカテゴリページだけ表示されるテキストです。

「WordPress」のカテゴリページだけ表示されるテキスト

おすすめしたいコンテンツがページごとに異なる場合に、最適な機能となっています。

また、HTMLやCSSで装飾することも可能です。

 

カテゴリの指定にはIDが必要となるので、カテゴリ一覧ページからIDを取得するようにしましょう。

カテゴリのID

 

09_STINGERカスタム投稿一覧

09_STINGERカスタム投稿一覧

「09_STINGERカスタム投稿一覧」とは、その名の通り記事一覧を表示する機能です。

設定方法ですが、WordPressのダッシュボードから「AFFINGER5 管理」をクリックします。

AFFINGER5 管理

 

次に、メニュー一覧から「その他」を選択します。

メニュー一覧の「その他」

 

下へスクロールすると上級者向けとして「カスタム投稿一覧の設定」の項目があるので、設定を変更しましょう。

カスタム投稿一覧の設定

基本的に、利用する機会はない機能となるでしょう。

 

10_STINGER記事別ボックス

10_STINGER記事別ボックス

「10_STINGER記事別ボックス」とは、先ほどの「08_STINGERカテゴリ別ボックス」と異なり、指定した記事にのみ表示されるコンテンツです。

表示したい記事のIDが必要となるので、記事一覧からIDを取得しましょう。

記事のID

 

11_STINGERサイト管理者紹介

11_STINGERサイト管理者紹介

「11_STINGERサイト管理者紹介」とは、プロフィール情報を表示できるウィジェットパーツです。

例えば、下記はサイドバーにプロフィールを表示したものです。

チェックありのプロフィール

なお、プロフィールの設置するにはいくつか手順があります。

詳細については下記記事で解説していますので、プロフィールを設置したい方はご覧ください。

関連記事AFFINGER5(アフィンガー5)のプロフィール全エリア設置方法を解説!

 

17_STINGERガイドマップメニュー

17_STINGERガイドマップメニュー

「17_STINGERガイドマップメニュー」とは、ステップ形式でリンクを設置できるメニューのことを言います。

例えば、下記はブログの始め方のガイドマップメニューです。

ブログの始め方のガイドマップメニュー

「AFFINGER5」では、ガイドマップメニューを2つまで作成することができます。

よって、「17_STINGERガイドマップメニュー」に加え、「18_STINGERガイドマップメニュー2」の項目も用意されています。

 

ガイドマップメニューを作成するには、事前にWordPressのメニュー機能から構成を組んでおく必要があります。

詳細な手順については、下記記事をご参照ください。

関連記事AFFINGER5(アフィンガー5)の各種メニュー設定方法!スマホ用も解説!

 

「AFFINGER5」専用のウィジェットパーツの解説は以上となります。

最新記事やおしゃれなガイドマップメニューなど、様々なウィジェットパーツを備えていることが分かりましたね!
はらちゃん

 

AFFINGER5(アフィンガー5)のウィジェットエリアを解説

ウィジェットエリアとは、先述のウィジェットパーツを設置できる場所のことを言います。

「AFFINGER5」では、下記ウィジェットエリアが用意されています。

配置できるエリアを画像付きで、詳細に解説していきます。

 

サイドバートップ

ほとんどのWordPressテーマでサイドバーのウィジェットエリアが設けられています。

しかし、「AFFINGER5」はサイドバーエリアが2つに分けられています。

その1つが「サイドバートップ」です。

「サイドバートップ」とは、サイドバーの上に位置するエリアです。

サイドバートップ

サイドバートップには、アドセンス広告やおすすめのカテゴリを設置しておけば、読者のクリック率アップを期待できます。

 

サイドバーウィジェット

もう1つのサイドバーエリアが「サイドバーウィジェット」です。

サイドバーウィジェット

サイドバートップとサイドバーウィジェットを分ける必要がありませんので、どちらかを利用するだけで問題ないでしょう。

 

スクロール広告用

「スクロール広告用」とは、画面をスクロールしてもサイドバーで追従表示されるエリアのことを言います。

追従イメージとしては、下記アニメーションの通りです。

スクロール広告のアニメーション

サイバーエリアのコンテンツはスクロールすると、当然上に消えていってしまいます。

しかし、スクロールしても常に表示されるので、読者の視界に常に入ります。

アピールしたい広告を配置すると、CV率もアップするでしょう。

アドセンス広告の追従表示は禁止されているので、ご注意ください。

 

各種Googleアドセンスウィジェット

「AFFINGER5」にはGoogleアドセンスに関して、下記4つのウィジェットエリアが用意されています。

4つのウィジェットエリア

  • Googleアドセンス用336px(A)
  • Googleアドセンス用336px(B)
  • Googleアドセンスのスマホ用
  • Googleインフィード広告

アドセンス広告を配置できるウィジェットエリアですが、詳細は下記記事で解説しています。

関連記事AFFINGER5(アフィンガー5)のアドセンス広告利用手順はこれ!

併せてご覧ください。

 

PCのみ投稿記事上に表示

「PCのみ投稿記事上に表示」とは、アイキャッチ画像と本文の間に表示されるウィジェットエリアになります。

その名の通り、パソコンで記事を閲覧したときだけ表示されます。

PCのみ投稿記事上に表示

記事上のコンテンツは読者が必ず目にするので、積極的に活用するようにしましょう。

 

スマホ用上部のみ

「スマホ用上部のみ」とは、ヘッダーメニューとパンくずリストの間に表示されるウィジェットエリアです。

もちろん、スマートフォンで閲覧した場合のみ表示されます。

スマホ用上部のみ

なお、「スマホ用上部のみ」は記事だけでなく、トップページの上部にも表示されるので、ご注意ください。

 

スマホ用記事下のみ

「スマホ用記事下のみ」とは、記事本文の下に表示されるウィジェットエリアです。

先ほどの「スマホ用上部のみ」と同様に、スマートフォンだけ表示されます。

スマホ用記事下のみ

ただし、トップページでは表示されず、記事下のみ表示される仕様となっています。

 

投稿記事・固定記事上下に一括表示

「AFFINGER5」には投稿記事と固定記事に関して、下記4つのウィジェットエリアが備わっています。

4つのウィジェットエリア

  • 投稿記事の上に一括表示
  • 投稿記事の下に一括表示
  • 固定記事の上に一括表示
  • 固定記事の下に一括表示

上記ウィジェットエリアはPC・スマホに関係なく、全てのデバイスで表示されます。

特に、投稿記事のウィジェットエリアについては、アドセンス広告やおすすめコンテンツを配置したいときに役立つので、利用機会も多くなるでしょう。

 

ヘッダー右(フッター)ウィジェット

「ヘッダー右(フッター)ウィジェット」とは、その名の通りヘッダー右とフッターで表示されるウィジェットエリアです。

例えば、下記はフッターにウィジェットを表示したイメージです。

ヘッダー右(フッター)ウィジェット

なお、ヘッダー右だけコンテンツを表示し、フッターエリアは非表示とすることもできます。

非表示にする方法ですが、WordPressのダッシュボードから「AFFINGER5 管理」へ遷移してください。

AFFINGER5 管理

 

次に、メニュー一覧から「ヘッダー」をクリックします。

メニュー一覧のヘッダー

 

下へスクロールすると「ヘッダー設定」の項目があるので、「ヘッダー右ウィジェットをフッターに表示しない」にチェックを入れましょう。

ヘッダー右ウィジェットをフッターに表示しない

フッターのウィジェットが非表示になれば、設定完了です。

 

ヘッダ-画像エリア上・下のウィジェット

ヘッダー画像とは、「AFFINGER5」のトップページに表示される下記画像のことを言います。

ヘッダー画像

この上に表示されるエリアが「ヘッダー画像エリア上のウィジェット」、下に表示されるエリアが「ヘッダー画像エリア下のウィジェット」です。

利用シーンはあまりないかもしれませんが、目に留まりやすいエリアであることに間違いはないでしょう。

 

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

先述のヘッダー画像の代わりに、テキストを挿入できるのが「ヘッダー画像エリアウィジェット」です。

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

ヘッダー画像は非表示となるので、ご注意ください。

 

フッター右用ウィジェット(2・3列目)

フッターエリアには、先ほどの「ヘッダー右(フッター)ウィジェット」を含め、コンテンツを3列に分けて配置できます。

イメージとしては下記の通りです。

フッターのウィジェット

しかし、見栄えとしては悪いので、利用はあまりおすすめしません。

 

トップページ上部ウィジェット

「トップページ上部ウィジェット」とは、トップページのメインコンテンツ部分の上部に表示されるエリアのことを言います。

トップページ上部ウィジェット

当サイトではヘッダー下に4つのおすすめ記事一覧を表示していますが、その下に表示されるエリアです。

ちなみに、先述の「ヘッダー画像エリアウィジェット」はおすすめ記事一覧の上に表示されます。

アフィリエイトで取り扱う商品やサービスのセール情報や、告知を行うと効果的なエリアです。

 

トップページ下部ウィジェット

新着記事一覧の下に表示されるのが「トップページ下部ウィジェット」です。

トップページ下部ウィジェット

読者がトップページを読み終え、離脱する前の最後のアピールエリアとなります。

おすすめ記事や広告などを設置しておくと、効果的と言えるでしょう。

 

オリジナルのショートコード作成ウィジェット

「オリジナルのショートコード作成ウィジェット」とは、これまでのウィジェットエリアと異なり、タグ機能となります。

例えば、「オリジナルのショートコード作成ウィジェット」に下記のような任意のテキストを登録します。

 

次に、記事投稿画面から「タグ > その他パーツ > オリジナルショートコード」をクリックします。

クリックすると、「originalsc」というショートコードが本文に挿入されます。

originalsc

 

ショートコードが挿入された状態で記事を確認すると、ウィジェットで登録したテキストが表示されます。

ウィジェットのテキストが表示

広告をショートコードに変換しておけば、大元のウィジェットを変更するだけで、全ての記事の内容が変更されます。

ただし、1つしかショートコードは設定できないので、ご注意ください。

 

スマートフォンのフッターに固定するウィジェット

スマホをスクロールしても、常にフッター部分に表示され続けるのが「スマートフォンのフッターに固定するウィジェット」です。

設置例としては、下記のようなイメージです。

スマートフォンのフッターに固定するウィジェット

 

こちらのウィジェットエリアとは別に、スマホのフッターに固定メニューを表示することも可能です。

固定メニューの設定方法については、下記記事を参考にしてください。

関連記事AFFINGER5(アフィンガー5)の各種メニュー設定方法!スマホ用も解説!

 

AMPサイドバーウィジェット

「AFFINGER5」には、Googleも推奨する高速表示技術のAMPが搭載されています。

AMPを有効化している場合、サイドバーには「AMPサイドバーウィジェット」を利用し、コンテンツを配置するようにしましょう。

 

カテゴリーの上・下に一括表示

先述の投稿・固定ページと同様に、カテゴリーページの上部・下部にもコンテンツを配置できるウィジェットエリアが用意されています。

例えば、下記はカテゴリーページの上部にテキストを配置したものです。

カテゴリーページの上部にテキスト配置

カテゴリー名と記事一覧の間に表示されます。

ただし、カテゴリーごとにコンテンツは変更できませんので、ご注意ください。

 

404ページ

同じドメインかつ存在しないページのURLへアクセスした際、コンテンツを表示できるウィジェットエリアが「404」ページです。

例として、下記は任意のコンテンツを表示した404ページとなっています。

404ページ

 

ただし、「404ページ」のウィジェットは設定していなくても、「Not Found」というページが存在していない旨のメッセージが表示されます。

Not Found

存在しないページに読者がアクセスする可能性は低いので、設定必須ではありません。

 

スライドメニュー内上・下に表示

スマホのヘッダーエリアにはスライドメニューを表示させることができますが、その上部と下部にウィジェットエリアが用意されています。

例えば、下記はスライドメニュー内の上部にコンテンツを配置したものです。

スライドメニュー内の上部にコンテンツを配置

スマホユーザーがタップしやすい位置にコンテンツを配置できます。

 

スライドメニュー(検索)に表示

スマホヘッダーの検索ボタンをタップすることで、表示されるエリアにコンテンツを配置できます。

設置イメージとしては、下記の通りです。

スライドメニュー(検索)に表示

利用する場面は少ないですが、このようなウィジェットエリアがあることも覚えておきましょう。

 

検索結果ページ(上部・下部)に表示

「AFFINGER5」では検索フォームを設置できますが、検索後の画面にウィジェットエリアが上部・下部と用意されています。

例えば、下記は検索結果ページの上部にコンテンツを配置したものです。

検索結果ページの上部にコンテンツを配置

 

以上が「AFFINGER5」に設置できるウィジェットエリアとなります。

ウィジェットエリアの豊富さで言えば、WordPressテーマの中ではトップクラスと言えるでしょう!
はらちゃん

 

AFFINGER5(アフィンガー5)のウィジェットまとめ

「AFFINGER5」のウィジェットパーツには、最新記事やプロフィール、お問合せボタンなど様々なコンテンツが備わっています。

また、ウィジェットエリアも非常に豊富で、有料WordPressテーマの中でも数はトップレベルと言えます。

ウィジェットパーツとエリアを上手に組み合わせれば、回遊率の高いサイトに仕上げられるでしょう。

さらに、カラーのカスタマイズも細部まで行えるのが分かりましたね。

「AFFINGER5」のウィジェット機能で、読者の見やすい、かつアクセス数の多いサイトを目指しましょう!
はらちゃん
 
  • この記事を書いた人
  • 最新記事

はらちゃん

専業ブロガー【経歴】開始6ヶ月のブログ収益月400円 ▶︎ 2年半で月50万円 | 私が実践した初心者の方に役立つブログ運営術・SEOノウハウを発信 | 現在4つのブログを運営中 | Twitterフォロワー2,000人超え | 25歳で結婚し、現在27歳の超童顔若手ブロガー

-AFFINGER5

© 2020 アフィリエイトゼミ