【ストーク】吹き出し画像が小さくなる現象の解決方法

ストーク stork

こんにちは。
YOSHI(@YShinkaron)です。

WordPressの有料テンプレート『STORK(ストーク)』で顔写真を使って、吹き出しアイコンを作成しようと思ったら、なぜか顔写真が小さくなってしまう現象が発生。

画像の拡張子の問題なのか?
それともサイズなのか?

って感じで、色々試した結果、CSSを少し変更することで解決できました。
この記事では、吹き出しの縮小問題の解決方法を紹介します。

吹き出しがぞうが縮小していく

ブロガーの間で人気が高いWordPressのテンプレート『STORK』で、吹き出しに画像を設定すると、なぜかどんどん縮小していく現象が発生しました。

この現象はPCのみで、スマホでは発生していないです。

吹き出しが縮小する現象

こんな感じに小さくなります。

CSSでwidthを固定すれば解決

解決法はとっても簡単で、CSSを少し変更してあげればOK。

CSSはどう変更したかというと、吹き出しの画像サイズを、75pxに固定しただけ。「え、こんだけ?」ってなくらいあっけない解決でした。

画像が小さくる原因はわかりませんでしたが、とりあえず解決すればいいので、追求はしません。

もし同じ現象が発生している方がいれば、下記のコードをストークのCSS欄に追記してあげれば解決できます。

.voice .icon img{
    width:75px; /*画像サイズは自由に変更可*/
}

CSSの変更方法

wordpressの外観>CSS編集をクリック

「外観」→「CSS編集」をクリックします。

CSSの入力画面

CSSを編集する画面が表示されますので、上記のように入力するだけ。
widthを75pxに設定していますが、自分の好きなサイズに変更してください。

YOSHI
CSSを変更したら、必ず保存をしようね!

まとめ

  • CSSを変更すれば解決する
  • 吹き出し画像のサイズを固定させる

吹き出し画像が縮小する原因はわかりませんが、画像サイズを固定化させることで、その後、同様の現象は発生しなくなりました。

ページをリロードする度に、吹き出し画像が縮小するようなら、CSSで画像サイズを固定化させてあげてください。

YOSHI
役に立ったらシェアしてくれると嬉しいです!

シェアしてね!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です