SANGOでプロフィール画像がズレる原因はプラグイン。サルワカさんのおかげで解決しました

こんにちは、こはるです!

 

今月初めにWordPressテーマをSANGOに変えてから、デザインも使い心地もとっても気に入っています。

 

このデザインに変えてからというもの、「かわいいブログですね!」と言ってくださる方がいらっしゃって、すごく…嬉しいです…!

 

 

SANGOの中で私のお気に入り機能のひとつが、サイドバーにいい感じのプロフィールを設置できること。

(画像お借りしました)

 

専用のHTMLを準備してくださっていて、そこに画像のURLやプロフィール文、SNSのURLをペーストしていくだけで素敵なプロフィールが表示されるんです。

参考

サイドバーや記事下にプロフィール(この記事を書いた人)を設置するSANGOカスタマイズガイド

 

 

もちろん、私もカスタマイズガイドを参考に、設置してみましたよ!

見てー!

 

 

・・・ん???

 

 

 

 

なんか、ズレてない???

 

こはるアイコンがさ、こう、

ニュッ と左に寄っている気がする。

そして、カスタマイズガイドの見本より、アイコンが、小さい・・・???

 

むむむ。

気になったら落ち着かなくなり、カスタマイズガイドを読みまくって色々と試行錯誤してみました。

しかし、ウィジェットを貼り直してもダメ。画像を変えてみてもダメ。何ならプロフィールやURLを全部入力し直してもダメ…。

ああ、何ということでしょう。素人の私には解決できなさそう…。

 

他のSANGOユーザーさんのプロフィールアイコンは美しく表示されているのに…

何か私のやり方がいけないのだろうか。

どうしても分からない・・・

 

完全に詰んでしまった私は、何かヒントをいただけないか、ダメもとで作成者様にご質問させていただくことにしました。

今思うと、もっと色々原因を考えることもできたはずだけど、何せ素人なもので…お恥ずかしい。

 

 

でも結論から申し上げると

サルワカさんは本当に親切な方でした。

 

助けて!見本みたいにキレイに表示されない

念のため先に申し上げておきますと、当然ですが個別のカスタマイズサポートはしてもらえません。

購入者として利用規約も隅々まで読み、カスタマイズガイドも全ページ拝見しました。

サイドバーにプロフィールを表示する方法のページも、このことがあってから一字一句読み落とさないよう真剣に読み直しました。

でも解決できませんでした(泣)

 

私が今回知りたかったことは、プロフィール画像のサイズにより表示が崩れるケースがあるかどうか。

そして表示崩れとなる原因。

 

画像自体に問題があるのかと、いろんなサイズに変更してアップして試してみたりもしました。

私のメディアライブラリえげつないことになってます。こはるアイコンだらけ。

 

もうね、めちゃめちゃ悩みました。

お問い合わせフォームはあるけど、こんなことに時間を割いて貰うのもなぁ…

しかも、こんな質問、サポートしてもらえるか分からないし…

 

でも、表示が崩れる原因が知りたい…

SANGOを使う者として、美しく表示しておきたい…

カスタマイズガイドには「正方形のアイコンチックな画像」と書いてあったので、もし適切なサイズがあれば知りたい…

 

そんな時、お問い合わせページに書いてあったこの一文。

カスタマイズガイドにはコメント欄が用意されています。関連する内容であれば、そちらからご質問頂いても構いません。

 

コ、コメント欄・・・!

 

 

こうして私は、勇気を出してコメントさせていただくことにしたのであります・・・

 

 

画像についた謎のサイズ指定

恐る恐る、プロフィールに関するカスタマイズページにコメントを入れてみました。

緊張のあまりガッツリ長文を打ってしまったので、以下抜粋。

【こはるコメント(一部)】

 

256×256ピクセルの正方形画像を使用しておりますが、画像の大きさにより表示がズレることはありますでしょうか。複数ブラウザで確認しましたが、同じような表示(左寄り)となります。
何か考えられる原因等ございましたらご教示願えませんでしょうか?

 

するとその後、なんとご返信をいただけました・・・!

【サルワカさんコメント】

