・ボタンの配置とか、手順が知りたい！
・このウィジェットの使い方は？
今回は、こんな声に応えていきます。私はCocoon3ヶ月、AFFINGER5は2週間程度で当記事を書いています。
初心者目線、新鮮さなども考慮して解説していきますので参考にどうぞ！
本記事の内容について
・ウィジェットエリアについて
・ウィジェット設定について
・コードの意味などについて
WordPressテーマ 「WING（AFFINGER5）」 
目次
ウィジェットエリアについて
最初にウィジェットエリアについて説明します！
薄めの灰色部分に「ウィジェット」として、コンテンツなどを挿入していきます。
設定画面
・WordPress管理画面＞外観＞ウィジェット
・WordPress管理画面（or ページ）＞カスタマイズ＞ウィジェット
初期設定
AFFINGER5管理画面＞その他で、以下の「ウィジェットにショートコードを使用する」にチェックすると便利です。
タイトルは個別でも設定できます。お好みでどうぞ。
今回は、管理画面＞外観＞ウィジェットを見てみましょう。
トップページ画面
赤枠部分から説明していきます。
トップページ画面周囲の設定はざっくりですけど上図のイメージ！
デザイン設定などで多少変わります。
サイドバーウィジェット
「サイドバートップ」で意識して並べていれば、特に「サイドバー」と大きな違いは無さそうです。
「スクロール広告用」は、PC閲覧時に追尾してきます。厳密に言うと、サイドバーの一番下ですね。記事などで内部リンクを行う際に有効です。
ここにアドセンス広告を貼るのは禁止です。
AFFINGER5管理画面＞その他＞PC閲覧時にサイドバーの最下部広告エリアをスクロール追尾しないにチェックすると追尾しません。
設定について
当サイトは以下の様に設定しています。
Profile
基本設定：WordPress管理画面＞ユーザー＞プロフィールで行います。
カスタマイズ＞オプションカラー＞サイト管理者紹介（プロフィールカード）で追加設定ができます。
step
1WordPress管理画面＞外観＞テーマエディタ
step
2WING-AFFINGER5＞st-author-master-profile.php
step
3「<div class="sns">」の上段に「
〇〇〇を改変してください！エディタを触るので、backup推奨・自己責任で御願いします。
広告
HTML形式、フリーボックス形式などで設定できます。フリーボックスは見出しがトピック風です。
ウィジェットを挿入すると、画像2枚目の右端（3記事x2）のところに表示されます。カテゴリー、記事、その他HTMLなどでカスタマイズできます。人気記事や紹介したい概要など、お好みで入れましょう。
ヘッダーウィジェット
「ヘッダー右（フッター）」詳細設定：AFFINGER5管理画面＞ヘッダー＞H ヘッダー設定
画像の「ヘッダーを分割しない」のチェックを外しておくと表示されます。また、電話番号を入力すると同じ箇所に表示でき、クリックで電話を掛けられます。フッターの表示設定は、画像一番下の「ヘッダー右ウィジェットをフッターに表示しない」にチェックをすると表示されなくなります。
分割しないにチェックするとロゴが結構大きくなります。
その他の「ヘッダー」、「トップページ上部」などは下の画像の通りです。
カードの設定について
AFFINGER5管理画面＞おすすめ記事一覧＞おすすめヘッダーカードで、画像の項目に従って設定していけば簡単にできます！
フッターウィジェット（アドセンスA・B）
「ヘッダー右（フッター）」は先程説明した通りです。他の2種類に関しても、画像の通りです。
「トップページ下部」は、フッターの直上に表示されます。
「広告・Googleアドセンス（A・B・スマホ）」について
step
1AFFINGER5管理画面＞投稿・固定記事＞PC閲覧時に記事下のアドセンス広告を横並びにする ※「PC閲覧時のサイトの幅」を1114px以上に設定して下さい、にチェックをします。
記載通り幅が1114px以上にします。
（AFFINGER5管理画面＞デザイン＞サイト全体の設定＞サイト全体のレイアウト一括設定）
step
2Googleアドセンス＞広告＞広告ユニットごと＞ディスプレイ広告＞広告サイズ固定＞サイズ調整（当サイトは336x250px）
step
3同じ要領で2つ目を作る
step
4コードをコピーし、A・BにHTMLで貼り付ける
step
5A・BはPC用なので、スマホ用にも貼り付ける
336pxを越えても表示されます。Googleの規定では以下になってます。
・450pxを超えて良いのは高さか幅のどちらか一方のみ
・最小幅は120px、最小高さは50px
・高さと幅のどちらも1200pxまで
スライドメニュー画面
次はピンク枠を説明していきます。
画面
左：虫メガネが検索メニュー
右：三本線がスライドメニュー
中央のボタンは以下の画像2枚目で2つまで設定できます。
AFFINGER5管理画面＞メニュー＞スマホ用スライドメニューで以下を設定できます。
クール：細くなる
カット：図参照
スライドメニュー
私のサイトの場合、ヘッダーメニューが「Welcome～」になっていて、その上下でエリアが分かれます。
上：「スライドメニュー内上に表示」
下：「スライドメニュー内上に表示」
スマートフォンだと、このメニューにサイドバーが表示されるので、同じように設定しています。
検索メニュー
「スライドメニュー（検索）に表示」：私が試した限りでは、ウィジェットを挿入する代わりに検索ができなくなるので使っていません。
その他
最後に、青矢印を説明していきます。
広告・Googleインフィード広告
AFFINGER5管理画面＞Google・広告/AMP＞インフィード広告の設定
「広告・Googleインフィード広告」にHTMLなどでコードを挿入していきます。
右の画像は関連記事の部分です（数値は「3」です）。ディスプレイ広告などでも表示可能です。アドセンスの作成方法は前述したコチラを参考にしてください。
オリジナルのショートコード作成ウィジェット
[ originalsc ]（タグ＞その他パーツ＞オリジナルショートコード）で任意のテンプレートを挿入できます。地味に便利ですが、「ステ子」を持っていると要らない子かな？
404ページ
エラーで404ページに飛んだ場合に、任意の画像などを表示できます。広告は控えた方が良いと思います。
STINGER専用ウィジェットについて
違いが分かり辛そうなウィジェットだけ、分かる範囲で説明していきます！
カスタムHTML
・題名を入れて非表示にできます。
カテゴリ別ボックス
・コンテンツ内で、指定したカテゴリーにだけテキスト、記事、その他色々と設定できます。例えば「1」、「2」、「3」、「4」にカテゴリーIDを持っていた場合に「1,2」と入力すると「1」、「2」に分類される投稿記事を開いた際にのみ表示されます。
記事別ボックス
カテゴリ別の記事IDバージョンです。
ガイドマップメニュー
「WordPress管理画面＞外観＞メニュー」で作成したテンプレートを挿入します。
WordPressテーマ 「WING（AFFINGER5）」
