STORKでふきだしのアイコンが小さくなってしまう問題が解決したので備忘録。

こんにちは✨
主婦ブロガーのあず（yuuki_azusa ）です。

実は、WPテーマ「STORK(ストーク)」を買ってからずっと悩んでいたことがありました。

それは、ふきだしのアイコンが何故か縮んでいってしまうこと！

ググっても原因がわからず、STORKを使っている他の方のブログを見ても、アイコンが縮むことはなく…。

あずさん

なんで私のブログだけ！？

と思っていたんですが無事解決したので、もし同じような症状で悩んでいる方がいたら参考にしてみてください。

STORKのショートコードで表示するふきだしのアイコンが縮む現象

アイコンがだんだん縮んでいく…

購入してからずっと、この現象に悩まされてきました。

インストールし直してもダメ。真っさらなWPに適用させてもダメ。STORKのアップデートでもダメ。

酷いときには●だけになってしまって、アイコンが全く表示されないことも…。

Twitterでボヤいてみた

ストークのふきだしのアイコンが、スマホから見たときに小さくなってしまう原因わかる方いませんかね…。私だけなんですよね…他のストーク愛用者の人のブログ見に行っても全く小さくならない…。

— あずさん＠がむしゃらブロガー (@yuuki_azusa) September 11, 2017

今まで誰に聞いてもわからなかったので、ふわっとタイムラインに流れるだけの状態に…。

すると、すぐに3人の方からリプライが！

例えばどの記事ですか？自分のと比べて見たいのでおしえてくださいな。

— Satoshi@Macブロガー (@satoshigarage) September 11, 2017

こんな感じがベスト？ pic.twitter.com/2MQoweWUtV

— 野沢 謙介⚡️ジャックナイト子連れ参加 (@thundergirl6063) September 11, 2017

アイコンとセリフがパーセントで指定されてるからですね、解決方法送ります^_^

— アツシ@frontenddaily.work (@Frontenddaily_w) September 11, 2017

あずさん

神様いっぱい降臨した！！！

解決方法

サンダーガール(@‪thundergirl6063‬)さんが、すぐに解決方法を教えてくれました。

子テーマのスタイルシート(style.css)に以下の記述をするだけ。

.voice .icon img{
width:60px;
}

すると・・・！

アイコンが全く縮まなくなった…！

この記事を見て頂いてもわかるように、ふきだしのアイコンが小さくならないまま表示されるようになりました。

あずさん

今まで悩んでた約1年なんだったんだ…

ずんずん

一瞬で解決したね（笑）

原因はshortcode.cssだった

さて、解決したものの原因が気になります。

原因はアツシオクムラ(@‪Frontenddaily_w‬)さんが教えてくれました。

アイコンとセリフがパーセントで指定されてるからですね、解決方法送ります^_^

— アツシ@frontenddaily.work (@Frontenddaily_w) 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にちょいちょいと追記してみてください。

あず（yuuki_azusa ） でした
おしまーい。