• ブログ運営
    読まれるブログは読みたいブログだし、まずは存在を認識してもらうことが大切
    2018年02月08日
  • あずのおすすめ
    無名の主婦ブロガーがpolcaで10万円の支援をしてもらえた理由と今思うこと
    2017年08月16日
  • あずのおすすめ
    書評|フリーランスを代表して申告と節税について教わってきました。
    2018年02月28日
  • ゲーム
    【とび森amiibo+】村を売却する方法、条件、金額の決まり方を徹底解説!
    2018年03月27日
  • ブログ運営
    コピペで簡単にできるSANGOのカスタマイズ方法まとめ
    2018年02月09日
  • ゲーム
    【とび森amiibo+】アプデで楽になった住民厳選!指定追い出しも出来る!
    2018年03月27日
  • 奈良のこと
    にぼしこいし|奈良一煮干しの濃いラーメン店に行ってきた♡
    2018年03月25日
  • 妊娠・出産・育児
    ネスタリゾート神戸のイルミネーション「ネスタイルミナ」を動画付きレポ♡
    2018年04月19日
  • 妊娠・出産・育児
    お知らせ|「ハロー葉酸サプリ」様に出産後の体験談を寄稿しました
    2018年03月25日
  • あずのおすすめ
    私がモブログをする上で欠かせないおすすめアプリまとめ!
    2017年10月23日
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に追記する形でパーセント指定からピクセル指定に変更しました。


▼ 癒し犬たろすけのLINEスタンプ ▼
sponsord by. @tatsuya141free

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

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

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

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

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

最後まで読んでいただき、ありがとうございましたあず(yuuki_azusa ) でした。
投資に興味がある方はコチラも ▼
ブログ運営者さんにオススメ ▼

スポンサーリンク


WPカスタマイズの関連記事
  • SANGOの横長記事一覧カードをPC表示でも1列にするカスタマイズ
  • WordPress|投稿一覧画面に記事IDを表示するカスタマイズ
  • コピペでOK!記事タイトルの文字数カウンターを設置する方法
  • SANGOの内部リンクボックスにラベルをつけたりするカスタマイズ
  • コピペで簡単にできるSANGOのカスタマイズ方法まとめ
  • SANGOのサイドバーの横幅をコピペで変えるカスタマイズ方法
コメント一覧
  1. KAZU より:

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

コメントを残す