![]() ここんトコ…
っつ〜か、結構前からなんですが… 『JUGEM』が重い。。。 とにかく記事の全文表示が… (多分『Similarity Search』や『Amazon Search』以外にも原因がありそうです。。。) このテンプレートですが、ご存知(?)の通りTABLEタグでの配置を施してありました。。 TABLEは、そのTABLE内の全体を読み込んでからレイアウトするんで、リストや記事の一部に読み込みが遅い部分あると (『Similarity Search』『Amazon Search』『Blog People』『キヌガサ』なんかかな?) 表示されるのに時間がかかるらしいです。。 ※正確には全て表示されるまでの時間は同じですけど… そこでCSSとDIVを使った配置の登場となるわけですが… っと、一応CSSで配置する事のメリットとしては… ・読み込んだ順に表示されるんで、見た目的に早く感じる。。 ・後でレイアウト変更する際TABLEタグでの配置より移動させ易い。。 って感じでしょうか? 一応、ひいろんが施したやり方書いておきますんで。。 もしも、テーブル配置からCSS配置へ… なんて考えてる方は参考に。。。。 さて、とりあえず今までのテーブル配置を示してみます。。
()内の数字はそれぞれの幅を示します。。 構成としては 【上】タイトル 【中】左右リストと記事 【下】copyright表示 と3つのテーブルになってます。 今回は、一番重い【中】テーブルをCSSで配置する事にします。。 最初に【中】テーブルのHTMLソースを示しときます。。 <table width="900" border="0" cellspacing="0" cellpadding="0"> ※解り易く簡素に書いてあります… まずはCSS部に下のように追加します。 #l_site { 【#l_site】は 左リスト 【#c_site】は 記事部分 【#r_site】は 右リスト に、それぞれ相応してます。。 尚、各数値についてはリストや記事の幅によって異なりますんで、利用される場合はご注意を… 次に上に書いたテーブルを下記の様に書き直します。。 <div id="l_site"> これでCSSによる配置完了です☆ 簡単に書きましたが、基本的考え方は解ってもらえるかと…? ちなみにこのままですと全体的に左揃いになるんで、真ん中揃いにしようと 『スタイルシート講座』読んで挑戦したんですが… body { ど〜やらIE5.5なら無事に表示されましたが、IE6.0で確認したら… 全て真ん中揃いになってしまいました…汗 いや…直す方法わからなくもないんですけど…ね(^^; 面倒&IE6.0自宅なんで… 無事に設置出来たら追記しますです。。。 | |||||||||
![]() |