カスタマイズ

AFFINGER7のウィジェット一覧と設定方法|おすすめの使い方も解説

AFFINGER7のウィジェット一覧と設定方法・おすすめの使い方を解説

こんにちは "osaboo"です。"@osaboo_Bot"

この記事で解決できる悩み

  • AFFINGER7のウィジェットの設定方法がわからない
  • どのウィジェットを使えばいいのか知りたい
  • ウィジェットを追加・削除する方法を知りたい
  • おすすめのウィジェットの使い方を知りたい

この記事では、これらのお悩みを解決します。

「まずはブログを始めたい!」という方は、『WordPressブログ完全ガイド』をご覧ください。
開設から運営・収益化までを初心者向けに画像付きでわかりやすく解説しています。

AFFINGER7のウィジェットとは?

AFFINGER7のウィジェットは、サイドバーやフッターなどに、さまざまな機能やコンテンツを表示できる機能です。

プロフィールや人気記事、カテゴリー一覧、お知らせなどを簡単に配置できるので、サイトの利便性や回遊性を高められます。

また、AFFINGER7にはWordPress標準のウィジェットに加えて、AFFINGER専用の便利なウィジェットも用意されています。用途に応じて使い分けることで、より見やすく使いやすいサイトを作成できます。

ウィジェットを設定する場所

AFFINGER7のウィジェットは、WordPress管理画面の「外観 → ウィジェット」から設定できます。

ここでは、サイドバーやフッターなどのウィジェットエリアごとに、表示したいウィジェットの追加・編集・削除を行えます。

WordPress 5.8以降はブロックウィジェットに対応しているため、ブロックエディターと同じ感覚で直感的に操作できるのも特徴です。

設定場所

Menu『WordPress管理画面 → 外観 → ウィジェット』をクリックします。

ウィジェット配置エリア

AFFINGER7では、ウィジェットエリアごとに表示する内容を自由に設定できます。

サイドバーやフッターだけでなく、ヘッダーやトップページなど、用途に応じてさまざまな場所へウィジェットを配置できるのが特徴です。

テーマ専用のウィジェットエリアも豊富に用意されているので、広告やプロフィール、お知らせなどを効果的に表示できます。

ここでは、AFFINGER7の基本的なウィジェットの配置エリアをご紹介します。

配置するウイジェットをざっと…イメージしてみてください。

例えば…「プロフィールは、ここに貼ろう!広告はここ!」みたいなイメージです。

osaboo
osaboo

ウィジェットを追加・編集する方法

AFFINGER7では、ウィジェットエリアに追加・並び替え・削除を行うことで、表示内容を自由にカスタマイズできます。

操作はどれも簡単なので、まずは基本的な使い方を覚えておきましょう。

利用できるウィジェットの種類や配置エリアは、テーマやバージョン、導入しているプラグインによって異なる場合があります。

ウィジェットの追加方法

Menu『WordPress管理画面 → 外観 → ウィジェット』をクリックします。

ウィジェット画面で「利用できるなウィジェット」の中から、ウィジェット配置エリアに設置する項目を選択します。

1-6a|WordPress管理|ウィジェット

ウィジェットを追加してみよう(例)

「00_AFFINGERカスタムHTML」を「サイドバー(上部)」に追加する手順

手順は次の通りです。

  • ウィジェット項目を選択します。
  • ウィジェットエリア(ウィジェットを配置するエリア)を選択します。
    → 例:サイドバー(上部)
  • 『ウィジェットを追加』をクリックします。
1-7|WordPress管理|ウィジェット
  • ドラッグ&ドロップで簡単に設置することもできます。
1-8a|WordPress管理|ウィジェット

以上で、ウィジェットの追加は完了です。(ウィジェットを追加する手順は、すべての同じです。)

ウィジェットの削除方法

ウィジェットを削除する方法は、以下の2通りがあります。

  1. ウィジェット項目内の『削除』メニューを使用して、ウィジェットを完全に削除する方法
  2. 『使用停止中のウィジェット』に移動して、一時的に削除する方法

❶ ウィジェット項目内の『削除』メニューで完全に削除する方法

ウィジェットを完全に削除する方法です。一度削除すると元に戻せないので、必要な場合は再度追加する必要があります。

ウィジェットエリアにある削除したいウィジェット項目を選択します。(▼をクリックして開きます)

1-9|WordPress管理|ウィジェット

ウィジェットの内容が表示されるので、最下部にある『削除』をクリックします。

1-10|WordPress管理|ウィジェット
  • この方法は、ウィジェットが完全に削除されます。再利用の可能性がある場合は、次の❷を参考にしてください。

❷『使用停止中のウィジェット』に移動して一時的に削除する方法

ウィジェットを一時的に削除する場合は、「使用停止中のウィジェット」へ移動します。必要になったときは、保存されているウィジェットを元のエリアへ移動するだけで簡単に復元できます。

削除したい設置済ウィジェット項目ををドラッグ&ドロップで『使用停止中のウイジェット』に移動します。

