「Speech bubble」の画像（アイコン）サイズを大きく変更する方法

会話風ふきだしが簡単につくれる人気のWordPressプラグイン「Speech bubble」の画像（アイコン）サイズを変更する方法をご紹介します。

デフォルト設定では少し画像（アイコン）が小さいのが気になりますね。

そこでCSSをいじって少しだけ画像（アイコン）サイズを大きくしてみました。

吹き出し文字よりも画像（アイコン）サイズが大きくなってバランスが良いですね！

CSS編集をする必要がありますが、コピペでOKですので、ぜひやってみてくださいね。

※この記事で紹介しているCSS編集用のコードを適用すると、パソコン画面（721px以上）で表示された場合のみ画像サイズが大きくなります（スマホは逆に目立ちすぎますのであえて変化しないようにしています）。

クリックできる目次

CSS編集で画像サイズを大きく変更

Speech bubbleは吹き出しタイプ別にCSSファイルがあります。

「ln、ln-flat、std、fb-flat」などですね！

例えば、タイプlnの画像サイズを変更したいのであれば、sb-type-ln.cssファイルを編集します。ln-flatの場合は、sb-type-ln-flat.cssを編集します。

CSSファイルの場所

「wp-content/plugins/speech-bubble/css」の下にあります。

CSSファイルバックアップ

まず編集するCSSファイルのバックアップをとりましょう。

FFFTPなどのソフトを使ってCSSファイル場所にアクセスします。

編集するCSSをパソコン上にダウンロードしてバックアップするか、レンタルサーバー上にファイルを複製してバックアップをしておきます。

※必ずバックアップします。CSS編集後に万が一問題が発生した場合にもとの状態に戻せるようにするためです。

CSSファイル編集

話者領域の下から話者の名称部分の上までを全部削除して次のコードで置き換えます。

/**
* .sb-type-TYPE > .sb-subtype-X > .sb-speaker
*
* 話者領域      
* Speaker Field 
*/

/*コードの置換ここから↓*/
@media screen and (min-width:721px) {
.sb-type-ln > .sb-subtype-a > .sb-speaker,
.sb-type-ln > .sb-subtype-c > .sb-speaker {
	float: left;
	position: relative;
	margin-right: -70px;
	width: 80px;
}

.sb-type-ln > .sb-subtype-b > .sb-speaker,
.sb-type-ln > .sb-subtype-d > .sb-speaker {
	float: right;
	position: relative;
	margin-left: -70px;
	width: 80px;
}
}
 
@media screen and (max-width:720px) {

.sb-type-ln > .sb-subtype-a > .sb-speaker,
.sb-type-ln > .sb-subtype-c > .sb-speaker {
	float: left;
	position: relative;
	margin-right: -70px;
	width: 70px;
}

.sb-type-ln > .sb-subtype-b > .sb-speaker,
.sb-type-ln > .sb-subtype-d > .sb-speaker {
	float: right;
	position: relative;
	margin-left: -70px;
	width: 70px;
}
}

/**
* .sb-type-TYPE > .sb-subtype-X > .sb-speaker > .sb-icon
*
* 話者のアイコン部分
* Speaker Icon part 
*/

@media screen and (min-width:721px) {
.sb-type-ln > .sb-subtype-a > .sb-speaker > .sb-icon,
.sb-type-ln > .sb-subtype-b > .sb-speaker > .sb-icon,
.sb-type-ln > .sb-subtype-c > .sb-speaker > .sb-icon,
.sb-type-ln > .sb-subtype-d > .sb-speaker > .sb-icon {
	text-align: center;
	height: 80px;
}

.sb-type-ln > .sb-subtype-a > .sb-speaker > .sb-icon > img.sb-icon,
.sb-type-ln > .sb-subtype-b > .sb-speaker > .sb-icon > img.sb-icon,
.sb-type-ln > .sb-subtype-c > .sb-speaker > .sb-icon > img.sb-icon,
.sb-type-ln > .sb-subtype-d > .sb-speaker > .sb-icon > img.sb-icon {
	height: 80px;
	width: 80px;
	border-style: none;
}
}
 
@media screen and (max-width:720px) {

.sb-type-ln > .sb-subtype-a > .sb-speaker > .sb-icon,
.sb-type-ln > .sb-subtype-b > .sb-speaker > .sb-icon,
.sb-type-ln > .sb-subtype-c > .sb-speaker > .sb-icon,
.sb-type-ln > .sb-subtype-d > .sb-speaker > .sb-icon {
	text-align: center;
	height: 60px;
}

.sb-type-ln > .sb-subtype-a > .sb-speaker > .sb-icon > img.sb-icon,
.sb-type-ln > .sb-subtype-b > .sb-speaker > .sb-icon > img.sb-icon,
.sb-type-ln > .sb-subtype-c > .sb-speaker > .sb-icon > img.sb-icon,
.sb-type-ln > .sb-subtype-d > .sb-speaker > .sb-icon > img.sb-icon {
	height: 60px;
	width: 60px;
	border-style: none;
}
}
/*コードの置換ここまで↑*/


/**
* .sb-type-TYPE > .sb-subtype-X > .sb-speaker > .sb-name
*
* 話者の名称部分   
* Speaker name part
*/

レンタルサーバー上の該当CSSファイルを書き換えたら、次は画像（アイコン）サイズが変更されたかを確認します。