- このトピックには18件の返信、2人の参加者があり、最後に
により11年、 2ヶ月前に更新されました。
-
投稿
-
-
たびたび、お世話になっています。
Simplicityで表示される、フォローボタンなんですが背景にbase64形式の画像を使っていると思います。
これだと、ほんの多少ですが読み込みが遅くなるような気がしますし、僕の環境だとグーグルプラスの表示に少し不具合がある？ような気がするのでcssだけで表示してみたらいかがでしょうか。例えば、style.cssの2400行目辺りの/*feedly、LINEアイコンは自作なので少し大きかったので調整*/の下の部分とul.snsp li a spanの部分を削除して、以下の様なコードを追加すれば大丈夫だと思います。
ul.snsp li a span.icon-feedly-square, ul.snsp li a span.icon-line-square, ul.snsp li a span.icon-hatebu-square { line-height: 33px; font-size:33.5px; position: relative; top: 1px; }私の環境ではこれで正常に表示できてます。（カスタマイザーから、全てのsnsの表示を確認しましたが問題なし、色を消しても問題なしです。）
ちなみに、不具合だと思うのですがカスタマイザーから本文下フォローボタンの表示を選択しても固定ページのフォローボタンが消えません。
-
yokudekiruさん
小さい画像だけをBase64にしているので読み込みは遅くならないと思いますし、こちらの環境では読み込み遅くなかったです。
シークレットウインドウで確認しても、フォローボタンの表示に読み込み遅く感じますか？(IEでも読み込み遅く感じますか？)グーグルプラスの表示に少し不具合がある?ような気がするのでcssだけで表示してみたらいかがでしょうか。
Chrome以外のブラウザには不具合がないという解釈で問題ないでしょうか。
覚えている範囲で良いので、どのような不具合が起きているのか詳細提示した方が良いと思います。 -
-
-
私が不具合と感じていたものは以下の画像のようにグーグルプラスの上の部分の背景が切れていることです。（ブラウザキャッシュを消してみましたが、治りません。ちなみにChromeとIEとスマホで確認）
フォローボタンの読み込みは十分に早いですがBase64形式は30%サイズが大きくなるみたいなのでcssで読み込んだほうがわずか数バイトですけどページサイズが小さくなるのではないかと思い質問しました。
固定ページの不具合に関してはわいひらさんありがとうございます。
-
補足です。
Base64で読み込んだ場合のcss・・・約1kb×フォローボタン数
私のcssで読み込んだ場合・・・約0.2kb×フォローボタン数0.8kb×フォローボタン数の差は人間の感覚では例えフォローボタンを1ページに20個使っていても分からないと思います。
なので、私の「ほんの多少ですが読み込みが遅くなるような気がします」は勘違いをしていました。ごめんなさい。 -
#30981
こちらの開発環境では、ちゃんと表示されているようです。
あれから、いろいろ試しているのですが、そのように欠けて表示される不具合はどのブラウザでもちょっと確認できないです。（1.8.3未満のバージョンだとそうなるかもしれませんが、1.8.3をお使いのようですし）ズームを変更すると、背景がはみ出す倍率があるのは、見つけましたが、その不具合とはまた違うようですし。
ちょっと、こちらの環境でも再現できる方法がわからないと、修正は難しいかもしれません。
一応、次のバージョンで、ズーム機能によるズレは修正したつもりではありますが、やはり環境によっては、どうしても表示に違いが出てしまうのかもしれません。Base64は、1.8.3のバージョンアップ前に使用していたものの名残です。
前回の、バージョンアップで背景色を変更したので、もし不具合が出た場合に、すぐ戻せるように残しているだけです。そのままでも、特に問題ないと思ったので、そのままにしています。
ただ、フォローボタン背景のスタイルが固まったら、そのうち消すつもりではいます。Base64形式は確かに30%サイズが大きくなりますが、画像を読み込むよりはリクエスト数が少なくなるので時間短縮が図れます。
画像ファイルで呼び出すよりは、僕は速いと考えています。
画像をBase64にしてWebページを高速化 | Thought is free
ただいずれにせよ、背景色を設定した時点で、安定したら削除するつもりなので、そのうち削除されると思います。 -
不具合の件もう一度確認させていただきました。すると、
１ 私のPCのChromeで不具合あり
２ シークレットウィンドウから確認、変化なし
３キャッシュを完全に削除しましたが変化なし
４IE9でも確認、不具合あり
５スマホのChromeから確認しても不具合あり
６ スマホのChromeのキャッシュを消す、変化なし
７スマホのChromeのシークレットタブから確認、変化なし
８友達のタブレット（Chrome）から確認しても不具合ありでも、わいひらさんは不具合がないとおっしゃっているし・・・？？？？？
いろいろ、ブラウザの設定をいじったところ原因がわかりました。
Chromeの拡大/縮小を100%から110%にすることで治りました。
IEでも自動拡大の105％から100%にすることで治りました。
たぶん、私のパソコンが画面が大きい割に解像度を低く設定してたので起こったのではないかと考えています。少なくともこのような人は私だけではなく、他にもいると思うので改善したほうが良いのではないかと思います。
-
少なくともこのような人は私だけではなく、他にもいると思うので改善したほうが良いのではないかと思います。
ですので、不具合が再現できれば修正するつもりではいます。
僕の環境では、はみ出すならまだしも、欠ける表示は、1.8.3で添付画像のように表示されているので、どうしようもできません。Simplicityは、無料で個人開発しているものです。
正直、趣味で作っているテーマに完璧なものを求められても困ります。
不具合の完全な再現方法のわからない、ブラウザの倍率によって変わる細かな不具合の対応までは、1人では動作確認しきれないところもあります。
様々な環境の細かな不具合の部分までは、ちょっとカバーしきれないので、こちらで不具合を再現できないものに関しては、ちょっと勘弁願いたいです。一応、ブラウザのズームサイズによって背景色が枠からちょっとはみ出す部分に関しては、前回のレス時点で手元のファイルは修正したつもりなので、もし次のバージョンアップで直ってなかったら、対応は無理だと思います。
Attachments:
-
寝ログのことやSimplicityのことやフリーソフト等々お忙しくされている中いろいろと難しいことを要求してしまってわいひらさん本当にすいません。
趣味で作っているテーマに完璧なものを求められても困ります
これは当然のことであると考えます。Simplicityは完全に無料ですし、わいひらさんが趣味でやられていることなんですから完璧である必要はないと思います。
これからも迷惑になるかもしれませんがフォーラム等でわいひらさんを少しでもサポートできたらいいなと思っています。これからもSimplicityがより良い物になるように頑張ってください。 -
自分でサンプル作って、こうやったら直りますよと言おうとした所、どのcssが効いているか不明なんですけど、Simplicityのブラウザ上では修正できるものの、1から作ろうとしたらどうもうまく行かなかったので書いてないんですが、僕が思うに、
背景の白の部分でボタンのサイズと色が決定します。border-radiusも仕込んでおきます。
overflow:hiddenでボタンのサイズを決め打ちすれば、中のspanをwidth, height100%、absolute, top,left:0あるいは、縦横中央寄せにし、ボタンサイズよりも大きくすれば確実に思ったサイズでの表示が可能になります。そうするために、現状のfont-awesomeが入っているspanを内包するdivなりが必要なんですけれども、そこらはちょっとphpいじくるかjQueryで可能です。
問題は、font-awesomeを縦横中央寄せにできるかどうかですかね。
-
不具合の再現方法がどうしてもわからないので、修正できなくて申しわけないです。
こちらのテスト環境でも、同様の現象が出れば、おそらく対策はできると思うので気長に待っていただければと思います。これからも迷惑になるかもしれませんがフォーラム等でわいひらさんを少しでもサポートできたらいいなと思っています。これからもSimplicityがより良い物になるように頑張ってください。
迷惑なんてとんでもないです。最近、書き込みも結構多いうえに、その他にいろいろとやらなければいけないこともあるので、マジで助かってます。ありがとうございます！
>hidekichiさん
とりあえず、今回はブラウザのズームの対策を自分なりに行ってみたので、そのバージョンを公開して、しばらく様子を見て、その後もう一度確認してみたいと思います。 -
いっそのこと1からやってみました(笑)
faのspanをdivで囲んでjQueryでごにょごにょする | jsFiddle
構造を
ul li a .wBack ← jQueryで新設 spanと変更しまして、ボタンのサイズは.wBackで決定してます。border-radiusも。はみ出る分はoverflow:hiddenで消します。
ひとまずの所、ボタンはたいてい正方形でやると思うので、.wBackのサイズを取得して、spanにも同じサイズを与え、font-sizeは自動計算です。だいたいボタンサイズが33px、中身のfont-awesonが40pxだったので、1.212121ぐらいをかけて40px付近にしています。かけてるので、ボタンのサイズが変わればそれに追従するはずです。おそらく(笑)
line-heightも.wBackのサイズにして、どんぴしゃりと行けるように自動でいれてます。ブラウザをどれだけ拡大しても、ボタンサイズに対するフォントサイズ・line-heightなので、ブラウザの拡大・縮小に追従するでしょう。むしろボタンとボタンの間隔のが対応しきれないというデメリットもあったりしますが、これもpxで絶対値を入れてるからそうなるだけで、相対値(%やらemやら)で指定すれば何とかなるんじゃなかろうかと。
ブラウザの拡大縮小を150%ぐらいにする程度なら、全くのノープロブレムかと思います。むしろ好きなだけ拡大・縮小しちゃってくださいって感じです。まぁ若干ボタンのコーナーに白っぽいスジが見えたりするんですけど(firefox)、これはブラウザ次第って所でしょうか。
いっそのことborder入れちゃえばよいのかも知れません。あるいは、border-radiusやめるか、その他諸々を試してみるかという感じです。面倒だったので、横並びはfloatしてますが、今時のやり方ならdisplay:flexを使うのが良いかと思ったりもします。そうすればボタン間は勝手に計算してくれますし。
わいひらさんがレスをくれてる間に作っちゃってたので、既に何かしらに着手しているとは知りませんでしたが、まぁひとまず参考までに。
-
あ、font-awesomeに無い、はてブやらfeedlyの部分は他のアイコンに変更してます。
リンクの中身すら消すのが面倒だったので、うちのローカルサーバーのhtmlのまんまですが、ひとまず気にしないで下さい(汗) -
ボタンのサイズを変えた場合にborder-radiusが追従しないと思いましたのでアップデートしました。
-
-
いや、サイズを決め打ちするならjQueryは必要ないと思います。
僕のやり方だと、spanを囲むdiv入れるだけですし、これならphpで出力時に入れられますし。
ボタンサイズを変更したりする人がいた場合に、問題なくさせるためだけのjQueryです。 -
ついでに、センターが拡大するとズレると思ったので、leftの値も自動計算させました。
今度こそjQueryでごにょごにょ終了か | jsFiddle
svgとか画像だったらきちんとセンターにするのは簡単なんですけど、相手がフォントなので結構難しいですね。
-
フォローボタンの白色背景の表示の不具合の件、1.84のアップデートにより治っていました。素早い応ありがとうございます。
-
- トピック「フォローボタンの白色背景の表示の不具合」には新しい返信をつけることはできません。