
当ブログでも使っているWordPressテーマ「WING(AFFINGER5)」の、会話ふきだしのアイコンを大きくするカスタマイズを紹介します。
この記事を書いた時点(ver20200511)では、会話アイコンのサイズはデフォルトで60px、「会話風アイコンを少し大きく」にチェックを入れても80pxと、ちょっと小さめなんですよね。
この記事では、会話アイコンを80px以上にするCSSを紹介します。
会話アイコンを大きくする方法
CSS.st-kaiwa-face,
.st-kaiwa-face2 {
width: 100px;
}
.st-kaiwa-face img,
.st-kaiwa-face2 img {
width: 100px;
}
.st-kaiwa-face-name,
.st-kaiwa-face-name2 {
max-width: none;
}
赤字の数値を変更することで、会話アイコンのサイズを調整することができます。2ヶ所、同じ数値にします。
「AFFINGER5 管理」「会話・ファビコン等」の「会話風アイコンを少し大きく」のチェックを外して使ってください。
スマホ表示も考えると、100pxくらいがちょうどいいかな?私は100pxで使ってます。
会話アイコンのサイズ見本
60px

80px

100px

120px

有名テーマの会話アイコンのサイズ
テーマ | PC表示 | スマホ表示 |
---|---|---|
JIN | 80px | 60px |
SANGO | 110px | 80px |
THE THOR | 85px | 75px |
SWELL | 80px | 60px |
Cocoon | 約80px | 約60px |
有名テーマの会話アイコンのサイズをざっくり調べてみました。ほとんどのテーマで、PC表示とスマホ表示でサイズが変わります。
「AFFINGER5」のように、サイズ変更の機能があるテーマもあるかもしれませんが、そこまでは調べてません。