【Diver】吹き出し会話のアイコン画像サイズを変更する方法!


アイコスでも吸えます!定期購入で割引!

 

 

 

 

 

どうも、YoSK8(ヨースケ)です。

僕が愛用しているWordPressのテーマ「Diver」には「入力補助」という神機能があります。

入力補助ではブログ記事には欠かせない「吹き出し会話」も簡単に作れますが、吹き出し会話の「アイコン画像」が少し小さいかな?と個人的には思っていました。

アイコン画像
もっと大きい方が好きかも…

 

アイコン画像とは↑の女性画像のことですね。

なので、この吹き出し会話の「アイコン画像」を大きくする方法を調べてみましたが、残念ながらその答えが見つかりませんでした。

※どこかにあるかもしれないです (笑)

ということで、Diver公式ページから問い合わせてみましたが、いつもと同じように迅速・丁寧な回答を頂けました。


【Diver】吹き出し会話のアイコン画像サイズを変更する方法!

吹き出し会話のアイコン画像サイズを変更するには、↓のCSSコードを「追加CSS」に貼り付けてサイズを調整すれば可能とのことです。

.voice .icon img {
width: 70px;
height: 70px;
}

 

アイコン画像のデフォルトサイズは「70px」になっていますが、僕は「110px」に変更してみました。

ちなみに、現在表示されているアイコン画像のサイズが「110px」です。

これが110pxのアイコン画像です!

 

画面幅が小さいスマホ表示だと、吹き出しのレイアウトが崩れてしまうことがあるので、必要に応じて↓のCSSも追加してみてください。

.voice {
    display: flex;
    align-items: flex-start;
}
.voice.right {
flex-direction: row-reverse;
}
.voice.left .icon .name{
margin-right:20px;
text-align:center;
}

.voice.right .icon .name{
margin-left:20px;
text-align:center;
}

 

これでOK!

 

ということで、吹き出し会話のアイコン画像を大きくしたい場合は試してみてください。


少ない文字数でも吹き出しの横幅を合わせる方法!

吹き出し会話の「吹き出し部分」は、画面幅が小さい場合には横幅が固定されて表示されるので、文字数が少ないと↓のような空白スペースができてしまいます。

スマホなどの画面で見た場合ですね。

この余分なスペースをなくして、少ない文字数でもピッタリサイズの吹き出しにしたい場合は、↓のCSSコードを貼り付ければOKです。

@media screen and (max-width: 480px){
.voice .text {
width: auto;
}
}

 

これで、少ない文字数でも横幅が同じサイズの吹き出しが表示されます。


【Diver】吹き出し会話のアイコン画像サイズを変更する方法!まとめ

Diverの入力補助で使える、吹き出し会話のアイコン画像や吹き出し部分のサイズを変更する方法を紹介してきました。

これまでにもDiverのサポートには何度か問い合わせたことがありますが、早ければ数時間後、遅くても翌日には丁寧な回答を頂けています。

毎度の迅速なご対応ありがとうございます。

ということで、最後までお付き合い頂き、ありがとうございました^^


アイコスでも吸えます!定期購入で割引!