AFFINGER

【AFFINGER5】吹き出し会話のカスタマイズ方法

投稿日:2018年5月16日 更新日:

AFFINGER5ではデフォルトで吹き出し会話を簡単に使うことができます。

AFFINGER4にもこの吹き出し機能がありましたが、AFFINGER5ではパワーアップされていて、8つまでアイコンを登録できるようになり、さらにぽよぽよと動くようになりました。

アイコンの設定や、吹き出しの色の変更方法を解説していきます。

AFFINGER5で吹き出し会話を使う

さて、今回の目的ですが、せっかく吹き出し会話のお話なので吹き出しで説明していきましょう。

ちろ
吹き出し会話というのは
こーんな感じの会話のことだよ
くろねこ
ちろ
しょんぼりしてみたり
怒ったりもできるよ
あおねこ
ちろ
ぷんぷん
ももねこ
今回はこの吹き出し会話の設定をするよ

 

この吹き出しはAFFINGER5のデフォルト機能で作成しています。吹き出し会話のアイコンの設定と、吹き出しの色の変更方法をご紹介していきます。

 

AFFINGER5会話風吹き出しカスタマイズ手順

吹き出しアイコン画像を設定する

WP管理画面⇒AFFINGER5管理⇒会話・ファビコン等と移動します。

 

 

会話風アイコンの1から8に、それぞれ使いたい画像をアップロードします。

画像は60px以上の正方形の画像が推奨されています。

 

 

「画像のURL:」の上にあるボックスは、アイコンの名前を設定できます。

名前を設定すると会話アイコンの下に、設定した名前が表示されます。

 

 

8つのアイコン画像を登録できるので、表情が異なる同じキャラを登録しておけば感情が表現できますし、8つ別々のキャラを登録するとたくさんのキャラをブログに登場させることが可能です。

 

会話風アイコンのアニメーション設定

AFFINGER5では吹き出しアイコンがぽよぽよと動きます。

このアニメーションはON/OFFの切り替えが可能で、WP管理画面⇒AFFINGER5管理⇒会話・ファビコン等のところから設定できます。

 

 

チェックが入っていれば動き、チェックを外すと動かなくなります。

 

吹き出しアイコンの色の設定

吹き出しアイコンのカラーを設定します。

WP管理画面⇒外観⇒カスタマイズと移動します。

 

 

オプションカラーをクリック。

 

 

オプションカラーの真ん中少し下あたりに、会話風吹き出しのカラーという項目があります。

 

ここで吹き出しのカラーを変更することができます。

吹き出しのカラーがここまで自由に変えられるのはAFFINGERの強みでもあります。

 

AFFINGER5で会話風吹き出しを使う

投稿画面、ビジュアルエディタのタグから会話を挿入することができます。

 

 

エディタ画面にはショートコードが挿入されるので、表示を確認したいときはプレビューから見てくださいね。

[st-kaiwa○]ここに会話文[/st-kaiwa○]

 

右側から(反対向きに)会話文を表示させたいときは、「 r」(半角スペース・小文字r)を使います。

[st-kaiwa○ r]ここに会話文[/st-kaiwa○]

 

アイコン画像はどこから準備したらいいの?

アイコン画像は著作権の侵害とならないよう、フリー画像を使用しましょう。

私の場合はイラストを描いていただきました。

ブログアイコンや会話風アイコンはブログの顔とも言われていて、アイコンを見ただけで「あ!あの人だ」と思ってもらえるようになるとファンを獲得しやすくなります。

最近では、ココナラで簡単にイラスト依頼ができるので、自分で絵が描けないけどアイコン欲しいなぁなんて思っている方にはおすすめ。

 

当ブログのイラストを描いてくださった、かーちさんも商用利用OK・1,000円~で、ココナラで販売しています。

アイキャッチに使用したり

ちろ
会話アイコンに使用したり
ゆる~い雰囲気が素敵
くろねこ

 

「もちろんウェブを見た!」と言っていただくとオプション1つ無料にしていただけるそう!出品者にお問合せより相談してみてくださいね。

アイコンを依頼したい方はこちら

オプション無料をご検討の方は購入前にお問合せより相談をお願いいたします。オプション無料は出品者「かーち」さんの販売商品に限り有効ですのでご注意ください。

 



 

さいごに

AFFINGERはどちらかというと、カチっとした堅い雰囲気のあるテーマだと感じています。

個人的にはそこが好きで使っているのですが、あまりにも堅い雰囲気だと読者が取っつきにくく感じてしまうこともあるようで。会話風アイコンを使ったりして、オリジナリティを出してみてくださいね。

 

AFFINGER5サイドバーのカスタマイズについて:自サイトのカスタマイズを公開しつつ説明

当サイトのサイドバーカスタマイズについてお問合せをいただいたので、AFFINGER5でどのように設定しているか、可能な限り詳細にご紹介していきます。 子テーマはJETを使用しておりますが、サイドバー部 ...

MetaSliderを使ってWordPressでスライドショーを作る方法

この度、当サイトのトップページにスライドショーを挿入し、それぞれの画像に別々のリンクを設定してみたので、そのやり方をまとめておきます。 「MetaSlider」というプラグインを使ってスライドショーを ...

 

-AFFINGER
-,

Copyright© もちろんウェブ , 2018 All Rights Reserved.