ついにAFFINGER5でも「Q&A」を設置できるようになりました。
他のブログテーマではもともと付いていた機能です。
よくある質問を書く際に使いたかったけどAFFINGER5にはなかったので、アップデートで追加された時は嬉しかった。
この記事ではAFFINGER5で「Q&A」の設置方法を解説します。
AFFINGERのバージョン最新にする
まずは自分の使っているAFFINGER5のバージョンを確認してください。
「 Q&A」はver20200327βのアップデートで新しく追加された機能なので、ver20200327β以前のバージョンを使っていると「Q&A」は機能に追加されておらず使うことができません。
まずは自分の使っているAFFINGER5がどのバージョンか確認しましょう。
自分が使っているAFFINGER5のバージョンを確認する方法
step.1
WordPressの管理画面(ダッシュボード)にいく。
ブログ画面からは左上のブログ名にカーソルを合わせると「ダッシュボード」の画面にいけます。
step.2
外観の中の「テーマ」をクリック。
step.3
AFFINGER5の親テーマにカーソルを合わせて「テーマの詳細」をクリック。
step.4
ここに表示されているバージョンがver20200327βから新しければ問題なし。
なるべく最新のバージョンにアップデートしておいた方がいいです。新しい機能が使えるし最新のWordPressのアップデートに対応してくれてると思うので。
AFFINGER5のバージョンアップ方法
AFFINGER5のバージョンアップの方法は2つあります。
バージョンアップ方法
- STINGER STOREから最新版をダウンロードしてきて自分でインストールする
- 管理画面に更新通知を設定して最新版にアップデートする
＜自分で最新版をインストールしてバージョンアップする手順＞
step.2
自分が購入したWordPressテーマをクリック。
私の場合はEX版です。
step.3
β版ではなくリリース版をダウンロード。
β版は一番最新のテーマですが、不具合があることが稀にあるので、安定しているリリース版がオススメです。
子テーマのバージョンは2018年のものなので、それ以前のバージョンの子テーマを使っている方はこの機会に一緒にダウンロードしましょう。
step.4
「WING対応ーテーマアップローダー5」というプラグインをダウンロードします。
すでにAFFINGER5を利用している状態で新たにAFFINGER5をインストールすると元からある方が邪魔をしてうまくいなかいので、テーマアップローダー5で古い方から新しい方に切り替わるようにします。
step.5
「WING対応ーテーマアップローダー5」をブログにインストールして「有効化」させます。
プラグイン→新規追加で今ダウンロードした「WING対応ーテーマアップローダー5」を追加し、そのまま有効化すれば完了です。
step.6
ダウンロードした最新のAFFINGER5をインストールします。
AFFINGERのバージョウンを確かめた時と同じで、「外観」→「テーマ」をクリック。
上の「新規追加」でAFFINGER5を選択します。
注意ポイント
この時AFFINGER5を「有効化しないでください」。
こちらは親テーマなので有効化してしまうと子テーマから親テーマに変わってしまいます。
step.7
最後に古いバージョンのAFFINGER5は削除してブログを軽くしましょう。
外観→テーマをクリックするとAFFINGER5が2つあるともうので、2つの「テーマ詳細」をクリックしてバージョンの古い方を確認し、右下の「削除」で消してしまいましょう。
これで完了です。
＜管理画面で更新通知を設定して最新版にバージョンアップする手順＞
step.2
自分が購入したWordPressテーマをクリック。
step.3
ページの真ん中あたりに「更新通知パスワード」が載っているのでそれをコピーします。
みんな同じパスワードかもしれませんが、念のためモザイクをかけています。
step.4
ブログの管理画面（ダッシュボード）へいき、「AFFINGER管理」をクリック。
step.5
はじめに、お知らせ、デザインと書いてあるところの下の方に「その他」がるのでクリック。
一番下に「テーマのアップデート更新通知（β）」という項目があり、そのすぐ下に更新通知パスワードを入力する欄があります。
先ほどコピーしたパスワードを入力し、すぐ右の有効化にチェックをし、最後に下の「保存」をクリックして完了です。
これでAFFINGER5は最新のバージョンになりました。
Q&Aの設置方法
Q&Aの設置方法はまずは「ビジュアルエディター」にします。
そして「タグ」→「テキストパーツ」→「クリップメモ（テキスト）」から選択できます。
入力するとこんな感じです。
質問
回答
このままではQ&A感が出ないので、少し色を変更してみます。
Q&Aの色を変える前にコード意味を知る
色を変えるにはコードの意味を知ると簡単にできます。
Q&Aの「Qのコード」を例にコードの意味を解説します。
※ わかりやすいように変更する箇所は太字にしています。実際は太字ではないので画像と同じように太字にしないでください。
コードの意味
- iconcolor＝アイコンの色
- bgcolor＝背景色
- color＝文字の色
- bordercolor＝ボーダーの色(枠線の色)
- borderwidth＝ボーダーの太さ(枠線の太さ)
- iconsize＝アイコンの大きさ変更
色は16進数で設定します。
自分の設定したい色の16進数がわからない方は以下のサイトで調べてください。HEXが16進数です。
Q&Aをそれぞれ色を変えてみました
まずはQから変えていきます。
デフォルトでは水色になっていますが、これを赤系に変更して枠線も少し太めにしてみました。
質問！！
アイコン色と枠線の色、そして文字色を濃い目の赤にして、背景色はかなり薄い赤に変更しました。
文字が見やすいように背景色は白の方がいいかもしれません。そして文字色は黒に近いグレーに。
質問！！
枠線が無くても良い感じになりそう。
質問！！
次にAを変えます。デフォルトではグレーになっています。これを青系に変更します。
回答！！
枠線、アイコン、文字を濃い目の青に変更し、枠線を細くしました。それとアイコンのサイズをデフォルトの100％から150％に変更して少し大きくしています。
次は濃い箇所と薄い箇所を反対にしてみます。
回答！！
アイコン、文字色を白にして、背景色を濃い青に。そして枠線をなしに変更してみました。
追記：スマホで見るとアイコンの大きさに変化がないです。PCでのみ変化しています。
まとめ
AFFINGER5でQ&Aを設置する方法を解説しました。
Q&Aは最新のバージョンにアップデートしないと使えないので注意が必要です。
色を変更するにはコードを理解すれば簡単にできます。
AFFINGER5のコードはどれも共通なので、今回覚えたことは他の機能のときも役に立ちます。
最後に、Q&Aの色を変更する際はどちらも同じ箇所変更した方が見栄えがいいです。どちらか一方は枠線ありで、片方は枠線が無いとバランスが悪くなるので、変更する時は2つをまっったく同じにしましょう。