ワードプレステーマAFFINGER5(WING)の設定方法について書いています。
このテーマは上級者になるといろいろカスタマイズが行えるようですが、私はwordpressのカスタマイズはできないのでテーマの標準（管理）機能とプラグインを追加することでサイトの見た目などを設定しています。
標準機能だけで色々な設定ができるAFFINGER5ですが、逆に初心者にとってはそこが難しく感じてたりもします。
自分がテーマの設定をする上でわかりにくかった点を初心者の方向けにいくつかまとめています。
何か参考になれば幸いです。
ヘッダー画像が表示されない時
AFFINGER5ではヘッダー画像を表示することができますが、もともと表示しないように設定することもできます。
ヘッダー画像が有ると無いではサイトの雰囲気というかイメージがかなり変わります。
そこでトップページにのみヘッダー画像を表示することにしたのですが、表示されるはずの画像が表示されませんでした。
このようにヘッダー画像を設定したにも関わらず表示されない時の対処法として、下記を確認しましょう。
ヘッダー画像が設定済か確認する
外観 → ヘッダー画面で「現在のヘッダー」欄に画像が表示されていますか？
「現在のヘッダー」に何も表示されていなければ、ヘッダー画像は表示されません。
つまり、そもそもヘッダー画像を設定しない状態です。
表示されていない場合は「新規画像を追加」をクリックしてメディアライブラリからヘッダー画像を選択しましょう。
この時ヘッダーに表示させる画像がライブラリに無い場合は「ファイルをアップロード」タブを開き、新たに画像をアップロードします。
ヘッダー画像は新規追加するときに最適のサイズに切り抜くこともできます。
私はメディアライブラリにアップロードした画像をヘッダー画像にする際に最適のサイズに切り抜いています。
この方が、予めヘッダー画像に合わせたサイズの画像を用意するより簡単でオススメです。
AFFINGER5管理の設定を確認
ヘッダー画像を設定済にもかかわらず表示されない場合は、
AFFINGER4管理 → ヘッダー画像（スライドショー）→ 表示設定 の
□ヘッダー画像を全て非表示にする
のチェックを外します。
ここにチェックが入っているとヘッダー画像が表示されませんのでご注意下さい。
私の場合、ヘッダー画像が表示されない原因は”ヘッダー画像を全て非表示にする”のチェックボックスにレ（チェック）を入れていた為でした。
ワードプレスを開設してしばらくはヘッダー画像を設定していませんでしたので、最初にAFFINGER5管理画面でチェックを入れたんだと思います。
そのことをすっかり忘れていました。
このチェックを外すことでちゃんとヘッダー画像が表示されるようになりました。
管理画面の設定を変更したら保存ボタンを押すことを忘れないようにしましょう。
すごいもくじ【PRO】が表示されない
AFFINGER5(WING)の専用プラグイン「すごいもくじ」は他のテーマにはない、便利なプラグインです。
目次で他のサイトと差別化することができます。
先日「すごいもくじ」から「すごいもくじ【PRO】」にプラグインを変更しました。
が、どうやら目次が表示されないことに気付きました。
タグは今まで通り挿入されるんですが、記事に目次が表示されません。
「ん？なんで？」
すごいもくじプラグインを1回停止してみましたが変わりません。
最初からインストールされていたプラグイン「Table of Contents Plus」が干渉しているのか？と思い停止しましたが目次は表示されませんでした。
いや、Wordpressのバージョンアップが原因かも？
Googleで検索しても、すごいもくじ【PRO】の不具合に関する情報ってほとんどないんですよね・・・
こうなると素人の私にはもう分かりません。
「仕方ない、このまま放っておくか・・・」
となって目次の表示をあきらめました。
ところが数日後、すごいもくじ【PRO】管理画面の
JSをヘッダーで読み込む（※解析が不安定になることがあります）
にチェックを入れたところ目次が表示されるようになりました！
原因はわかりませんが、とりあえず目次が使えるようになりました。
すごいもくじ【PRO】が表示されなくてお困りの方、一度お試しください。
お問い合わせフォームの設置
ブログにお問い合わせフォームを設置する方法はいくつかあると思いますが、その1つはプラグイン「Contact Form 7」を使用する方法です。
まずはこのプラグインをインストールして有効化します。
フォームのカスタマイズも行えるようですが、そのまま使用しても機能的にも十分です。
私は一切カスタマイズしていません。
AFFINGER5でこの問い合わせフォームを設定するには、編集画面の上部に表示されるショートコードをコピーして、新たに固定ページを作って貼り付けます。
新たに作る固定ページのタイトルは「お問い合わせ」などで良いでしょう。
次はこの固定ページのアドレスをコピーします。
メニューの外観 → ウィジェット画面の「利用できるウィジェット」から「02_STINGER問合せボタン」をクリックします。
プルダウンメニューが表示されるので「サイドバーウィジェット」を選択した状態で、下のウィジェットを追加ボタンをクリックします。
するとすぐ右の「サイドバーウィジェット」の一番下に「02_STINGER問合せボタン」追加されますので右の▼をクリックしてタブを展開させます。
”タイトル”には表示させたい文言、例えば”CONTACT””お問合せ”などを入力します。
その下の”url:"欄には先ほどコピーした問い合わせページのURLを貼り付けます。
最後に下の保存ボタンを忘れずにクリックします。
ボタンの表示が「保存しました」に変わったことを確認しましょう。
これで、サイドバーの一番下にお問合せボタンが追加されました。
実際にサイトを表示して追加したお問い合わせボタンをクリックすると先ほど設置した問い合わせフォームのページが表示されると思います。
以上でお問い合わせ（質問・CONTACTなど）フォームの設置は完了です。
他にもいろいろな設置の仕方がありますので、自分のサイトに合わせた設置方法をお試しください。
すごいもくじ（SUGOIMOKUJI）
SUGOIMOKUJIの管理画面の場所が最初分かりにくかったので書いておきます。
すごいもくじのプラグインをインストールして有効化すると左メニューの下の方に「目次」が追加されます。
その「目次」をクリックすると”すごいもくじ”の管理画面になります。
SUGOIMOKUJIの管理画面はメニューの”プラグイン”からは設定できませんのでご注意下さい。
次に、目次ごとのクリック数が確認できる場所は「投稿の編集」画面です。
つまり記事を書いて編集する画面です。
「投稿の編集」画面を一番下までスクロールすると目次のクリック数が確認できます。
記事中の画像の大きさの変え方
記事中に画像を使うことはよくあると思います。
記事中の画像の大きさは大（フルサイズ）・中・小（サムネイル）と3パターンあります。
画像の大きさの指定は、メディアを追加する際に右に表示される「添付ファイルの表示設定」→「サイズ」で指定できます。
逆に投稿済の画像の大きさを変えることもできます。
例えばサイズ小（サムネイル）で投稿済みの画像をサイズ大（フルサイズ）に変更できます。
その時は「投稿編集」画面からサイズを変更したい画像をクリックします。
編集マーク（鉛筆の絵）をクリックすると「画像詳細」ウィンドウが開きます。
設定を表示→サイズ で”フルサイズ”を選択します。
最後に右下の更新ボタンを忘れずにクリックしましょう。
投稿編集画面に戻ると、画像サイズが変わっていると思います。
アイキャッチ画像の表示位置
AFFINGER5(WING)ではアイキャッチ画像の表示位置は記事タイトル上がデフォルトですが、
記事タイトルの下に表示する
記事タイトルの上に表示する
を管理画面で簡単に切り替えられます。
AFFINGER4ではこの機能は標準ではなかったのでテーマをカスタマイスする必要がありました。
AFFINGER5 管理 → アイキャッチ設定の、
□アイキャッチ画像をタイトル下表示に変更する
にチェックをいれることで、アイキャッチ画像がタイトルの下に表示されるようになります。
ここはお好みで設定すれば良いと思います。
アイコンの色が変えられない
WEBアイコンを簡単に使えるのですが、カスタマイザーで色を設定しても反映されないという事象が起きました。
キャッシュをクリアしてもブラウザを更新しても、全体設定をリセットしても反映されませんでした。
原因は"on-colorクラス"というものを付与していなかったからです。
AFFINGER5(WING)ではウェブアイコンの色を設定する場合はon-colorクラスを付与する必要があります。
カスタマイザーで色を設定しただけでは色は変わらないのです！
なんでこんな面倒くさい仕様になってしまったんでしょう？
AFFINGER4ではカスタマイザーで色を設定するだけでちゃんと反映されたんですけどね・・・
「on-colorクラスの設定が必要です」
と言われても「具体的にどうすればいいの？」という方はWINGマニュアルの「AFFINGER4及びSTINGER PROから移行する場合の注意点」のページをご参考下さい。
ver20180521β版で「.on-color」クラスがデフォルトで付与されるようになりました！
とてもアイコンが使いやすくなりました。(^^♪