AFFINGER BLOG

【AFFINGER6】会話アイコン(吹き出し)を9個以上設定する方法

2022.5.27

【AFFINGER6】会話アイコン(吹き出し)を9個以上設定する方法

AFFINGERにはいろいろな機能がありますが、その中でも使用頻度の高い「会話アイコン」。

簡単に吹き出しを使って会話をしているかのおゆに表現することができます。

モンスター1

こんな感じに会話をしているかのように表現できる便利な機能です。

上手に使えばブログを読みやすくできますよ。

モンスター2

この非常に便利な「会話アイコン」ですが初期設定では最大で8個までしか設定することとができません。

そこで今回は「会話アイコン」の基本的な使い方から「会話アイコン」を9個以上設定する方法をご紹介したいと思います。

こんな人にオススメ

  • AFFINGER6で会話アイコン(吹き出し)を使いたい初心者~中級者
  • AFFINGER6で会話アイコン(吹き出し)を9個以上設定したい初心者~中級者

会話アイコンの設定をする

WordPressの左側メニューにある「AFFINGER 管理」を選択します。

AFFINGER管理の左側メニューにある「会話アイコン」を選択します。

こちらで会話アイコンの設定を行います。

会話アイコン設定

こちらで「アイコン名」と「画像」を設定します。

画像は100px以上の正方形の画像を推奨しています。

アイコン名

吹き出しの画像の下に表示されるテキスト、画像では「モンスター1」と書かれている部分がアイコン名です。

アイコン名は5文字程度にしないと改行されます。

画像のURL

アップロード」を選択します。

画像は100px以上の正方形の画像を推奨しています。

メディアを追加の画面が表示されますので「ファイルをアップロード」を選択します。

画像ファイルをドロップしてアップロードするか「ファイルを選択」を選択して画像をアップロードします。

アップロードした画像が選択されていることを確認して、右下の「投稿に挿入」を選択します。

画面下の「Save」を選択して会話アイコンの設定完了です。

同様の作業で最大で8個まで会話アイコンを設定できます。

オプション設定

会話アイコンのオプション設定として「会話アイコンを少し動かす」と「会話アイコンを少し大きく」の2つがあります。

会話アイコンを少し動かす

会話アイコンを少し動かす」にチェックを入れると画像のアイコンが大きくなったりします。

会話アイコンを少し大きく
会話アイコンを少し大きく」をチェックを入れると会話アイコンが大きくなります。

会話アイコンを記事に使用する方法

今回は新規投稿から会話アイコンを追加する方法を紹介します。

WordPressの左側のメニューから「投稿」→「新規追加」に進みます。

上部メニューから「ブロック挿入ツール切り替え」を選択してブロック挿入ツールを表示します。

左側に表示されたブロック挿入ツールの中から「STINGER:会話ふきだし」を選択します。

会話アイコンがブロックに追加されました。

モンスター3

これで会話アイコンが挿入されたよ

会話アイコンの設定変更

引き続き右上にある歯車を選択して、会話アイコンの変更を行います。

こちらで会話アイコンの種類と向きを選択できます。

会話ショートコード

会話ショートコードから会話アイコンを「会話アイコン1」から「会話アイコン8」の中から選択することができます。

向き

向きを反対方向にすることができます。

モンスター1

通常は左側だよ

向きを変更すると右側に変わるよ

モンスター2

会話アイコンを9種類以上設定する方法(プラグイン)

会話アイコンを9種類以上設定する方法を紹介します。

WordPressの左側メニューにある「AFFINGER 管理」を選択します。

AFFINGER管理の左側メニューにある「会話アイコン」を選択します。

会話アイコン設定の下のほうに「「会話風アイコン」を増やすプラグイン」がありますので、こちらに進みます。

こちらで「会話ふきだしプラグイン2」が販売されています。価格は2,980円。

こちらを使用すると9種類以上の会話アイコンを設定することができます。

会話アイコンを9種類以上設定する方法(Classic Editor)

こちらの方法は9種類以上の会話アイコンを使えるようになりますが、HTMLの知識が少し必要になります。

モンスター1

会話アイコン1だ

上記の会話アイコンを「Classic Editor」で確認すると以下のように表示されます。

 html
<!-- wp:st-blocks/st-kaiwa -->
[st-kaiwa1]<div class="wp-block-st-blocks-st-kaiwa"><!-- wp:paragraph -->
<p>会話アイコン1だ</p>
<!-- /wp:paragraph --></div>[/st-kaiwa1]
<!-- /wp:st-blocks/st-kaiwa -->

