当サイトで使用しているWordPressテーマ「SWELL」>>

【初心者向け】AFFINGER5(アフィンガー)で吹き出しを使う方法!

悩んでる人のアイコン画像悩んでる人

アフィンガーを導入したけど、吹き出しの使い方がわからない!

こんな疑問に答える記事になります。

というのも本記事を書いている私自身、吹き出しの使い方がわからず四苦八苦しておりました…

慣れてしまえばなんてことない動作ですが、備忘録として残しておきます!

この記事の内容
  • 吹き出しの設定
  • プラグインの導入
  • 使い方

ブログ初心者の方や、アフィンガー導入したての方は是非参考にしてみてください。

目次

吹き出しの設定

アフィンガーでは吹き出しをワンクリックで呼び出すことができます。

そのための準備として、吹き出しに必要な画像を用意しておきましょう。

私はFLAT ICON DESIGNのものを使用しています。

※オリジナルアイコンに変更しました。

関連記事 【ココナラ】ブログ用アイコンを依頼してみた!オリジナルのメリットと完成までの流れ!

その名の通り、フラットデザインで可愛らしいアイコンがずらりと並んでいます。

吹き出しに設定するアイコンがまだ決まっていない方は、上記のサイトをのぞいてみるといいかもしれませんよ!

設定する画像が決まったらワードプレスのメディアにアップロードします。

左側にあるワードプレスのメニューから「AFFINGER5 管理」→「会話・ファビコン」へ移り、用意した画像をアップロードすると反映されます。

アイコン画像の下にあるボックスは、吹き出し画像の名前になるので必要であれば打ち込んでおきましょう。

プラグインの導入

WordPressをインストールした直後は、記事のフォーマットがGutenberg(グーテンベルグ)になっています。

グーテンベルグは吹き出しを呼び出す「タグ」が標準では搭載されていません。

色々調べていくとアフィンガーではClassic Editor(クラシックエディタ)を推奨していることがわかりました。

WordPressのフォーマット
  • Gutenberg(グーテンベルグ)
  • Classic Editor(クラシックエディタ)

他のブロガーさんがアフィンガー5を紹介している記事と、自分の投稿画面が「なんか違うなー」と感じていたのは、この設定の違いからだったんですね。

choiのアイコン画像choi

なっとく!

さっそく「クラシックエディタ」を導入してみました。

  1. ワードプレスの左側にある「プラグイン」をクリック
  2. その中の「新規追加」をクリック
  3. 検索窓に「Classic Editor」と入力
  4. 最後にインストールをして有効化

すると…

記事上部にこのような編集コマンドが出ています。

この中の「タグ」→「会話ふきだし」で呼び出すことができます。

choiのアイコン画像choi

できました!

使い方

これでワンクリックで吹き出しを呼び出すことができるようになったわけですが、この吹き出しも色々いじることができます。

ワードプレス左側にある「外観」→「カスタマイズ」→「オプションカラー」→「会話風ふきだし」で上記の画面に移ります。

ここで吹き出しの背景色を変更したり、吹き出しの線を調整することが可能。

choiのアイコン画像choi

いやーここまでくるのに2時間かかったよ

choiのアイコン画像choi

2時間…!?そんな時間かかることじゃないような…

こんな感じに会話形式で話を進めていくこともできますね。

ちなみに吹き出しのデフォルトは左側になっていますが、右側にする場合はちょっと注意です。

吹き出しを呼び出す際にも、右側表示をするためのアナウンスが出てるんですが

[st-kaiwa1 r][/st-kaiwa1]

1の後ろに「半角スペース+r」を入れないと反映されません。

これに気付くまで結構な時間を費やしました笑

吹き出しを使う方法まとめ

他のテーマだと吹き出し専用のプラグインや、HTML・CSSを打ち込んだりするようですが、アフィンガーならワンクリックで作成できます。

こういった装飾が文字の中にワンポイント入るだけで、読みづらさを和らげる効果も期待できますね。

かといって使いすぎると、それはそれで読みづらいので、用法容量は守って使っていきましょう。

choiのアイコン画像choi

使いすぎには注意!

吹き出しの使い方がわからない方の参考になれば幸いです。

今回は以上になります。

この記事が気に入ったら
フォローしてね!

目次
閉じる