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

本ページはプロモーションが含まれています

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

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

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

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

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

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

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

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

会話アイコン設定

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

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

アイコン名

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

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

画像のURL

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

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

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

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

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

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

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

オプション設定

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

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

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

会話アイコンを少し大きく

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

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

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

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

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

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

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

会話アイコンの設定変更

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

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

会話ショートコード

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

向き

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

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

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

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

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

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

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

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

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

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

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

よく読まれている記事

チェック

【初心者必見】アフィリエイトで稼ぐブログの仕組み

アフィリエイトに興味を持つ人が増えていますが、実際にどのように始めたらいいのか、どのような仕組みで稼げるようになるのか分からなくないですか？ そこで今回は、アフィリエイトで稼ぐために必要な知識を学べる ...

チェック

【初心者向け】ロリポップでWordPressを始める方法をご紹介

副業のためのアフィリエイトブログ、自分のコレクションを紹介する趣味ブログなど本気でブログを開設するためにはWordPressは必須です。ブログ以外でもWordPressは企業サイトなどにも数多く利用さ ...

チェック

【初心者向け】エックスサーバーでWordPressを始める方法をご紹介［WordPressクイックスタート編］

副業のためのアフィリエイトブログ、自分のコレクションを紹介する趣味ブログなど本気でブログを開設するためにはWordPressは必須です。ブログ以外でもWordPressは企業サイトなどにも数多く利用さ ...

チェック

【初心者向け】ブログで副業を始める方法

長引く不況で給料が上がらない、定収入をどうにかしたい、お小遣いを増やしたいなど副業を始める理由はいろいろとあると思います。 でも実際にどうやってブログで稼ぐのか分からない人が大半です。 今回はブログを ...