なるほどなるほど。
詳しい事情は分かりませんが、なぜかimgタグにwidth=”56″ height=”50″というサイズ指定が入っているようです。
こちらを消せば、正しく表示されるはずです。

 

い、imgタグに・・・

サイズ指定・・・!?!?!?!?!?

私、そんなことしちゃったのでしょうか・・・!?!?!?

 

ウィジェットのHTMLタグ内にはサイズ表記はなし。

ぐぬぬ…となった初心者は、震える手でF12を押してみました。(chromeの検証機能)

 

うん、確かにありました。

ちなみにスマホサイズで確認すると、サルワカさんがおっしゃる数値が表示されていました。

 

これをどう消すかですよ、奥さん。

ウィジェットのHTMLには記載がなくて、こちらにはあるということは、

ぴ、PHPファイルを操作しなくちゃいけないのかしら・・・???

 

震えあがる初心者。

 

 

でもせっかく教えていただいたヒント、このまま分からないままにしたくない・・・!

 

そこで、申し訳ないと思いつつコメントの返信に返信させていただくことに。

【こはるコメント(一部)】

 

ウィジェットのカスタムHTMLの中にはそのような表示がないのですが、これはPHPファイルなどを編集しないと直らないのでしょうか。

 

すると、その後またお返事をいただきました・・・!

【サルワカさんコメント】

 

SANGOにそんな機能はないので原因プラグインだと思います。
JetpackのPhotonとか。

 

 

 

じぇ、Jetpackー!?!?

 

 

 

プラグインによる不都合

皆さん、Jetpackって使ってます?

私も使っています。サイト統計情報だけ。

 

そんな状態ゆえ、設定なんて今まで大して触ったことがなかったんですよ…お恥ずかしいことに…!!!

 

Jetpackの「Photon」。調べてみると、私の管理ページでは「メディア」と表示されたこちらの項目のことのようです。

これの一番上、「画像と写真をスピードアップ」のスイッチ。

確かにオンになっている・・・。

これをオフにすると、「Photon」が無効になるらしい。

 

 

やってみた。

 

 

 

 

直った…(泣)

 

 

な、直りました・・・!!!

まさしくJetpackのこの設定でした・・・!!!

 

サルワカさん、本当に本当にありがとうございます・・・!!!

 

 

SANGOを買ってよかった

SANGOはね、デザインが本当にキレイだし、カスタマイズガイドも充実していて初心者にも扱いやすいテーマです。

でもそれ以上に嬉しくてたまらなかったのは管理者であるサルワカさん(のSANGO作成者様)の優しさです。

 

お恥ずかしいことに、凡人である私は初歩的な「プラグインを疑うこと」が頭からすっかり抜けてしまっていました。

まさか自分がインストールしたJetpackによる不具合だとは一ミリも想像できておらず、本当にお手数をおかけしてしまいました・・・

 

しかし、親切に返信していただき、原因を突き止めていただくことができました。

お返事も当日中にいただくことができた結果、ご質問したその日のうちに問題を解決することができました。

いちユーザーにも手厚くフォローしてくださって、本当に感謝しています。

 

こんなに親切な方が作られたWordPressテーマです。使い心地がいいに決まってます。最高なんです。

この一件でわたくし、ますますサルワカさんの大ファンになりました。

 

この記事は、私のようにJetpackのメディア(「Photon」)の設定がオンのままの

「アイコン小さくなっちゃったSANGOユーザーさん」のお役に立てれば・・・という気持ちもありますが、

 

正直なところ、

サルワカさんに親切にしていただいて嬉しかったです

という気持ちを書きたかったという方が大きいかもしれん。

 

本当にありがとうございました。

皆もSANGO、使ってみてね。

 

参考

SANGOダウンロードページSANGO:心地よいWordPressテーマ

 

 

SANGOの魅力はこちらの記事でチェック

・サルワカさんのWordPressブログテーマ「SANGO」に惚れてもーたんじゃい!!

SANGOのおすすめポイントをまとめました。

 

 

 

コメントを残す

メールアドレスが公開されることはありません。