iPadでイラストを描いてます♡
WPカスタマイズ

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

▼ 楽しくブログを運営したいあなたに
▼ 英語に興味のあるあなたへ

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

実は、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にちょいちょいと追記してみてください。

あず(yuuki_azusa ) でした
おしまーい。

有料テーマを1つだけ買うなら

20万円以上を有料テーマ購入に使った私が、「1つだけ」有料テーマを購入したいあなたにおすすめ!

Diver」なら、WordPress初心者でもブログもアフィリエイトサイトも思いのままに作れます。

詳細ページ公式ページ

ABOUT ME
あずさん
あずさん
7歳・2歳・1歳の娘がいる主婦ブロガーです。「あずさんち」では自分の経験を元に、今後同じ悩みを持った主婦やママの助けになるようなブログを書いていきます。在宅ワークという働き方の選択肢を広めたい!

POSTED COMMENT

  1. KAZU より:

    スマートフォンで見ると、アイコンが縮んでしまう問題に悩み、ググったところこちらのサイトにきました!問題が解決しました!ありがとうございます!
    ググってもこちらのあずさんのサイトしかこの問題の解決方法が書いてなかったので大助かりでした。

COMMENT

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