1-11|WordPress管理|ウィジェット

『使用停止中のウィジェット』を完全に削除するには、赤いボタンの「使用停止中ウィジェットをクリア」をクリックします。

1-12|WordPress管理|ウィジェット

ウィジェット一覧

AFFINGER7では、WordPress標準のウィジェットAFFINGER専用のウィジェットを利用できます。

WordPress標準ウィジェットは、検索やカテゴリー一覧、最新記事の表示など、基本的な機能を追加するためのウィジェットです。

一方、AFFINGER専用ウィジェットは、ランキングやお知らせなど、サイト運営に役立つ便利な機能が用意されています。

ここでは、それぞれのウィジェットの特徴や使い方を紹介します。

WordPress標準ウィジェット

ここからは、WordPressに標準搭載されているウィジェットについて、各機能の概要を紹介します。

RSS

RSS/Atom フィードからのエントリーを表示します。

1-29|利用できるウィジェット一覧

URLとタイトルを入力すると、以下のような「RSSフィード」を表示できます。(サンプル)

1-74|RSS|サンプル

RSS設定について

  • Menu『WordPress管理画面 → ユーザー → プロフィール』で『feed(URL)』を設定できます。

RSSは「Rich Site Summary(リッチ・サイト・サマリー)」の頭文字をとったもので、Webサイトの新着・更新情報を配信する技術です。

RSS フィードは、ブログやオンライン マガジンなど、お気に入りの Web サイトの最新情報を常に入手できる簡単な方法です。 サイトが RSS フィードを提供していれば、投稿があると通知が届き、投稿の概要または投稿全文を読むことができます。

アーカイブ

投稿の月別アーカイブを表示します。

1-30|利用できるウィジェット一覧

以下のような「アーカイブ」ページへのリンクを表示できます。(サンプル)

1-75|アーカイブ|サンプル

カスタム HTML

HTMLや広告コードなど、任意のコードを挿入できます。「00_AFFINGERカスタムHTML」「カスタムHTML(広告用)」と同等の機能です。

1-31|利用できるウィジェット一覧

 以下のように、カスタムHTMLを使った広告を表示できます。(サンプル)

1-76|カスタムHTMLを使用した広告のサンプル

HTMLとは?

HTML(HyperText Markup Language)とは、Webページを作成するための言語です。
見出し・段落・画像・リンクなど、それぞれの要素の役割を指定し、ブラウザに正しく表示させるために使われます。

広告コードやバナー、ボタン、埋め込みコンテンツなど、多くのWebパーツはHTMLで作られています。HTMLを貼り付けることで、それらをWebページに表示できます。

カテゴリー

カテゴリーのリストを表示します。(「16_AFFINGERカテゴリー」と同じ機能を備えています)

1-32|利用できるウィジェット一覧

以下のような「カテゴリー」ページへのリンクを表示できます。(サンプル)

1-77|カテゴリー|サンプル

カレンダー

サイトの投稿カレンダーを表示します。

1-33|利用できるウィジェット一覧

以下のような「カレンダー」を表示できます。(サンプル)

1-78|カレンダー|サンプル

ギャラリー

画像ギャラリーを表示します。

1-34|利用できるウィジェット一覧

「画像を追加」をクリックし、メディアライブラリからギャラリー用の画像を選択すると表示されます。

以下のような「ギャラリー」を表示できます。(サンプル)

1-79|ギャラリー|サンプル

タグクラウド

よく使用されているタグのクラウドを表示します。

1-35|利用できるウィジェット一覧

タクソノミー:「カテゴリー」「タグ」「リンクカテゴリー」「タグ」「カテゴリ」から選択できます。

以下のような「タグクラウド」を表示できます。(サンプル)

1-80|タグクラウド|サンプル

タグクラウドとは?

Webページごとにメタデータとして設定されたタグを、テキストデータとして視覚的に一覧表示したものを指します。

  • Menu『WordPress管理画面 → 投稿 → タグ』でタグを追加できます。(エディター画面でも可)
  • Menu『WordPress管理画面 → 外観→ カスタマイズ → 見出しタグ(hx)/ テキスト → タグクラウド』で、テキスト色・ボーダー色・背景色の設定ができます。

テキスト

任意のテキストを表示します。

1-36|利用できるウィジェット一覧

以下のような「テキスト」を表示できます。(サンプル)

1-81|テキスト|サンプル

ナビゲーションメニュー

ナビゲーションメニューを表示します。項目や並び順は「メニュー構造」で設定して下さい。

1-37b|利用できるウィジェット一覧

Menu『WordPress管理画面 → 外観 → メニュー』で、作ったメニューが表示できます。

以下のような「ナビゲーションメニュー」を表示できます。(サンプル)

  • 以下サンプルでは、ナビゲーションメニューを設置できるウィジェットエリアを3つご紹介します。ぜひ参考にしてください。
