実は、WPテーマ「STORK(ストーク)
」を買ってからずっと悩んでいたことがありました。
それは、ふきだしのアイコンが何故か縮んでいってしまうこと！
ググっても原因がわからず、STORKを使っている他の方のブログを見ても、アイコンが縮むことはなく…。
なんで私のブログだけ！？
と思っていたんですが無事解決したので、もし同じような症状で悩んでいる方がいたら参考にしてみてください。
目次
STORKのショートコードで表示するふきだしのアイコンが縮む現象
アイコンがだんだん縮んでいく…
購入してからずっと、この現象に悩まされてきました。
インストールし直してもダメ。真っさらなWPに適用させてもダメ。STORKのアップデートでもダメ。
酷いときには●だけになってしまって、アイコンが全く表示されないことも…。
Twitterでボヤいてみた
ストークのふきだしのアイコンが、スマホから見たときに小さくなってしまう原因わかる方いませんかね…。私だけなんですよね…他のストーク愛用者の人のブログ見に行っても全く小さくならない…。
— あずさん＠雑記ブロガー (@oyakocreate) September 11, 2017
今まで誰に聞いてもわからなかったので、ふわっとタイムラインに流れるだけの状態に…。
すると、すぐに3人の方からリプライが！
例えばどの記事ですか？自分のと比べて見たいのでおしえてくださいな。
— Satoshi@Macの人 (@satoshigarage) September 11, 2017
こんな感じがベスト？ pic.twitter.com/2MQoweWUtV
— 野沢謙介⚡️ 年内180記事書く！残8 (@thundergirl6063) September 11, 2017
アイコンとセリフがパーセントで指定されてるからですね、解決方法送ります^_^
— アツシ@4日バンカー (@frontenddailyW) September 11, 2017
神様いっぱい降臨した！！！
解決方法
サンダーガール(@thundergirl6063)さんが、すぐに解決方法を教えてくれました。
子テーマのスタイルシート(style.css)に以下の記述をするだけ。
.voice .icon img{
width:60px;
}すると・・・！
アイコンが全く縮まなくなった…！
この記事を見て頂いてもわかるように、ふきだしのアイコンが小さくならないまま表示されるようになりました。
このブログは現在、テーマを変更しています。
今まで悩んでた約1年なんだったんだ…
一瞬で解決したね（笑）
原因はshortcode.cssだった
さて、解決したものの原因が気になります。
原因はアツシオクムラ(@Frontenddaily_w)さんが教えてくれました。
アイコンとセリフがパーセントで指定されてるからですね、解決方法送ります^_^
— アツシ@4日バンカー (@frontenddailyW) September 11, 2017
どういうことなのか説明すると、STORK(ストーク)のテーマの中にはshortcode.cssという欄があるのですが、そこでショートコードで表示するもののデザインが決定されています。
もちろん、ふきだしのデザインもここでされています。
shortcode.cssの362行目で
.voice .icon {
width: 18%;
}と指定されていて、さらに365行目では
.voice .voicecomment {
width:80%;
font-size: 0.95em;
}と指定されています。
アイコンが縮んでしまうのは、ここがパーセントで指定されているのが原因だったようです。
ちなみにshortcode.cssはWPの管理画面からは確認出来ないので、サーバーのファイルマネージャーなどを使用して確認する必要があります。
子テーマにshortcode.cssはないので、今回はstyle.cssに追記する形でパーセント指定からピクセル指定に変更しました。
アイコンが縮まなくなって良かった
初めてSTORK(ストーク)を買ってから約1年。ずっと悩んでいたのが嘘のように一瞬で解決しました！
Satoshiさん、サンダーガールさん、アツシオクムラさん、本当にありがとうございました。
自分で解決しようとするのは大事ですが、得意な人の手を借りるのも大切ですね…！
ということで、同じ症状で困っている方がいましたら是非、style.cssにちょいちょいと追記してみてください。
この記事はここまでです。もしお時間があれば、ぜひ他の記事も読んでいってくださいね。
あず（oyakocreate）でした！
