WordPress

【AFFINGER5】会話ふきだしのアイコンを大きくするカスタマイズ

「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」のように、サイズ変更の機能があるテーマもあるかもしれませんが、そこまでは調べてません。

-WordPress

© 2020 MARKLOG