1-82a|ナビゲーションメニュー|サンプル|ヘッダーナビデーション(右※PCのみ)
1-83|ナビゲーションメニュー|サンプル|ウィジェットエリア:サイドバー(上部)
1-84|ナビゲーションメニュー|サンプル|ウィジェットエリア:フッター(2列目)

ナビゲーションメニューは、ウィジェットエリアに自由に配置でき、設置場所ごとに表示するメニューを選択できます。

ブロック

ブロックを含むウィジェットを表示します。

1-38|利用できるウィジェット一覧

00_AFFINGERカスタムHTML」や「カスタムHTML」と同様の機能を持ちますが、タイトルは表示できません。通常、タイトルが不要なパーツをマイブロックなどで作成し、ショートコードを貼り付けて使用すると便利です。

メタ情報

ログイン、RSS、WordPress.org へのリンクを表示します。

1-39|利用できるウィジェット一覧

以下のような「メタ情報」を表示できます。(サンプル)

1-85|メタ情報|サンプル

動画

メディアライブラリ内から、または YouTube・Vimeo・その他のプロバイダからの動画を表示します。

1-40|利用できるウィジェット一覧

動画を表示できます。

固定ページ

サイトの固定ページ一覧を表示します。

1-41|利用できるウィジェット一覧

 固定ページへのリンク一覧を表示できます。

最近のコメント

最近のコメントを表示します。

1-42|利用できるウィジェット一覧

以下のような「最近のコメント」を表示できます。(サンプル)

1-89|最近のコメント|サンプル

最近の投稿

最近の投稿を表示します。(「07_AFFINGERお知らせエリア」と同じ機能を備えています)

1-43|利用できるウィジェット一覧

以下のような「最近の投稿」を表示できます。(サンプル)

1-88|最近の投稿|サンプル

検索

サイト内検索フォームを表示します。

1-44|利用できるウィジェット一覧

以下のような検索フォームを表示できます。(サンプル)

1-86|検索|サンプル

検索について

  • Menu『WordPress管理画面 → 外観→ カスタマイズ → オプション(その他)→ 検索フォーム』で、文字・背景・フォームスタイル全般の設定ができます。

画像

画像を表示します。

1-45|利用できるウィジェット一覧

画像を表示できます。

音声

音声プレーヤーを表示します。

1-46|利用できるウィジェット一覧

音声を再生できます。

AFFINGER専用ウィジェット

ここからは、AFFINGER7専用ウィジェット「xx_AFFINGERxxxxx」について、各機能の概要を紹介します。

00_AFFINGERカスタムHTML

任意のコードを挿入可能です。(WordPress標準の「カスタムHTML」と同じ機能を備えています)

1-14|利用できるウィジェット一覧

01_AFFINGERサイドバーメニュー

設定要領は「13_AFFINGERサイドバーメニュー2」「14_AFFINGERサイドバーメニュー3(EX専用)と同等です。

サイドバーメニューを表示します。項目や並び順は「メニュー構造」で設定して下さい。

1-15|利用できるウィジェット一覧

Menu『WordPress管理画面 → 外観 → メニュー』で、作ったメニューが表示できます。

以下のような「サイドバーメニュー」を表示できます。(サンプル)

1-51-1|01_AFFINGERサイドバーメニュー|サンプル

メニューの位置・カラー設定について

  • Menu『WordPress管理画面 → 外観 → メニュー』メニューを編集タブで、メニューの表示位置を設定できます。
    ▶︎ 表示する位置の『□』にチェックを入れます。
  • Menu『WordPress管理画面 → 外観 → メニュー』位置を管理タブでも、メニューの表示位置を設定できます。
    ▶︎『サイドメニュー → メニューを選択 → メニュー名』
  • Menu『WordPress管理画面 → 外観 → カスタマイズ>メニュー>サイドメニュー(ウィジェット)』で、文字色・背景色・Webアイコンなどの設定ができます。

表示がうまくいかない場合は、「メニューの位置」で「サイドメニュー」にチェックが入っているか確認してみましょう。

Menu『WordPress管理画面 → 外観 → メニュー』をクリックします。

1-52a|メニュー設定|メニューの位置
  • 表示させたいメニューの「サイドメニュー」にチェックが入っていれば、正常に表示されます。

02_AFFINGER問合せボタン(ST-PRO)

問合せボタンを表示するウィジェットです。

1-16|利用できるウィジェット一覧

タイトルとURLを入力すると、以下のような「問合せボタン」を表示できます。(サンプル)

1-53|02_AFFINGER問合せボタン(ST-PRO)|サンプル

問い合わせボタンのカラー設定について

  • Menu『WordPress管理画面 → 外観 → カスタマイズ → オプション(その他)→ 問合せボタン(ウィジェット)』で、各種 色の設定 ができます。

03_AFFINGERフリーボックス

トピックス風の自由なボックスです。

1-17|利用できるウィジェット一覧

タイトルとテキストエリアを入力すると、以下のような「AFFINGERフリーボックス」を表示できます。(サンプル)

1-54|03_AFFINGERフリーボックス|サンプル

