AFFINGER ブログ

AFFINGER5で吹き出しの表示方法と設定方法

2020-11-29

AFFINGER5吹き出し
なやむ君

AFFINGER5をインストールしたけど、「会話の吹き出し」の表示方法や設定方法がいまいちわからないな。

このような疑問にお答えします。

本記事の内容

  • AFFINGER5吹き出し表示方法
  • AFFINGER5吹き出し設定方法

記事を書いた人

こんにちは、LEO (れお)です。2020年11月からAFFINGER5へ変更し、感激している副業ブロガーです。

LEO

AFFINGER5にテーマを変えてから、思ったことは「会話吹き出し」の使い方がいまいちわからなかったところです。

以前は、無料テーマのCOCOONを使っていて「吹き出し」に関しては、プラグインの「Word Balloon」を利用していました。

「Word Balloon」は、吹き出しのデザインが28種類、アニメーションの機能が20種類と、いろいろなバリエーションがあり重宝していました。

しかし、以下の理由で使うのをやめました。

  • AFFINGER5でも「吹き出し」機能が備わっているから
  • プラグインが多いとWordPressの表示速度やセキュリティ面でも支障が少なからずあるから

後先を考えずに、プラグインを思い切って削除したため、設定と修正に時間がかかりましたが、読者の方が同じようにならないためにご紹介していきたいと思います。

もし、「吹き出し」のプラグインを現在も使っていて、AFFINGER5の方に統一したいという方は、AFFINGER5の「吹き出し」の設定をしてから、プラグインを消しましょう!

ただ、プラグインが20個も無いっていう人は、吹き出しプラグインを消さなくても大丈夫です。

前述が長くなってしまいましたが、AFFINGER5の「吹き出し」の表示方法と設定方法を紹介していきます。

AFFINGER5吹き出し表示方法

AFFINGER5吹き出し表示方法
AFFINGER5吹き出し表示方法

AFFINGER5は、「クラシックエディター」を推奨しています。しかし、2018年移行のWordPressのバージョンアップから「グーテンベルク」が推奨エディターとなったことから、AFFINGER5では2通りの方法があります。

どちらの方法も1度使ってみるだけで簡単に覚えられますよ。

LEO

ということで、2通りの方法をご紹介します。

クラシックエディター編

手順1:投稿画面を開き、「タグ」>>「会話吹き出し」からの登録している「会話1~8」のいずれかを選択しましょう。

クラシック投稿画面
クラシック投稿画面

手順2:下の画像のような、コードが表示されます。

下の画像では、例として「会話1」と「会話2」の二つを選択しています。上が「左側表示」、下が「右側表示」となります。

吹き出しショートコード
吹き出しショートコード

右側表示の注意点

上の画像のように「 st-kaiwa1 」の後の下線部分に、「半角スペース」と「r」をいれないと右側表示されません。

右側表示のときに、上の注意点のみ理解していればOKです。

文字は、[ コード ]と[ コード ]の間に入力すれば表示されます。

手順3:「プレビュー」を押して、確認しましょう。

プレビュー
プレビュー

手順4:下の画像のようになっていればOKです。

ふきだし
ふきだし

グーテンベルク編

手順1:投稿画面を開き、「吹き出し」を使うポイントで、下の画像のように「黒色の + 」を押しましょう。

投稿画面
投稿画面

手順2:左画面にブロックメニューが表示され、画像のような「ブロックの検索」が現れます。

ブロックメニュー
ブロックメニュー

手順3:検索欄に「吹き出し」の頭の「ふ」といれるだけで、候補が表示されるので、クリックします。

ふきだしブロック
ふきだしブロック

手順4:既に設定している「吹きだし」が表示されます。

ふきだし詳細設定
ふきだし詳細設定

あとは、上の画像の右側の設定エリアで「吹き出し」の「登録してあるショートコードの種類」や「左右の向き」を調整できます。

グーテンベルクの場合は、プレビューにしなくてもイメージができるので初心者の方にはおすすめです。

LEO

AFFINGER5吹き出し設定方法

AFFINGER5吹き出し設定方法
AFFINGER5吹き出し設定方法

つづいて、吹き出しの設定方法を紹介していきます。設定ポイントは2つです。

吹き出しの設定には、アイコン画像が必要ですので用意しておきましょう。おすすめサイズは「150×150」です。

LEO

「AFFINGER5管理」の設定

手順1:WordPressダッシュボードの左メニューから「AFFINGER5管理」>>「会話・ファビコン等」をクリックします。

AFFINGER5管理設定
AFFINGER5管理設定

手順2:上の画像のように、「アイコン画像1」~「アイコン画像8」まであるので、登録したい数だけ「名前」と「画像のURL」を記入します。

「画像のURL」取得方法

「ダッシュボード」>>「メディア」>>「ライブラリー」>>「写真を選択」すると下の画像になります。

画像URL取得
画像URL取得

上の画像の右下にある「画像のURL」をクリックするだけでコピーできます。

「カスタマイズ」の設定

手順1:「ダッシュボード」>>「外観」>>「カスタマイズ」>>「オプションカラー」をクリックします。

カスタマイズメニュー
カスタマイズメニュー

手順2:「会話風ふきだし」をクリックします。

会話吹き出し
会話吹き出し

手順3:登録したアイコン数に合わせて、吹き出しの色を設定します。

会話吹き出し詳細
会話吹き出し詳細

1番目を色設定すると、他のふきだしカラーが未設定だった場合、1番目のカラーが適用されるので、注意しましょう。

僕の場合だと、アイコンは3体設定しているので、上から3つを設定しています。

LEO

手順4:設定したら画面上の「公開」を押したら設定完了です。

公開

以上でAFFINGER5の「吹き出し」の設定は完了です。

お疲れ様でした。自分なりにアレンジして楽しみましょう!

LEO

今回はここまでです。


最後まで読んでいただき、ありがとうございました。

  • この記事を書いた人
  • 最新記事

LEO ( れお )

副業ブロガー【経歴】23歳から会社経営 ▶︎ LEOBOXを運営開始 ▶︎ 香川在住の28歳 ■ ビジネス・ブログ関連・映画などお役立ち情報を発信しています。

-AFFINGER, ブログ
-,

© 2021 LEOBOX