[st-kaiwa1]と[/st-kaiwa1]はショートコードですので、こちらはWebページとして表示される際にHTMLに変換されます。

変換されると以下のようなコードになります。

 html
<div class="st-kaiwa-box kaiwaicon1 clearfix">
	<div class="st-kaiwa-face">
		<img src="画像ファイルURL" width="60px">
		<div class="st-kaiwa-face-name">モンスター1</div>
	</div>
	<div class="st-kaiwa-area">
		<div class="st-kaiwa-hukidashi">
			<div class="wp-block-st-blocks-st-kaiwa">
				<p>会話アイコン1だ</p>
			</div>
		</div>
	</div>
</div>

ショートコードを使用せずに上記のソースをそのまま使用しても会話アイコンが利用することができます。

画像ファイルのURLは設定してください。

画像アイコンの変更

 html
<div class="st-kaiwa-box kaiwaicon1 clearfix">
	<div class="st-kaiwa-face">
		<img src="画像ファイルURL" width="60px">
		<div class="st-kaiwa-face-name">モンスター1</div>
	</div>
	<div class="st-kaiwa-area">
		<div class="st-kaiwa-hukidashi">
			<div class="wp-block-st-blocks-st-kaiwa">
				<p>会話アイコン1だ</p>
			</div>
		</div>
	</div>
</div>

画像アイコンは上記の赤い部分の「画像ファイルURL」を変更すると別の画像に変更することができます。

アイコン名の変更

 html
<div class="st-kaiwa-box kaiwaicon1 clearfix">
	<div class="st-kaiwa-face">
		<img src="画像ファイルURL" width="60px">
		<div class="st-kaiwa-face-name">モンスター1</div>
	</div>
	<div class="st-kaiwa-area">
		<div class="st-kaiwa-hukidashi">
			<div class="wp-block-st-blocks-st-kaiwa">
				<p>会話アイコン1だ</p>
			</div>
		</div>
	</div>
</div>

アイコン名は上記の赤い部分の「モンスター1」を別の名前に変更すると変えることができます。

会話内容の変更

 html
<div class="st-kaiwa-box kaiwaicon1 clearfix">
	<div class="st-kaiwa-face">
		<img src="画像ファイルURL" width="60px">
		<div class="st-kaiwa-face-name">モンスター1</div>
	</div>
	<div class="st-kaiwa-area">
		<div class="st-kaiwa-hukidashi">
			<div class="wp-block-st-blocks-st-kaiwa">
				<p>会話アイコン1だ</p>
			</div>
		</div>
	</div>
</div>

会話の内容は上記の赤い部分の「会話アイコン1だ」を変更すると変えることができます。

変更ポイント

 html
<div class="st-kaiwa-box kaiwaicon1 clearfix">
	<div class="st-kaiwa-face">
		<img src="画像ファイルURL" width="60px">
		<div class="st-kaiwa-face-name">モンスター1</div>
	</div>
	<div class="st-kaiwa-area">
		<div class="st-kaiwa-hukidashi">
			<div class="wp-block-st-blocks-st-kaiwa">
				<p>会話アイコン1だ</p>
			</div>
		</div>
	</div>
</div>

上記の赤い部分を変更するとAFFINGER管理で設定した会話アイコンのアイコン画像やアイコン名に固定されずに使用することができます。

向きの変更

向きを変える場合はHTMLが少し変わる

モンスター1
 html
<div class="st-kaiwa-box kaiwaicon1 clearfix">
	<div class="st-kaiwa-area2">
		<div class="st-kaiwa-hukidashi2">
			<div class="wp-block-st-blocks-st-kaiwa">
				<p>向きを変えたぞ</p>
			</div>
		</div>
	</div>
	<div class="st-kaiwa-face2">
		<img src="画像ファイルURL" width="60px">
		<div class="st-kaiwa-face-name2">モンスター1</div>
	</div>
</div>

基本的には同じように赤い部分を変更するだけで利用することができます。

会話アイコンは8種類までしか登録することができませんが、HTMLで書き込むことで9種類以上の会話アイコンを利用することができます。

HTMLで記事を書くことに不安があればプラグインを購入すれば安全に会話アイコンを増やすこともできますので状況に合わせて対応してください。

  • この記事を書いた人

COSSY

40代の会社員。妻と小学生と保育園児の2人の子どもの4人で生活しています。 副業としてブログなどで月10~15万円程を稼ぎ、これまでに累計400万円を稼いできました。 ブログでの副業の仕方、節約の仕方などを発信しています。

-AFFINGER, BLOG