フリーボックスのカラー設定について

  • Menu『WordPress管理画面 → 外観 → カスタマイズ → オプション(その他)→ フリーボックス(ウィジェット)』で、各種 色の設定 ができます。

04_AFFINGER_RSSボタン

RSS配信用ボタンです。

1-18|利用できるウィジェット一覧

以下のような「AFFINGER_RSSボタン」を表示できます。(サンプル)

1-55|04_AFFINGER_RSSボタン|サンプル

RSSボタンのURL・カラー設定について

  • Menu『WordPress管理画面 → ユーザー → プロフィール』で、feed(URL)にURLを入力が必要です。
  • Menu『WordPress管理画面 → 外観 → カスタマイズ → オプション(その他)→ フリーボックス(ウィジェット)』で、各種 色の設定 ができます。

05_AFFINGER最新の投稿一覧

新着投稿一覧を表示します。

1-19|利用できるウィジェット一覧

以下のような「AFFINGER最新の投稿一覧」を表示できます。(サンプル)

1-56a|05_AFFINGER最新の投稿一覧|サンプル
1-57|05_AFFINGER最新の投稿一覧|サンプル
1-58|05_AFFINGER最新の投稿一覧|サンプル

記事一覧の表示設定について

  • Menu『WordPress管理画面 → AFFINGER管理 → トップページ』の記事一覧で「表示・非表示・表示数」の設定ができます。
1-59|AFFINGER管理|トップページ|記事一覧
  • Menu『WordPress管理画面 → AFFINGER管理 → 全体設定』のサムネイル画像設定・抜粋設定で「表示スタイル」の設定ができます。
1-60a|AFFINGER管理|全体設定|サムネイル画像設定

06_AFFINGERオリジナルボタン

オリジナルボタンを表示するウィジェットです。

デフォルトの状態です。
(URLを入力しないとボタンは表示されません)

1-20|利用できるウィジェット一覧

「タイトル・色・URL」を設定するだけです。
以下のようなボタンが自動生成されます。(サンプル)

1-62|利用できるウィジェット一覧
yajirusi-sita-80x40

以下のような「オリジナルボタン」を表示できます。(サンプル)

1-61|06_AFFINGERオリジナルボタン

07_AFFINGERお知らせエリア

お知らせ一覧(投稿リストのテキストリンク)を表示します。

1-21|利用できるウィジェット一覧

AFFINGER管理のトップページで設定する「News(お知らせ)」です。WordPress標準の「最近の投稿」の拡張版です。(カテゴリーの指定ができます)

カテゴリーごとに抽出した最新の投稿リストを、テキストリンク形式で表示できます。(サンプル)

1-64|07_AFFINGERお知らせエリア|サンプル

お知らせエリアの表示・カラー設定について

  • Menu『WordPress管理画面 → AFFINGER管理 → トップページ』の「NEWS(お知らせ)の表示」で、「表示タイトル・表示条件・表示数」を設定できます。
  • Menu『WordPress管理画面 → 外観 → カスタマイズ → オプション(その他)→ お知らせ』で、各種 色の設定 ができます。
1-63|07_AFFINGERお知らせエリア
  • 通常はトップページのメインエリア上部に設置されますが、ウィジェット機能を活用すれば、「サイドバー・フッター・投稿」など、ウィジェットエリアが対応している場所なら自由に配置できます。

08_AFFINGERカテゴリー別ボックス

カテゴリー別に表示を分けるボックスです。(コンテンツ内の上部に表示)

1-22|利用できるウィジェット一覧

IDと表示したい内容を入力すると、以下のように表示できます。
(サンプルでは「08_AFFINGERカテゴリー別ボックス」と入力しています)

パンくずの上に表示されるため、カテゴリー表示を目立たせたい場合に便利です。パンくずやカテゴリー表示を非表示にして、このウィジェットを活用することもできます。

1-65a|08_AFFINGERカテゴリ別ボックス|サンプル

09_AFFINGERカスタム投稿一覧

カスタム投稿一覧を表示します。

1-23|利用できるウィジェット一覧

Menu『WordPress管理画面 → AFFINGER管理 → その他』の「上級者向け」セクション内にある「カスタム投稿一覧の設定」から設定できます。

1-66|09_AFFINGERカスタム投稿一覧|サンプル

上級者向けのため、この記事では省略します。

10_AFFINGER記事別ボックス

記事別に表示を分けるボックスです。

08_AFFINGERカテゴリー別ボックス」と同じように、「記事ID」を指定して表示できます。

1-24|利用できるウィジェット一覧

IDとテキストエリアに表示したい内容を入力すると、以下のように表示されます。
(以下サンプルではテキストエリアに『10_AFFINGER記事別ボックス』と入力しています)

パンくずの上に表示されるため、パンくずやカテゴリーを非表示にしてこのウィジェットのテキストを設定すれば、特定の記事やグループを目立たせることができます。

1-67|10_AFFINGER記事別ボックス|サンプル

11_AFFINGERプロフィールカード

