新規ブログへの移行と当ブログ更新休止のお知らせ
2009年01月27日

ブログの不具合、ついに解決!?

IEとSafariやFirefoxでの表示の違い*写真はクリックで拡大します。

さて、話しは少々ややこしくなります。

でも、ついに本当に長年胸につかえていたものが無くなった気

がしています。o(T◇T)o

まずは2つの異なるインターネットブラウザ(ウェブブラウザ)での表示の違いを確認していただ

きたいと思います。

ちなみに使用しているのはIEが基準のSleipnirとMac OS Xの標準ブラウザSafariです。

左がIEで右がSafari for Windows(Windows版)になります。

違いは一番上部にあるオリジナルの画像が左にずれて(崩れて)しまっている点。

Safariで閲覧したときだけ画像がずれていることが分かります。

切ないです...

以下、どの部分の変更で改善したのか記述していきます。

 
世の中には大きく分けてどのようなウェブブラウザが存在しているのか...

Trident、IEコンポーネント系ウェブブラウザ
Internet Explorer、Lunascape、Sleipnir、Donut、ぶら。、KIKI、Maxthon など

WebKit系ウェブブラウザ
Safari、シイラ、Konqueror、OmniWeb、Swift、iCab、Google Chrome など

Gecko系のウェブブラウザ
Mozilla Firefox、Netscapeシリーズ、SeaMonkey、Sylera、 Epiphany、Camino、Flock など

以上のように大きく分けて3つのタイプのウェブブラウザがあります。

写真ではSafariを使用していたわけですからWebKit系ということになります。

これを見ている限りIEとSafariとFirefoxの3ブラウザをクリアしていたら大体大丈夫かな?

元々、オリジナルのCSS(スタイルシート)を使用していれば悩まないことです。

seesaaブログの方でテンプレートのCSSを自動で更新してくれるからです。

なので、通常のユーザーは知らない間に直っているし、普段からSafariやFirefoxを使用しな

いユーザーなら気がつきもしないことです。

さらに言えば、私が使用しているテンプレート、light pole(右サイドバー)を使っている方でオリ

ジナルのCSSを使用している方。

というようなちょっと限定された方に見られる不具合だったのです。

そのためか、seesaaカスタマイズ関連のサイトを見ていても答えにたどり着くことがなかなか

出来ませんでした。

オリジナルのCSSを使用するんだから、そこらへんもしっかり理解していないとダメですよね。

さて、今回どこを変更したら左に崩れる現象を改善できたのか...

*以下、素人が発見したやり方ですので、間違っている可能性があります。また、CSSを変更される場合は必ず保存してから変更するようにしてください。

まずは編集する画面までの行き方を書いておきます。

seesaaのブログ編集画面
マイブログ

デザイン

デザイン一覧

light pole(右サイドバー)

スタイルシート

そして、以下の部分を変更しました。

1.
h1 {
margin:0px;
margin-left:3px;
padding-top:10px;
padding-bottom:1px;
font-weight:bolder;
font-size:24px;
font-family:Verdana;
}



h1 {
margin:0px;
margin-left:10px;
padding-top:10px;
padding-bottom:1px;
font-weight:bolder;
font-size:24px;
font-family:Verdana;
}


