4~5日前から、このブログサイトのテンプレートのマイナーチェンジを行っています。
そして昨晩、かなりの規模でスタイルシートをいじくりまわしました。
サイト表示が乱れて正常に閲覧出来ない場合は、F5キーを1回押してページのリロードを行うか、ブラウザのキャッシュを一旦すべて削除してみて下さい。
「リロードしても表示がおかしいページがあるよ!」って場合は、ご利用のブラウザとURLを添えてコメントやメール、Twitterからお知らせ頂けるとありがたいです。 お手数をお掛けしますm(_ _)m
主な調整内容
- firefoxのみ、広告表示がズレて表示される箇所の修正
firefoxのみ、DoubleClick for Publishersを利用した広告の、padding・marginがズレていたのを修正。- Pタグにどんだけpadding・marginを大きくとっても、ボトムの空間が無視される。DoubleClick for Publishersのjsは「Pタグに指定したpadding・marginの扱い」をおかしな解釈しますね。。。
- DIVタグで囲み直すとアッサリ治りました('Α`)
- Opera、Chrome、Safari、IEでは全く問題ないのに。どういう事なんだろう?
- 行間の調整
上記Firefoxの問題を解決するために、Pタグの行間設定を色々と調整
解決策が「Pタグ使わない」だったので無駄だった&1週間悩んだ('Α`))
- せっかくの機会だったので、「このくらいが読みやすいかな?」って行間を考え直し、少しだけ段落の隙間を大きく取ってみました。
- スタイルシートのスリム化
スタイルシート内の無駄な部分を洗い出し、14.3kb⇒13.8kbバイトと0.5kbながらスリム化に成功。あと0.5kbくらいは削減できそうだけど、ここで気力が無くなった(^_^;
- 今のテンプレート、一番肥大化した時期はcssは18.3kbあった。
その頃から比較すれば25%削減に成功。計画性なしに追加して行く文字装飾に無駄が多いなぁ。。。としみじみ。 - 様々なブラウザでの互換性を保つ為の記述を削除してしまった気がする。
ざっと見た感じ不具合は発見できなかったが、本人の気が付かない部分で何か出て来そう ( >_<)
- 今のテンプレート、一番肥大化した時期はcssは18.3kbあった。
- 左サイド下段広告の調整
左サイドにあるPCメーカー、BTOショップ等への広告リンクのレイアウト微調整しました。
行間を広げ、ポップアップで誤操作が起きにくいよう調整しました。
- 従来のは操作感覚が悪すぎましたね(^_^;
- 半年以上ほったらかしだった広告内容も刷新。Corei7-2600等のインテル第二世代Coreプロセッサー搭載品の情報を記載しました。
現在確認できている不具合
- 水平線(hrタグ)の表示で、段組みがずれる。
現在Google Chromeのみで発生を確認。
- かなり前から発生していたかもしれないが、今回初めて気が付いた。
- 悲しいかな対処方法を思いつかず。⇒ このページをアップする直前に原因解明。
2ページほどhtml内でhrタグにwidth:100%;を指定してただけだった。
- かなり前から発生していたかもしれないが、今回初めて気が付いた。
- IE6で表示した場合、画面左上に謎のボックスが2個表示される
今回バッサリ削除したcssの一部は、IE6用に書いていた部分かもしれない。
- 実害もないし、気になるレベルじゃないのでそのままにしておく。
- IE6は既に、セキュリティ的に過去の遺物です。そろそろ利用するのは辞めましょう。IE8へ移行するか、IE以外のブラウザを利用するべきです。
- IE6で左上の人気記事メニューが利用できない
特殊なスタイルシートを組んでいます。IE6で利用できないのは仕様です。 - 検索エンジンのキャッシュでこのサイトを表示すると、激しく段組みがずれる
ごめんなさい。このサイトを立ち上げた時からの仕様です><
- IEの互換表示について不勉強なままトリッキーな段組みしたのが原因です。
- 大幅リニューアルをする際には発生しないようにします