サイト管理者紹介を表示します。

1-25|利用できるウィジェット一覧

以下のような「AFFINGERプロフィールカード」が表示できます。(サンプル)

1-68|11_AFFINGERプロフィールカード|サンプル

プロフィールの情報・画像・カラー設定について

  • Menu『WordPress管理画面 → ユーザー → プロフィール』で、プロフィール情報の作成・編集ができます。
  • Menu『WordPress管理画面 → 外観 → カスタマイズ → オプション(その他)→ プロフィールカード』で、各種 画像や色の設定 ができます。

15_AFFINGERランクングウィジェット

ランクングウィジェットを表示します。

15_AFFINGERランクングウィジェット

AFFINGERタグのIDとタイトルを設定すると、指定したAFFINGERタグをランキング形式で表示できます。

  • 以下は、公式ページに掲載されているプレビュー画像です。
AFFINGERランキングウィジェットで表示したランキング一覧のプレビュー画面

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

ガイドマップメニューを表示します。項目や並び順は「メニュー構造」で設定して下さい。

1-26|利用できるウィジェット一覧

Menu『WordPress管理画面 → 外観 → メニュー』で、作ったメニューが表示できます。

以下のような「ガイドマップメニュー」が作成できます。(サンプル)

1-70-1|17_AFFINGERガイドマップメニュー|サンプル

メニューの位置・カラー設定について

  • Menu『WordPress管理画面 → 外観 → メニュー』メニューを編集タブで、メニューの表示位置を設定できます。
    ▶︎ 表示する位置の『□』にチェックを入れます。
  • Menu『WordPress管理画面 → 外観 → メニュー』位置を管理タブでも、メニューの表示位置を設定できます。
    ▶︎『サイドメニュー>メニューを選択>メニュー名』
  • Menu『WordPress管理画面 → 外観 → カスタマイズ → メニュー → サイドメニュー(ウィジェット)』で、文字色・背景色・Webアイコンなどの設定ができます。
    (ガイドメニューを個別で設定する場合はウィジェット項目で行います)

表示がうまくいかない場合は、「メニューの位置」で「ガイドマップメニュー」にチェックが入っているか確認してみましょう。

Menu『WordPress管理画面 → 外観 → メニュー』をクリックします。

1-52a|メニュー設定|メニューの位置
  • 表示させたいメニューの「ガイドマップメニュー」にチェックが入っていれば、正常に表示されます。

18_AFFINGERガイドマップメニュー2

設定要領は「17_AFFINGERガイドマップメニュー」と同様です。

ガイドマップメニュー2を表示します。項目や並び順は「メニュー構造」で設定して下さい。

1-27|利用できるウィジェット一覧

Menu『WordPress管理画面 → 外観 → メニュー』で、作ったメニューが表示できます。

以下のような「ガイドマップメニュー2」が作成できます。(サンプル)

1-70-2|18_AFFINGERガイドマップメニュー2|サンプル

メニューの位置・カラー設定について

  • Menu『WordPress管理画面 → 外観 → メニュー』メニューを編集タブで、メニューの表示位置を設定できます。
    ▶︎ 表示する位置の『□』にチェックを入れます。
  • Menu『WordPress管理画面 → 外観 → メニュー』位置を管理タブでも、メニューの表示位置を設定できます。
    ▶︎『サイドメニュー>メニューを選択>メニュー名』
  • Menu『WordPress管理画面 → 外観 → カスタマイズ → メニュー → サイドメニュー(ウィジェット)』で、文字色・背景色・Webアイコンなどの設定ができます。
    (ガイドメニューを個別で設定する場合はウィジェット項目で行います)

表示がうまくいかない場合は、「メニューの位置」で「ガイドマップメニュー2」にチェックが入っているか確認してみましょう。

Menu『WordPress管理画面 → 外観 → メニュー』をクリックします。

1-52a|メニュー設定|メニューの位置
  • 表示させたいメニューの「ガイドマップメニュー2」にチェックが入っていれば、正常に表示されます。

20_AFFINGERインフォメーション

インフォメーションを表示します。

1-28|利用できるウィジェット一覧

以下のような「インフォメーション」が作成できます。(サンプル)

インフォメーションの設定について

テキストとリンク先URLを入力するだけで、簡単にインフォメーション(PR)を作成可能です。

さらに、ウィジェット項目だけでおしゃれなアニメーションスタイルも手軽に設定できます。

21_AFFINGERカテゴリー一覧

カテゴリー一覧を表示します。

21_AFFINGERカテゴリー一覧

サイドバーに記事一覧を表示する場合の注意事項

Menu『WordPress管理画面 → AFFINGER管理 → トップページ / 記事一覧』の「記事一覧表示」を確認しましょう。

トップページや記事一覧ページで すでに表示している記事一覧を、サイドバーにも表示すると内容が重複してしまいます。同じ記事が並ばないように、表示設定を確認しましょう。

コンテンツ内やサイドバーに記事一覧ウィジェットを追加する場合は、事前に以下の設定を確認してください。

