「AFFINGER5」の会話アイコンって、もっと大きくできないのかな。
当ブログでも使っている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
これは60px。デフォルトだとこのサイズです。ちょっと小さい気がしますね。
80px
これは80px。「AFFINGER5 管理」「会話・ファビコン等」の「会話風アイコンを少し大きく」にチェックを入れると、このサイズになります。
100px
これは100px。このくらいがちょうどいいのかなと思います。
管理人
120px
これは120px。PC表示だといい感じですが、スマホ表示だとちょっと大きめです。
有名テーマの会話アイコンのサイズ
| テーマ | PC表示 | スマホ表示 |
|---|---|---|
| JIN | 80px | 60px |
| SANGO | 110px | 80px |
| THE THOR | 85px | 75px |
| SWELL | 80px | 60px |
| Cocoon | 約80px | 約60px |
有名テーマの会話アイコンのサイズをざっくり調べてみました。ほとんどのテーマで、PC表示とスマホ表示でサイズが変わります。
「AFFINGER5」のように、サイズ変更の機能があるテーマもあるかもしれませんが、そこまでは調べてません。
