前提：今現在、私はmacOS 13.7.7 で、Safari 18.6 を使用。
Bloggerブログで、テンプレートはQooQリスト版をカスタマイズして利用中。
なんかまた、おかしな所に気づいてしまった。
記事下のコメント欄のアイコンが変だ。
（以下の画像は本ブログと同様にカスタマイズしてある、テストブログより）
こんなの。
QooQリスト・オリジナルのテストブログの方では問題ない。
記事へのコメントなんてめったに無いから、気づかんかったわ。以前に問題なかったのは覚えてる。とすればその後の私のカスタマイズのせいだよな。
Safariのメニューバーで 開発＞要素選択を開始
（Safariデフォルトでは開発は非表示。Safari＞設定＞詳細 で、「Webデベロッパ用の機能を表示」にチェックを入れて、たぶん再起動）
カーソルを該当部分に移動してクリック、新たに表示されたWebインスペクターのボックスモデルを見ると、右のマージンが12。別にこれは関係ないよなー、とは思ったものの、なんか気になった。
とりあえず、この部分を0にして、リターン。
すると、アイコン画像が直った！ 原因、これ？
なんでー？ パディングじゃなくてマージンなのに？
そもそも、そんなとこ、私はいじった記憶はないぞ。
必死になって、HTMLを探してみる。（Bloggerの テーマ＞HTMLを編集）
marginで検索して、関係ありそうなものはないかと。
すると、いかにも関係しそうなcssを見つけた。
/* 左に寄せた画像に回り込んだ文字の隙間を空ける*/img {margin-right:12px;}これは記事内で左側に画像を置いたときに、回り込む文章との境目が少なくて見栄えが悪かった。それを広げるために書いておいたやつ。
えっ、これがコメント欄の画像にも適応されちゃうの？ と言うか、なんでマージンでそうなるねん。コメント欄の部分はGoogleのシステム側でがっちり固まってるから、そうなるんかな？
ためしに上記のcssを削除して、テストブログの方で確認してみる。コメント欄のアイコンは正しく表示された。
そして画像を左に置いて、文章を回り込ませた記事も作ってみたが、ちゃんと画像との間に適度な隙間があるな。
おかしい。以前に同様の事をした時に、回り込んだ文字が画像ギリギリにくっついて見ずらかったから、空けたと思うんだけど。
うーーん。ま、いっか。
（9月4日：追記）
わかった！ というか思い出した。
追記で書こうと思ったけど、長くなりそうなので別の記事にする。
投稿
0 件のコメント:
コメントを投稿