双頭の CSS
2006年02月17日 AQ
久々のカスタマイズネタです。これを楽しみにしておられる方も、多いのじゃないでしょうか (^^)AQ がブログを再開するにあたり、前のブログ以上にパワーアップさせなきゃ！ という気持ちで PC に向かいました。内容の充実はもとより （ これが一番大事ですからね
） 、デザイン （ オリジナリティー・配色・サプライズ・キャラクター・サイズなど ）、ユーザビリティー （ 使い勝手・使いやすさ・重さなど ）、そして SEO
（ 検索エンジン最適化 ） です。
では、” 見る側の環境の違い ” とはどういうことでしょうか
様々な PC 機種があるなか、大きく分けて Windows 系、Mac 系の2種。そして、それぞれの年代に応じてインストールされる OS 。さらに、それらに使用される閲覧用の色々なブラウザー。回線スピード。これらの組み合わせは、非常に多くの様々な環境をもたらします。すべての環境に対して対応する事は無理ですが、ある程度の範囲をカバーする事は可能です。環境の違いによる文字の大きさの変化をカバーするには、フォントの指定を %、em、xx-small、x-small、small などの相対指定から、px、pt などの絶対指定に変えることにより、ある程度対応する事ができます。しかし問題なのは、各ブラウザーによる ” 縦横の解釈の違い ” の部分です。
これによって、Internet Explorer では中心位置に綺麗にはまっているのに、Netscape や Firefox では、左に片寄ってしまう。かたや文字の上下空間のバランスが非常に良いのに、かたや変な空間ができてしまって、妙に間延びしたように見える
結局、どちらにも相いれるようなスタイルシートの指定で、妥協してしまう ・・・ 
なんか良い方法はないのかなぁ (T_T) せめて、Internet Explorer にはそれ専用の、Netscape や Firefox にもそれ専用の対応したスタイルシートが適応できればなぁぁぁあ ・・・ ん？ そうか、その方法があったんや！ ってことで （ 前置き長っ！ すみません ） やっと本題に入ります。
簡単な話、ブログのページの中で、見に来られた方のブラウザーを自動的に判断して、『 あんたのブラウザーは IE だから、こっちね 』、『 あんたは Firefox だから、あっちのスタイルシートを使ってね (^^) 』 というカスタマイズです。
まず、現在使用しているスタイルシート （ CSS ） を、別の名前でローカルの PC に保存し直します。 ライブドアでしたら、『 カスタマイズ / 管理 』 ＞ 『 デザインの設定 』 ＞ 『 カスタマイズ 』 のテンプレート画面を選択すると、スタイルシートがでてきます。それをメモ帳かなんかにコピーペーストして、違う名前を付けて保存すれば良いのです。最後の拡張子は 「 .css 」 （ ドットシーエスエス ） です。
または直接ブラウザーにアドレスを打ち込んで、ダウンロードしてもかまいません。ライブドアの CSS ファイルの名前は、必ず 「 site.css 」 ですから、ブラウザーにあなたのブログのアドレス （ URL ） を打ち込んで、その後に 「 /site.css 」 と追記すればローカルに落とせます。そのファイルの名前を任意の名前に変えて、保存して下さい。
例 （ 1 ） ： http://blog.livedoor.jp/ （ ID ） /site.css
例 （ 2 ） ： http:// （ ID ）.livedoor.biz/site.css
上記でダウンロードした CSS ファイルの名前を変える。
AQのところでは、「 nfchange.css 」 と付けて保存しました。
例 （ 2 ） ： http:// （ ID ）.livedoor.biz/site.css
上記でダウンロードした CSS ファイルの名前を変える。
AQのところでは、「 nfchange.css 」 と付けて保存しました。
次に、この新たに保存したファイルを、どこかのサーバーにアップしなければなりません。ライブドア PRO でしたらそのまま、ライブドアのサーバーへ。無料版の方は、プロバイダーなどが無料で貸してくれているサーバーへアップして下さい。いずれにしても FTP ソフトを使用して、直接アップする必要があります。
次に HTML を編集します。トッページ・個別記事・カテゴリー別・月別、すべての HTML に編集が必要です。
ライブドアでしたら、『 カスタマイズ / 管理 』 ＞ 『 デザインの設定 』 ＞ 『 カスタマイズ 』 のテンプレート画面を選択すると、それぞれの HTML がでてきます。その中の・・・
<head> 〜 </head> の間に記述されている、
<link rel="stylesheet" href="<$CSSUrl$>" type="text/css" />
の一行を削除します。
次に、<head> 〜 </head> の間に、
<script type="text/javascript">
var ie = " （ 初めからある、基本 CSS ファイル の URL ） ";
var netscape = " （ アップロードした CSS ファイルの URL ） ";
var cssfile;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer")
{cssfile = ie;}
else
{cssfile = netscape;}
document.write('<link href="'+ cssfile +'" type="text/css" rel="stylesheet" />');
</script>
<noscript>
<link rel="stylesheet" type="text/css" href=" （ 初めからある、基本 CSS ファイル の URL ） " />
</noscript>
var ie = " （ 初めからある、基本 CSS ファイル の URL ） ";
var netscape = " （ アップロードした CSS ファイルの URL ） ";
var cssfile;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer")
{cssfile = ie;}
else
{cssfile = netscape;}
document.write('<link href="'+ cssfile +'" type="text/css" rel="stylesheet" />');
</script>
<noscript>
<link rel="stylesheet" type="text/css" href=" （ 初めからある、基本 CSS ファイル の URL ） " />
</noscript>
を、新たに追記します。
青字 と 赤字 の部分に、任意の URL を記述して下さい。
あとはそれぞれの HTML を保存して、管理画面の左側 『 ブログに設定を反映 （ 再構築 ） 』 をクリックして、『 全てのページ 』 を再構築して下さい。ただ、いきなりすべての HTML を構築するのじゃなくて、まずはトップページだけカスタマイズして、スクリプトが正しく動作しているか確かめてから、残りのページに上記のスクリプトの記述を、追加した方が良いでしょう。
あれ？ そうしたけど、全然 Netscape や Firefox に変化は無いけど
そりゃそうですよ！ まだ Netscape や Firefox 用のスタイルシート （ CSS ） の中身を変えていないじゃないですか！ これからはあなたのブログのデザインに応じた作業を、コツコツと繰り返していかなければなりません。例えば基本の CSS のフォントサイズを 10px にした場合は、Netscape や Firefox 用の CSS では 11px に変えるとか ・・・。Internet Explorer では大丈夫だけど、Netscape や Firefox では左右のカラムが落ちてしまう時などは、カラムの幅や記事投稿部分の幅を小さくするとか ・・・。
細かく調整すればするほど、色々な環境で綺麗にストレス無く、閲覧してもらえます。少し変えてはアップする ・・・ 確認。また少し変えてはアップする ・・・ 確認。これの繰り返しです。
基本 CSS ファイル は、完全に Windows Internet Explorer に焦点を合わせて調整して下さい。新たに作成してアップした CSS ファイル は、Windows Internet Explorer 以外のブラウザー （ Mac に使用されるブラウザーも、すべて含む ） に適応します。（ 80％ ぐらいかな？ ）
頑張って下さい！ ・・・ ん？ この記事読むだけでダウン (>_<) ・・・ それは言えてるかも
1. Posted by teru teru
2006年02月17日 11:53
凄い！[叫び]
ブラウザーに優しいblogやな[フリフリ]
勉強になりました[晴れ]
ブラウザーに優しいblogやな[フリフリ]
勉強になりました[晴れ]
2. Posted by
matsudax
2006年02月17日 12:42
およよ、私の記事よりものすごくわかりやすい記事です[アハ]
参考にしていただきありがとうございますですm(__)m
参考にしていただきありがとうございますですm(__)m
3. Posted by AQ
2006年02月17日 14:46
＞ teruteru (^^)
カッコいいブログ。綺麗なブログ。為になるブログ。
どんなブログでも自分の好きなようにすれば良いけど、
その基本には、やっぱり優しさがなきゃね [ハート]
カッコいいブログ。綺麗なブログ。為になるブログ。
どんなブログでも自分の好きなようにすれば良いけど、
その基本には、やっぱり優しさがなきゃね [ハート]
4. Posted by AQ
2006年02月17日 14:52
＞ matsudax さん (^^)
おお〜 [叫び]
ネタ元さま直々のコメントだ〜 [汗汗]
ホントに今回は、ありがとうございました。
記事を上げたりする度に、スタイルシートを
その都度、2枚ともチェックしなければならない
手間があるものの、それが苦にならないほど、
どのブラウザーにも同じように表示されています。
感謝しています。m(_ _)m
おお〜 [叫び]
ネタ元さま直々のコメントだ〜 [汗汗]
ホントに今回は、ありがとうございました。
記事を上げたりする度に、スタイルシートを
その都度、2枚ともチェックしなければならない
手間があるものの、それが苦にならないほど、
どのブラウザーにも同じように表示されています。
感謝しています。m(_ _)m
5. Posted by teru teru
2006年02月17日 17:38
さすがAQ言う事が違うなぁ[フリフリ]
6. Posted by AQ
2006年02月17日 19:54
＞ teruteru (^^)
teruteru も AQ も、普段お仕事でやってる事。
相手を思いやる気持ちがなきゃ、お客さん来ないもんね [アイタ]
teruteru も AQ も、普段お仕事でやってる事。
相手を思いやる気持ちがなきゃ、お客さん来ないもんね [アイタ]
7. Posted by teru teru
2006年02月17日 21:11
うんうん[フリフリ]
おっしゃる通り[チュッ]
おっしゃる通り[チュッ]
8. Posted by
ひよこ画伯やす
2006年04月30日 00:08
AQさん はじめまして ひよこ画伯やす です。
Livedoorのナレッジ経由でブログ拝見させていただきました。
勉強になりました。有難うございます。
では、失礼します。
Livedoorのナレッジ経由でブログ拝見させていただきました。
勉強になりました。有難うございます。
では、失礼します。
9. Posted by AQ
2006年04月30日 00:20
＞ あら〜 そのフレーズはもしかして ・・・ (･･;)
＞ ひよこ画伯やす さん こんばんわ [音符]
いつもナレッジで拝見させて頂いております。
初めましてと言うのが変な感じですね。ｗｗ
そう言えばあまり回答が、かぶった事はないですね。
ひよこ画伯やす さんにとって、為になる事はあまり
書いていませんが、また遊びに来てくださいね。[ニコ]
＞ ひよこ画伯やす さん こんばんわ [音符]
いつもナレッジで拝見させて頂いております。
初めましてと言うのが変な感じですね。ｗｗ
そう言えばあまり回答が、かぶった事はないですね。
ひよこ画伯やす さんにとって、為になる事はあまり
書いていませんが、また遊びに来てくださいね。[ニコ]
![[BloMotion]ブログで記事を書いて報酬をゲット!!](http://blomotion.jp/img/blogBnr-invite.gif "[BloMotion]ブログで記事を書いて報酬をゲット!!")
