AFFINGER5をインストールしたけど、「会話の吹き出し」の表示方法や設定方法がいまいちわからないな。
このような疑問にお答えします。
本記事の内容
- AFFINGER5吹き出し表示方法
- AFFINGER5吹き出し設定方法
記事を書いた人
こんにちは、LEO (れお）です。2020年11月からAFFINGER5へ変更し、感激している副業ブロガーです。
AFFINGER5にテーマを変えてから、思ったことは「会話吹き出し」の使い方がいまいちわからなかったところです。
以前は、無料テーマのCOCOONを使っていて「吹き出し」に関しては、プラグインの「Word Balloon」を利用していました。
「Word Balloon」は、吹き出しのデザインが28種類、アニメーションの機能が20種類と、いろいろなバリエーションがあり重宝していました。
しかし、以下の理由で使うのをやめました。
- AFFINGER5でも「吹き出し」機能が備わっているから
- プラグインが多いとWordPressの表示速度やセキュリティ面でも支障が少なからずあるから
後先を考えずに、プラグインを思い切って削除したため、設定と修正に時間がかかりましたが、読者の方が同じようにならないためにご紹介していきたいと思います。
もし、「吹き出し」のプラグインを現在も使っていて、AFFINGER5の方に統一したいという方は、AFFINGER5の「吹き出し」の設定をしてから、プラグインを消しましょう！
ただ、プラグインが20個も無いっていう人は、吹き出しプラグインを消さなくても大丈夫です。
前述が長くなってしまいましたが、AFFINGER5の「吹き出し」の表示方法と設定方法を紹介していきます。
AFFINGER5吹き出し表示方法
AFFINGER5は、「クラシックエディター」を推奨しています。しかし、2018年移行のWordPressのバージョンアップから「グーテンベルク」が推奨エディターとなったことから、AFFINGER5では2通りの方法があります。
どちらの方法も1度使ってみるだけで簡単に覚えられますよ。
ということで、2通りの方法をご紹介します。
クラシックエディター編
手順1：投稿画面を開き、「タグ」>>「会話吹き出し」からの登録している「会話1~8」のいずれかを選択しましょう。
手順2：下の画像のような、コードが表示されます。
下の画像では、例として「会話1」と「会話2」の二つを選択しています。上が「左側表示」、下が「右側表示」となります。
右側表示の注意点
上の画像のように「 st-kaiwa1 」の後の下線部分に、「半角スペース」と「r」をいれないと右側表示されません。
右側表示のときに、上の注意点のみ理解していればOKです。
文字は、[ コード ]と[ コード ]の間に入力すれば表示されます。
手順3：「プレビュー」を押して、確認しましょう。
手順4：下の画像のようになっていればOKです。
グーテンベルク編
手順1：投稿画面を開き、「吹き出し」を使うポイントで、下の画像のように「黒色の + 」を押しましょう。
手順2：左画面にブロックメニューが表示され、画像のような「ブロックの検索」が現れます。
手順3：検索欄に「吹き出し」の頭の「ふ」といれるだけで、候補が表示されるので、クリックします。
手順4：既に設定している「吹きだし」が表示されます。
あとは、上の画像の右側の設定エリアで「吹き出し」の「登録してあるショートコードの種類」や「左右の向き」を調整できます。
グーテンベルクの場合は、プレビューにしなくてもイメージができるので初心者の方にはおすすめです。
AFFINGER5吹き出し設定方法
つづいて、吹き出しの設定方法を紹介していきます。設定ポイントは2つです。
吹き出しの設定には、アイコン画像が必要ですので用意しておきましょう。おすすめサイズは「150×150」です。
「AFFINGER5管理」の設定
手順1：WordPressダッシュボードの左メニューから「AFFINGER5管理」>>「会話・ファビコン等」をクリックします。
手順2：上の画像のように、「アイコン画像1」~「アイコン画像8」まであるので、登録したい数だけ「名前」と「画像のURL」を記入します。
「画像のURL」取得方法
「ダッシュボード」>>「メディア」>>「ライブラリー」>>「写真を選択」すると下の画像になります。
上の画像の右下にある「画像のURL」をクリックするだけでコピーできます。
「カスタマイズ」の設定
手順1：「ダッシュボード」>>「外観」>>「カスタマイズ」>>「オプションカラー」をクリックします。
手順2：「会話風ふきだし」をクリックします。
手順3：登録したアイコン数に合わせて、吹き出しの色を設定します。
1番目を色設定すると、他のふきだしカラーが未設定だった場合、1番目のカラーが適用されるので、注意しましょう。
僕の場合だと、アイコンは3体設定しているので、上から3つを設定しています。
手順4：設定したら画面上の「公開」を押したら設定完了です。
以上でAFFINGER5の「吹き出し」の設定は完了です。
お疲れ様でした。自分なりにアレンジして楽しみましょう！
今回はここまでです。
最後まで読んでいただき、ありがとうございました。