22_AFFINGER記事一覧

記事一覧を表示します。

22_AFFINGER記事一覧

「21_AFFINGERカテゴリー一覧」と同様に内容が重複しないように注意しましょう。

AFFINGER7 EX専用ウィジェット

ここからは、AFFINGER7 EX版で利用できる専用ウィジェットについて、各機能の概要を紹介します。

通常版にはない便利なウィジェットも用意されているので、用途に合わせて活用しましょう。

AFFINGER7-EXでは、前章で紹介した「01_AFFINGERサイドバーメニュー」に加え、「13_AFFINGERサイドバーメニュー2」「14_AFFINGERサイドバーメニュー3」の2つのウィジェット項目が利用可能です。

さらに、AFFINGER7-EX専用の拡張機能が追加された、「16_AFFINGERカテゴリー」「カスタムHTML(広告用)」のウィジェット項目も追加され、合計4つのウィジェットを活用できます。

それでは順番に見ていきましょう。

13_AFFINGERサイドバーメニュー2

設定要領は「01_AFFINGERサイドバーメニュー」「14_AFFINGERサイドバーメニュー3」と同様です。

サイドバーメニュー2を表示します。項目や並び順は「メニュー構造」で設定して下さい。

1-48a|EX|利用できるウィジェット一覧

Menu『WordPress管理画面 → 外観 → メニュー』で、作ったメニューが表示できます。

以下のような「サイドバーメニュー2」が作成できます。(サンプル)

1-51-2|13_AFFINGERサイドバーメニュー2|サンプル

メニューの位置・カラー設定について

  • Menu『WordPress管理画面 → 外観 → メニュー』メニューを編集タブで、メニューの表示位置を設定できます。
  • Menu『WordPress管理画面 → 外観 → メニュー』位置を管理タブでも、メニューの表示位置を設定できます。
  • Menu『WordPress管理画面 → 外観 → カスタマイズ → メニュー → サイドメニュー(ウィジェット)』で、文字色・背景色・Webアイコンなどの設定ができます。

表示がうまくいかない場合は、「メニューの位置」で「サイドメニュー2」にチェックが入っているか確認してみましょう。

Menu『WordPress管理画面 → 外観 → メニュー』をクリックします。

1-69|メニュー設定|メニューの位置
  • 表示させたいメニューの「サイドメニュー2」にチェックが入っていれば、正常に表示されます。

14_AFFINGERサイドバーメニュー3

設定要領は「01_AFFINGERサイドバーメニュー」「13_AFFINGERサイドバーメニュー2」と同様です。

サイドバーメニュー3を表示します。項目や並び順は「メニュー構造」で設定して下さい。

1-49|EX|利用できるウィジェット一覧

Menu『WordPress管理画面 → 外観 → メニュー』で、作ったメニューが表示できます。

以下のような「サイドバーメニュー3」が作成できます。(サンプル)

1-51-3|14_AFFINGERサイドバーメニュー3|サンプル

メニューの位置・カラー設定について

  • Menu『WordPress管理画面 → 外観 → メニュー』メニューを編集タブで、メニューの表示位置を設定できます。
    ▶︎ 表示する位置の『□』にチェックを入れます。
  • Menu『WordPress管理画面 → 外観 → メニュー』位置を管理タブでも、メニューの表示位置を設定できます。
    ▶︎『サイドメニュー>メニューを選択>メニュー名』
  • Menu『WordPress管理画面 → 外観 → カスタマイズ → メニュー → サイドメニュー(ウィジェット)』で、文字色・背景色・Webアイコンなどの設定ができます。

表示がうまくいかない場合は、「メニューの位置」で「サイドメニュー3」にチェックが入っているか確認してみましょう。

Menu『WordPress管理画面 → 外観 → メニュー』をクリックします。

1-69|メニュー設定|メニューの位置
  • 表示させたいメニューの「サイドメニュー3」にチェックが入っていれば、正常に表示されます。

16_AFFINGERカテゴリー

カテゴリーのリストを表示します。(WordPress標準の「カテゴリー」と同じ機能を備えています)

  • サムネイル画像を表示できます。
1-50|EX|利用できるウィジェット一覧

以下のような「AFFINGERカテゴリー」が作成できます。(サンプル)

1-72|16_AFFINGERカテゴリー|サンプル

「カテゴリー」にAFFINGER7の拡張機能が追加されています。

カスタムHTML(広告用)

