現在テーマ変更に伴う修正作業中です。一部表示崩れがありご不便をおかけしています。

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

いらっしゃいませ三姉妹育児に奮闘中の主婦、あず(oyakocreate)です。

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

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

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

わたし

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

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

広告

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

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

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

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

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

Twitterでボヤいてみた

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

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

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

解決方法

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

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

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

すると・・・!

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

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

このブログは現在、テーマを変更しています。

わたし

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

だんな

一瞬で解決したね(笑)

原因はshortcode.cssだった

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

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

どういうことなのか説明すると、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)でした!


広告
>WordPressテーマはTHE・THOR(ザ・トール)がおすすめ

WordPressテーマはTHE・THOR(ザ・トール)がおすすめ

当ブログで使用しているWordPressテーマは「THE THOR(ザ・トール)」です。

THE THOR(ザ・トール)」は機能が豊富で、記事を書く効率が格段にアップ。税込15,984円で何個のサイト・ブログで使用してもOK。

カスタマイズ知識がなくても、設定項目を1つずつ進めていくだけでおしゃれなブログ・サイトが作成できます。

無料・無期限・無制限でのアフターフォローが受けられるので、安心して使用できるイチオシの有料テーマです。

CTR IMG