ゲーム記事は「ゲーム女子」に移動しました

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

どうも、あず(@yuuki_azusa)です

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

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

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

あず

なんで私のブログだけ!?

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

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

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

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

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

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

Twitterでボヤいてみた

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

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

あず

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

解決方法

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

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

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

すると・・・!

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

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

あず

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

旦那

一瞬で解決したね(笑)
MEMO
このブログは2017年9月25日にテーマを「SANGO」に変更しました。

原因はshortcode.cssだった

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

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

どういうことなのか説明すると、STORK(ストーク)のテーマの中にはshortcode.cssという欄があるのですが、そこでショートコードで表示するもののデザインが決定されています

もちろん、ふきだしのデザインもここでされています。

shortcode.cssの362行目で

css
.voice .icon {
    width: 18%;
}

と指定されていて、さらに365行目では

css
.voice .voicecomment {
    width:80%;
    font-size: 0.95em;
}

と指定されています。

アイコンが縮んでしまうのは、ここがパーセントで指定されているのが原因だったようです。

ちなみにshortcode.cssはWPの管理画面からは確認出来ないので、サーバーのファイルマネージャーなどを使用して確認する必要があります。

子テーマにshortcode.cssはないので、今回はstyle.cssに追記する形でパーセント指定からピクセル指定に変更しました。

アイコンが縮まなくなって良かった

初めてSTORK(ストーク)を買ってから約1年。ずっと悩んでいたのが嘘のように一瞬で解決しました!

Satoshiさん、サンダーガールさん、アツシオクムラさん、本当にありがとうございました。

自分で解決しようとするのは大事ですが、得意な人の手を借りるのも大切ですね…!

ということで、同じ症状で困っている方がいましたら是非、style.cssにちょいちょいと追記してみてください。

最後まで読んでくれてありがとうございました。あず(@yuuki_azusa)でした

コメントを残す