2.
#banner{
margin:0px;
margin-bottom:0px;
margin-left:-6px;
padding-left:0px;
text-align:left;
height:235px;
width:770px;
background-image:url(http://背景画像URL);
background-position:top;
background-repeat: no-repeat;



#banner{
margin:0px;
margin-bottom:0px;
margin-left:-6px;
padding-left:0px;
text-align:left;
height:235px;

background-image:url(http://背景画像URL);
background-position:top;
background-repeat: no-repeat;
}


3.
.description {
margin-left:3px;
font-weight:bold;
padding:0px 10px 0px 0px;
color:#FFF;
}



.description {
margin-left:10px;
font-weight:bold;
padding:0px 10px 0px 0px;
color:#FFF;
}


以上の3箇所。

変更箇所を言葉で書き出しますと...

「h1」の部分の「margin-left:3px;」を「margin-left:10px;」に変更

そして、これが一番重要だったところ。

「#banner」の部分の「width:770px;」を削除

最後に...

「.description」の部分の「margin-left:3px;」を「margin-left:10px;」に変更

見て分かるかと思いますが、h1と.descriptionはフォント関連ですね。

ブログタイトルとブログの説明の部分です。

たったこれだけの変更を見つけるのに本当に長年かかってしまいました。

途中からはあきらめて挑戦すらしていなかったんですけどね(汗)

最近、ちょっときっかけがあったんです。

年末から今にかけて、急激に知人が増えました。

恐らく数十人からそのうち百人になりそうな勢いです。

何となくそういう方々と話していると意外にMacユーザーが多いことに気がつきます。

その際、やはり自分のサイトやブログを紹介しますね。

色々と更新しているのでぜひ見てみてください。

というような感じで...

でも、私はSafariやFirefoxで表示が崩れてしまうことを知っています。

何か...告知したいけど、胸を張れない感じがしたんですね。

おかしい表示のものを告知しづらいですよ...(涙)

それと...

最近、IEがbetaではありますがバージョンアップされました。

IE8になるのかな。

私も一応サイトを管理している人間ですし、新しいブラウザはすぐに試すようにしています。

早速、インストールして試してみたのですが...

新しく互換表示設定という機能が追加されたようなのです。

詳しいことはまた他のサイトを見ていただくとして...。

最悪、IEですらまともにブログが表示されなくなってしまう自体を意識してしまったんです。

これは一大事ですよ...

しかも、この互換表示設定はデフォルトでSafariやFirefox系の表示なんですもの。

あまり詳しくない人が使ったら間違いなくその設定はいじくりません。

元々のように設定をし直すようなことは中々しないでしょうに...。

というような感じで、いよいよヤバイなぁということになってしまったんです。

正直な話し、CSSの知識が無い私はその不具合をテンプレートのせいにしていました。

このテンプレートを使用すると必ずそうなると思っていました。

私はこのブログの他にも更新はしていませんが、いくつかのブログを取得しています。

たまたま、本当にたまたまseesaaの別ドメインのブログで試してみたんです。

お分かりかと思いますが、別ドメインのブログは本当にデフォルト。

CSSはおろか、HTMLすらいじっていません。

そんなブログで同じテンプレートを使用したところ...

SafariやFirefoxでしっかり表示されてるではありませんか!Σ( ̄ロ ̄lll)

オリジナルにすると自動更新されず、置いて行かれることは前々から承知していました。

ですが、さすがにショックですよね(汗)

ということで、2つのCSSの違いを見ながらの作業。

こうやって改めて見てみると様々なCSSが追加されていることに気がつきます。

もちろん、告知などはありませんからこうやって見てみないと気がつかないことです。

一つ一つ、今すぐに必要な記述かを確かめながらやっていきました。

抜けていても不具合にまでは発展しない部分については追加はしませんでした。

主にtag関連が増えていましたね。

私は基本、tagの機能は使用していないので無視しちゃいました。

というような感じで長々と書いてしまいましたが...

結局、結構長い時間をかけてしまいました。

まぁでもかけたかいはありました。

本当に気持ちがスッキリしました。

同じようなことで悩んでいる方っていらっしゃらないのかなぁ?

そんな方々のコメントを期待しつつ...

これで、ブログに関してはほぼどのブラウザで見てもまともに表示されますかね!?

本家のサイトの方はてんでバラバラ...

レイアウトが若干崩れてしまう感じです。

これに関しては...

また追々ですね(汗)

ちょっとみっともないですが、閲覧者さまには我慢していただくということで。

とにもかくにも...今日は、ゆっくり寝ようと思います。

FREQUENCE.(橋詰隆志)

この記事へのコメント
ブラウザの違いによって、表示が変わってしまうのって
サイト作成者にとっては、悲しいですよねぇ。(つwT)

Windowsユーザーが多いから、I.E.メインにサイトを作ると、
Macユーザーには見れない物になってしまったり、
レイアウトが崩れて、アイコンやボタンが隠れてしまったり。。。

ほんの数箇所のタグを変えるだけで、直ったりするのに、
そのタグを見つけ出すのに、長い時間が掛かりますよねぇ。

思い通りのデザインに仕上がって良かったですね♪(≧∇≦)
Posted by AQUA at 2010年02月18日 12:03
AQUAさん>
悲しいです...(涙)
私は基本、IE系のブラウザでしかブラウズしないため、ついSafari系のブラウザをないがしろにしてしまうことが多々あります...。
原因が特徴的なものだったりすと、ネットで情報を探すことも難しくなり、直すのに時間がかかってしまいますよね...。
本当にやる気を出さないとなかなか動けません。
ちなみに私のサイトの方は未だにSafariでは正常に表示されません。
今、Flashの導入を考えているのですが、それでひとまず解決しそうな感じです。
ただ、今度はFlashが上手く設置できなかったり、自分で作るのがものすごく面倒くさかったりとなかなか前へ進んでいないのが現状です。(涙)
ブログに関してはとりあえずはこれでひと段落。
もう何年もレイアウトは変えてません(涙)
とりあえずは思い通りに仕上がってホッとしています(y^^y)
Posted by taka(橋詰隆志) at 2010年02月19日 13:41
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]


-コメント投稿に関しての注意事項-
*ご記入していただいた情報はメールアドレス以外全てウェブ(当ブログ)上に表示されます。
*記入内容は直後に反映(表示)されない場合がありますが、必ず反映されますのでご安心ください。

この記事へのトラックバック
このページの先頭へ
新規ブログへの移行と当ブログ更新休止のお知らせ
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。