こんにちは。
YOSHI（@YShinkaron)です。
WordPressの有料テンプレート『STORK（ストーク）』で顔写真を使って、吹き出しアイコンを作成しようと思ったら、なぜか顔写真が小さくなってしまう現象が発生。
画像の拡張子の問題なのか？
それともサイズなのか？
って感じで、色々試した結果、CSSを少し変更することで解決できました。
この記事では、吹き出しの縮小問題の解決方法を紹介します。
吹き出しがぞうが縮小していく
ブロガーの間で人気が高いWordPressのテンプレート『STORK』で、吹き出しに画像を設定すると、なぜかどんどん縮小していく現象が発生しました。
この現象はPCのみで、スマホでは発生していないです。
こんな感じに小さくなります。
CSSでwidthを固定すれば解決
解決法はとっても簡単で、CSSを少し変更してあげればOK。
CSSはどう変更したかというと、吹き出しの画像サイズを、75pxに固定しただけ。「え、こんだけ？」ってなくらいあっけない解決でした。
画像が小さくる原因はわかりませんでしたが、とりあえず解決すればいいので、追求はしません。
もし同じ現象が発生している方がいれば、下記のコードをストークのCSS欄に追記してあげれば解決できます。
.voice .icon img{
width:75px; /*画像サイズは自由に変更可*/
}
CSSの変更方法
「外観」→「CSS編集」をクリックします。
CSSを編集する画面が表示されますので、上記のように入力するだけ。
widthを75pxに設定していますが、自分の好きなサイズに変更してください。
CSSを変更したら、必ず保存をしようね！
まとめ
- CSSを変更すれば解決する
- 吹き出し画像のサイズを固定させる
吹き出し画像が縮小する原因はわかりませんが、画像サイズを固定化させることで、その後、同様の現象は発生しなくなりました。
ページをリロードする度に、吹き出し画像が縮小するようなら、CSSで画像サイズを固定化させてあげてください。
役に立ったらシェアしてくれると嬉しいです！
