livedoor
アフィリエイトは儲かんないってば2005年11月26日21:33
Firefoxと、インターネットエクスプローラー（ＩＥ）の表示の差は、ある程度あるとわかっているつもりでしたが、まさかここまでとは思っていませんでした。テンプレートを選んで、それをカスタマイズしていく場合、最初のテンプレートがFirefoxとＩＥでそんなに大きな差が無ければ、少々カスタマイズしても大きな差となることはあまりありません。
ライブドアブログに「ラクダさん」というテンプレートがあるんですが、このテンプレートの本文のカラムを大きくしたい、という人がいたので、簡単だろうと思って挑戦しました。
これが、FirefoxとＩＥの表示の差に苦しむ、Firefoxラクダ地獄の始まりでした。
まず、ライブドアブログをこの「ラクダさんテンプレート」に変更し、全ページ再構築。
なるほど、2カラムで左サイドバーの普通な感じのテンプレートですね。ラクダさんのイラストがかわいい。ほのぼのとしたテンプレートです。
一応これをFirefoxで見てみます。
・・・いきなり本文のカラムの右端が、ラクダの尻から出とるではないですか！うーん、こまったなあ。
ＩＥだけ表示がまともになれば良いんなら簡単なんだけど・・・
Firefoxの表示がおかしい事に気づいてしまっては、見過ごすわけにも行きません。
しょうがないので、CSSをいじってなんとかＩＥでもFirefoxでも表示が崩れないようにCSSをいじってみました。
なんとか完成。ふう。てこずったけど、できた。
そう思ってやり方をまとめていたのですが、後日やってみると・・・あれ？できない！？
Firefoxで表示が大崩れです。おかしい。まとめる時にコピペをミスったかな？
と、もう一度やり直そうと思ったのですが、ここで重大なことに気づいてしまいました。
このテンプレート、個別記事やらカテゴリーページに <div id="ｃｏｎｔｅｎｔ"> が無い！！
<div id="ｃｏｎｔｅｎｔ">は、本文のカラムを囲む大枠の部品です。
いてててて・・・私が作ったCSSは、思いっきり <div id="ｃｏｎｔｅｎｔ"> を使っているよ・・・。
どうもCSSだけでは無理みたい。
HTMLもいじらないとできそうにありません・・・痛い。
それはそうと、どうしてこんなに表示がずれているんだ？
しょうがないので、CSSの各パーツにbackground:#FFCC99;などと入力し、色分けしてみました。
こちらは部品を色分けした、ＩＥの表示。
ラクダの尻のラインに本文として表示される.blogbodyが収まっています。
こちらがFirefoxでの表示。
ラクダの尻のラインを本文として表示される.blogbodyが越えちゃってます。
うーん、困った。
結局、ＩＥとFirefoxの差がどこから来ているのかわからない。
しょうがないので、CSSをちょっといじっては再構築、もちょっといじっては再構築。
と、再構築を繰り返しました。
各部品をちょうど良い位置に納めるためには、CSSで各パーツにmarginやらpaddingを設定しパーツとパーツの間にちょうど良い余白を作ってやれば良いわけです。
あるパーツがありますと、その外側の余白がmargin。内側の余白がpaddingみたいです。
ですが、いくらいろんなパーツにmarginやpaddingを設定したり、部品の大きさを変えたりしてみても、ＩＥとFirefoxで、これでもかっ！！というほどmarginやpaddingの解釈が違います。
再構築を繰り返しても繰り返しても、その差は埋まりません。まさにラクダ地獄。
・・・とうとうブチ切れました。
・・・が、ここで挫折してもなあ。
一旦全てのmarginとpaddingを消して、CSSをみなおしてみました。
.blogbodyを包んでいる.blogが#contentよりある程度小さくて、左によってくれれば良いんだけど。言うのは簡単ですが、寄ってくれません。
しょうがないので、.blogと#contensの大きさをほとんど一緒にして、この状態で#contensにpaddingを入れたらどうなるだろう？と試してみました。
.blogが縮んでしまうのか？それとも#contensが広がるのか？
すると、FirefoxでもＩＥでも、指定したpaddingを保ったまま、#contensが広がってくれました！
・・・（￣ー￣）ﾆﾔﾘ。
こうなると、あとは微調節していくだけです。
再構築をもう少し重ねて、ようやくFirefoxでもＩＥでもずれない「ラクダさん」テンプレートが完成し、本文カラムも広げることができました・・・疲れた。
少々まだ難が残っているのは残っているのですが、私の力ではこれくらいが精一杯。
結局のところ、FirefoxとＩＥの表示の差に困ったら、パーツの大きさをほとんど同じにして、外側のパーツのpaddingで中のパーツの位置を指定すると、FirefoxとＩＥで表示の差が少ない、という結論に達しました。
これが果たして、スタンダードなやり方かどうかは別として、なんとかずれない表示はできるみたいです。
marginやpaddingは極力使わない方がいいな、と思いました。
たぶんHTMLで、tableタグを組んで、パーツをそこにぶち込んでいくのが一番確実にずれないと思います。
全ページ再構築回数、50回以上。
自分、お疲れさまでした。
でもたぶん、この記事読んでも、ほとんどの人が面白くもなく、役に立たないだろうなあ・・・orz。
簡潔にまとめると、まあ、こういうこともあるので、一応Firefoxでの表示もお確かめください、というお話でした（笑）。
追記：
ライブドアブログでどうしてこんなに、IEとFirefoxの表示の差がでるのか？
コメントで指摘でご指摘をいただき、その理由が判明しました。
その記事はこちら→IEとFirefoxの表示の差
以下、ラクダさんテンプレートずれない（はず）バージョンのやり方です。
−−−−−−−−−−−−−−−−−−−−−−−
■ラクダさんテンプレートのカスタマイズ■
（CSSとHTMLのバックアップをしてからやってください。）
１．個別記事ページの<div class="blog">の上に、<div id="content">を追加。
<div id="content">
<div class="blog">
２．個別記事ページの<div id="footer"></div>の上に</div>を追加。
追加したら、個別記事のHTMLを保存。
</div>
<div id="footer"></div>
３．以上をカテゴリアーカイブ、月別ページでもやります。
４．CSSをオリジナル→カスタマイズ後に書き換え。
■オリジナル■
#content{
width:520px;
float:right;
padding:0;
}
#links{
width:170px;
float:right;
padding-bottom:40px;
margin-top:55px;
}
.blog{
float:right;
width:445px;
margin-right:22px;
padding-right:22px;
margin-bottom:100px;
}
.date{
color:#fff;
font-size:small;
font-weight:bold;
text-align:left;
margin-bottom:5px;
margin-top:50px;
}
.title{
color:#630;
font-size:12px;
font-weight:bold;
text-align:left;
}
.blogbody{
padding:10px 15px 10px 10px;
line-height:130%;
text-align:left;
background:#fff;
width:100%;
}
.main{
font-size:12px;
margin:18px 0 30px 40px;
}
■カスタマイズ後■
#content{
width:485px;
float:right;
margin:30px 0px 0px 0px;
padding:0px 36px 0px 5px;
}
#links{
width:170px;
float:right;
padding-bottom:40px;
margin-top:55px;
}
.blog{
float:right;
width:480px;
}
.date{
color:#fff;
font-size:14px;
font-weight:bold;
text-align:left;
margin-bottom:5px;
margin-top:40px;
}
.title{
color:#630;
font-size:14px;
font-weight:bold;
text-align:left;
}
.blogbody{
line-height:130%;
text-align:left;
background:#FFFFFF;
padding:5px 0px 0px 5px;
}
.main{
background:#FFFFFF;
font-size:12px;
margin:18px 0 30px 10px;
}
変更したら、CSSを保存して全ページ再構築。
たぶんいける、はず。いけなかったらごめんなさい。
この記事へのコメント
daddyscar
2005年11月27日 01:42 |
IEとFirefox（NN）の表示の差ですが、こちらのページが参考になるかと。
http://www.fromdfj.net/html/border2.html 細かい部分は、僕もまだ良くわかってないのですが、「ボックスモデルハック」というヤツで、最終的には、このページの下にある * { box-sizing : border-box} * { -moz-box-sizing : border-box} という指定をCSSにブチ込んでやると、それだけで、キチンと表示されるようです。 試しに捨てアドで作ってみたページ。 http://blog.livedoor.jp/poioq/ |
カンパネルラ
2005年11月27日 02:26 |
私もブログのスタイルシート・HTMLには苦労しています。
私の場合はMovable Typeを使用しているので、トップ、カテゴリーページ、個別ページ、全て私が1から作成したものなのでそれぞれのスタイルシートの意味を理解しているものの、膨大な量になるためその管理に四苦八苦。 JavaScriptもCSSもIEとFirefoxでそれほど差が無くなってきましたが、それでもいくつかの解釈の違いは頭を悩ませます。 私の場合は、再構築に時間がかかる（Movable Typeだと特に）ので、CSSファイルとどれでもいいから個別ページをローカルに保存してある程度完成がちかずいたら、サーバ上で再構築をしています。 |
|
カンパネルラ
2005年11月27日 02:51 |
http://sowhat.or.tp/fsearch.html
まだ実験段階ですが、こんなのを作ってみました。 アマゾンの個々の商品を1ページずつ紹介しています。 今の段階で6,000ページぐらいあるんじゃないでしょうか。（(^ ^;ゝ作った本人が把握していません・・・） 最終的には1万ページ程度になると思いますが、単に個々のページを作るだけでなく、検索機能も付けようかと。 各カテゴリーはアマゾンの売れ筋順に並んでいますが、電化製品に関しては安い順に並べ替えることもできます。 アマゾンのアソシエイトの規則として、値段を表記する場合は1時間以内のデータでないといけないらしいので、アマゾンのデータベースを使用しています。 |
まりたま
2005年11月28日 09:27 |
afiliate様おはようです〜
この記事を読んで思ったのですが、afiliate様は人に何かを 教えるのが上手だなと思いました。 なんだかわかりにくい事柄を図を使ってわかりやすく 説明できてると思います。 いつも自分のパソコンで自サイトを見てるので、他のパソコンから どう見えるのかはあまり考えませんよね・・・ たまに違うパソコンで自サイトを見てみようかと思います。 |
|
afiliate
2005年11月28日 09:45
|
どおも〜daddyscarさま。はじめまして。レス遅くなり申し訳ございません。コメントありがとうございます。
つまらない記事に、とてつもなく核心を突いたすばらしいコメント。これこそブログをやってて良かったな、と思う瞬間です。本当にありがとうございます。 リンク先を拝見したことはもちろん、おつくりいただいたサイトも拝見させていただきました。そして、自分でも試してみました。これはすごいですね！。 もう少しこれに関しては、自分でも検証させていただいて、記事にしたいと思います。記事を書く前にはググろう、と自分で言っておきながら、この記事に出会えなかったことを恥ずかしく思いつつ、教えていただかなかったら、このまま痛い知識のままだったかと思うとぞっとします（笑）。 本当にありがとうございました。こういうツッコミ大変助かります。 またお願いします〜(●＾∇＾●)／ |
|
afiliate
2005年11月28日 09:48
|
どおも〜カンパネルラさま。
うわ、あのサイト全部一から自作ですか！。すげー(汗)。 確かに半端な知識じゃできないですね。 MovableTypeもページが増えてくると再構築時間かかるらしいですね。 数千ページ、数万ページとなれば、どのツールでもそうだとは思いますが・・・。 しかもサーバー上で再構築。いろいろ技があるんですねえ・・・。 |
|
afiliate
2005年11月28日 09:52
|
カンパネルラさま。
今の段階で６０００ページ！。最終的に１万ページ！ ・・・（笑）。 いや〜もう言葉がありませんね（笑）。 いろいろサイトや教えていただいたツールを研究して私も少しは追いつきたい・・・（笑）。 どの辺の知識を仕入れればいいのかさっぱりわかりませんが、ＡＷＳあたりまずは勉強してみます。 カンパネルラさまの背中が果てしなく遠いです（笑）。 |
|
afiliate
2005年11月28日 09:57
|
どおも〜まりたまさま。おはようございます。
いや〜そういっていただけるとうれしいです。 ですが、まだまだかなとも思うんです。どうしても記事が長いわりに伝え切れてない部分って多い気がします。 文章が稚拙な分、画像を使って少しでもわかりやすいものを目指しているんですが、なかなか難しいです。 それでもまりたまさまのようにおっしゃっていただけると、またがんばろう！って思います。少しでも良い情報をわかりやすくお伝えできるよう、努力していきます〜。 やる気でました！ありがとうございました〜(●＾∇＾●)／。 |
|
kuzuyaro
2005年11月30日 02:29
|
自分のブログでトラブル発生して、この記事参考にさせてもらいました。
ほんと助かりました。ありがとう。 あと、TBさせてもらいました。 よかったら、afiliateさんもTBしてください。 |
|
afiliate
2005年11月30日 12:17
|
どおも〜kuzuyaroさま。
あら！お役に立てましたか！ 長すぎるばかりであまりお役にたてないかと思ってたのですが、うれしいです♪ TBどおもです。 お言葉に甘えて送っときますね。 |
|
kuzuyaro
2005年11月30日 18:57
|
TBありがとう！
また参考にさせてもらう事があったら、よろしくです。 |
|
afiliate
2005年12月01日 09:52
|
どおも〜kuzuyaroさま。
いえいえ〜どういたしまして。というかこちらこそ御紹介いただきありがとうございました。 参考になれるようがんばります。 またお暇なときにでもいらしてください〜(●＾∇＾●)／ |
この記事へのトラックバック
1. １１月２９日 曇り 時々 晴れ [ kuzuyaro ] 2005年11月30日 02:29
で、今度は個別記事や月別・カテ別を表示した時、サイドが落ちるのを直したい。
が、わかんねぇ。
そういえば、「アフィリエイトは儲かんないってば」ってサイトに、それ関係の事が書かれていたのを思い出す。