任意のコードを挿入可能です。(WordPress標準の「カスタムHTML」と同じ機能を備えています)

  • 個々の投稿及び固定ページで非表示設定に連動します。( 設定な広告を表示しない
1-47|利用できるウィジェット一覧

非表示設定について

投稿・固定ページのエディター画面で非表示設定ができます。

エディター画面の右側の「設定」→「投稿・固定ページ」タブ→「非表示設定関連」にある『□ 設定中の広告を表示しない』にチェックを入れると、その投稿・固定ページでは広告を非表示にできます。

1-73|カスタムHTML(広告用)|エディター画面|設定|非表示設定関連

AFFINGER7で不要なウィジェットを無効化する方法

Menu『WordPress管理画面 → AFFINGER管理 → その他』をクリックし、下にスクロールして以下の項目が表示される位置まで移動します。

  • 黄色でマーキングされた項目を確認し、必要に応じて無効化してください。類似するものもあります。
AFFINGER管理「その他」タブの「無効化するウィジェット」設定画面

「このウィジェットは使わないな…」と思ったら、ここで非表示にしておくと、ウィジェット一覧がスッキリして管理しやすくなります。

例えば、AFFINGER専用ウィジェットとWordPress標準ウィジェットで同じ機能がある場合は、どちらか一方だけ使うのがおすすめです。

  • 「00_STINGERカスタムHTML」と「カスタムHTML」は機能が重複しているため、「カスタムHTML」を非表示にする。
  • 「05_STINGER最新の投稿一覧」と「最近の投稿」は機能が重複しているため、「最近の投稿」を非表示にする。
  • 「メタ情報」「動画」「音声」など、使う予定のないウィジェットは非表示にする。

機能が重複しているウィジェットや使わないウィジェットを整理しておくと、一覧が見やすくなり、後からの設定もスムーズになります。

利用できるウイジェット項目が多すぎると感じたら、無効化してみてくださいね。

おすすめのウィジェット配置例

AFFINGER7では、ウィジェットを自由に配置できます。とはいえ、最初は「どこに何を置けばいいの?」と迷いますよね。

ここでは、初心者におすすめのウィジェット配置例をご紹介します。

サイドバー(上部)

サイドバー上部は、訪問者の目に留まりやすい場所です。サイトの情報を伝えたいウィジェットを配置しましょう。

おすすめのウィジェット

  • プロフィール
  • 人気記事
  • カテゴリー
  • 検索
  • 広告(必要な場合)

記事下

記事を最後まで読んだユーザーは、次の行動につながりやすいタイミングです。

関連記事やプロフィールなどを配置して、サイト内を回遊してもらいましょう。

おすすめのウィジェット

  • 関連記事
  • おすすめ記事
  • CTA(お問い合わせ・ランキング・おすすめサービスなど)
  • 広告

フッター

フッターは、サイト全体で共通して表示されるエリアです。

訪問者が目的のページへ移動しやすいよう、サイト全体の案内を配置するのがおすすめです。

おすすめのウィジェット

  • カテゴリー
  • アーカイブ
  • メニュー
  • SNSリンク

ヘッダー(お知らせ)

キャンペーンやお知らせなど、目立たせたい情報がある場合に活用します。

頻繁に更新しない場合は、無理に使用する必要はありません。

おすすめのウィジェット

  • お知らせ
  • キャンペーン情報
  • 期間限定のお知らせ

初心者におすすめの配置

迷ったら、まずは次の構成から始めるのがおすすめです。

配置場所おすすめの内容
サイドバー上部プロフィール・人気記事・カテゴリー
記事下プロフィール・関連記事・CTA
フッターカテゴリー・メニュー・SNS
ヘッダーお知らせ(必要な場合のみ)

この配置なら、必要な情報を分かりやすく整理でき、ユーザーが目的のページへ移動しやすいサイトになります。

ウィジェットが表示されないときの対処法

ウィジェットを追加したのに表示されない場合は、設定ミスやキャッシュが原因になっていることがあります。

以下のポイントを順番に確認してみましょう。

1. ウィジェットを正しいエリアに配置しているか確認する

まずは、ウィジェットを配置した場所が合っているか確認しましょう。

例えば、「サイドバー(上部)」に追加したウィジェットは、サイドバーが表示されるページでしか表示されません。

配置したエリアと表示したい場所が一致しているかを確認してください。

2. 表示条件を確認する

AFFINGER7には、ページごとにウィジェットの表示・非表示を切り替えられる機能があります。

特定のページだけ表示しない設定になっていないか確認しましょう。

3. キャッシュを削除する

設定を保存しても画面に反映されない場合は、キャッシュが原因かもしれません。

ブラウザを更新したり、キャッシュ系プラグインを利用している場合はキャッシュを削除してから確認しましょう。

4. 変更内容を保存したか確認する

意外と多いのが、保存し忘れです。

ウィジェットを追加・編集した後は、必ず「更新」をクリックして保存しましょう。

5. テーマやプラグインとの競合を確認する

特定のウィジェットだけ表示されない場合は、プラグインやカスタマイズが影響していることもあります。

一時的にプラグインを停止したり、カスタマイズ内容を確認して原因を切り分けてみましょう。

?! それでも表示されない場合は…

ここまで確認しても改善しない場合は、次の点も確認してみましょう。

  • WordPress・AFFINGER7を最新バージョンに更新する
  • ブラウザのスーパーリロード(キャッシュを無視した再読み込み)を試す
  • シークレットウィンドウで表示を確認する
  • サーバーキャッシュを利用している場合は削除する

ポイント

初心者がつまずく原因の多くは、「配置場所の間違い」「保存し忘れ」「キャッシュ」の3つです。

表示されないときは慌てず、まずはこの3つから確認すると、ほとんどのケースで解決できます。

よくある質問(FAQ)

AFFINGER7のウィジェット設定画面はどこにありますか?

WordPress管理画面の「外観」→「ウィジェット」から設定できます。各ウィジェットエリアへドラッグ&ドロップするだけで、簡単に追加や並び替えができます。

ウィジェットを削除すると元に戻せますか?

一時的に削除する場合は「使用停止中のウィジェット」へ移動するため、元に戻せます。
一方、「完全に削除」を実行すると元に戻せないため、削除前に内容を確認しておきましょう。

ウィジェットを追加したのに表示されません。

配置したウィジェットエリアが正しいか、変更内容を保存したか、キャッシュが残っていないかを確認してください。また、表示条件の設定によって非表示になっている場合もあります。

AFFINGER7で不要なウィジェットを非表示にできますか?

はい。AFFINGER管理の「その他」にある「無効化するウィジェット」を利用すると、使わないウィジェットを非表示にできます。

初心者におすすめのウィジェットは何ですか?

まずは次のウィジェットを配置するのがおすすめです。

  • プロフィール
  • 人気記事
  • カテゴリー
  • 関連記事
  • 検索

これらを配置するだけでも、サイトの回遊性や使いやすさが向上します。

カスタマイザーウィジェットタイトルのスタイル設定

ウィジェットタイトルは、サイドバーやフッターなどに表示される見出しのデザインです。

AFFINGER7では、タイトルのデザインを変更できるので、サイト全体の雰囲気に合わせて見た目を統一できます。

ウィジェットタイトルの設定方法

Menu『WordPress管理画面 → 外観 → カスタマイズ → 見出し(hx)/ テキスト → ウィジェットタイトル(サイドバー)』をクリックします。

見出し(hx)/ テキスト
➡︎

1-90|カスタマイザー|見出しタグ(hx)/ テキスト

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

1-91|カスタマイザー|見出しタグ(hx)/ テキスト|ウィジェットタイトル(サイドバー)

詳細設定
⬇︎

1-92|カスタマイザー|見出しタグ(hx)/ テキスト|ウィジェットタイトル(サイドバー)|詳細
  • 設定が完了したら、最後に「公開」をクリックして確定します。

ポイント

ウィジェットタイトルは、サイト全体で共通して表示されるデザインです。

頻繁に変更する設定ではないので、サイトのイメージに合ったスタイルを選び、一度決めたら統一して使うことをおすすめします。

まとめAFFINGER7のウィジェット一覧と設定方法|おすすめの使い方も解説

今回は、AFFINGER7のウィジェット一覧や設定方法、おすすめの配置例についてご紹介しました。

ウィジェットを活用すると、サイドバーや記事下、フッターなどに必要な情報を配置でき、サイトの見やすさや使いやすさが向上します。

また、使わないウィジェットを無効化して整理したり、タイトルデザインを統一したりすることで、管理画面もスッキリして作業しやすくなります。

まずは以下の3つから設定してみましょう。

  • サイドバーや記事下に必要なウィジェットを配置する
  • 使わないウィジェットを無効化して整理する
  • ウィジェットタイトルのデザインをサイト全体で統一する

最初からすべて設定する必要はありません。サイトを運営しながら少しずつ調整して、自分のブログに合った使いやすいレイアウトを作っていきましょう。

記事 ウィジェットを使ったおすすめのカスタマイズ方法は、こちらの記事で詳しく解説しています。

AFFINGER7のプロフィールカードを作成・カスタマイズしてウィジェットへ設置する手順を紹介

2026/8/5

AFFINGER7のプロフィールカードの作り方|デザインカスタマイズ手順

AFFINGER7のプロフィールカードの作り方を初心者向けに解説。WordPressのプロフィール設定から、ヘッダー画像・アバター画像の設定、デザインのカスタマイズ、ウィジェットへの設置方法、表示されないときの対処法まで画像付きでわかりやすく紹介します。

ReadMore

AFFINGER6のフッター設定方法とカスタマイズ手順・おすすめ設定を解説

2026/7/15

AFFINGER6のフッター設定方法|カスタマイズ手順と使い方を解説

AFFINGER6のフッター設定方法を初心者向けに解説。カスタマイズ手順からおすすめ設定、見やすく整えるコツまでわかりやすくまとめています。

ReadMore

AFFINGER6のメインカラー・デザイン・メニュー設定などカスタマイズ方法を解説

2026/7/15

AFFINGER6のカスタマイズ方法|メインカラー・デザイン・メニュー設定を解説

AFFINGER6のカスタマイズ方法を初心者向けに解説。メインカラーやデザイン設定、メニューのカスタマイズ手順までわかりやすくまとめています。自分好みのサイトに整えたい方に最適です。

ReadMore

-カスタマイズ
-,