「北アルプス山麓写真館 / 自然風景壁紙館」へ戻る

« SEO対策って知ってます〜? | メイン | Macのブラウザで正常に見せるのは »

2006年02月05日

リニューアルアップして見たものの・・・

P1250460s.jpg
北安曇池田町北部へ来ている白鳥
後ろの北アルプスは、左から北葛岳、針ノ木岳、蓮華岳

トップページのリニューアルアップが済んでやれひと安心としたのは、ほんの少しであった・・・。
ページが重い・・・。完全に開くまでちょっと時間がかかり過ぎるのだ。
フラッシュを使っているので多少重くなる事は、覚悟していたがこれ程とは思わなかった。

作業中は、My PCの中にフラッシュがあったので気にする程の重さは感じなかったがサーバへアップするとやはり重過ぎる。
原因としては、ページのレイアウトにテーブルタグを使っている為テーブル内のすべてのデータが読み込まれるまでページが開かないようだ・・・。
改善するには、大きなテーブルを細切れに分割し遅い部分は、遅くてもかまわないので軽い所から先に表示させれば待つストレスがなくなるらしい。

セルが重ね餅状態になっている所は、大きなテーブルをちょん切りやすく簡単であるが左右2列になっている部分は、ただちょん切れば重ね餅となってしまうのでダメである。

そこでスタイルシート(CSSファイル)の登場となるわけである。
スタイルシート初心者の私でも理屈は、わかっている。(理屈だけしかわからんのだ・・・。)

間違っているかも知れないがと断ってから書くが
まずテーブルをDIVタグに変更しIDかクラスを付ける。<div id="hogehoge">・・・・・・・・・</div>か
<div class="hogehoge">・・・・・・・・・・・・</div>とHTMLを区切る。
ここまでは、適当にhogehogeの名前を他とバッチングしないように付けるだけであるから簡単!

これからCSSファイルへの書き込みとなるがここからが問題となる。
例えば左側の列のIDをmenu、右の列のIDをmainとした場合

左列は、
div#menu {
width: ○○%;    ○○は、%指定かpix、emなどの単位指定
float: left;      左列がleftである事は理解できるが
}

右列は、
div#main {
width: ○○%;    ○○は、%指定かpix、emなどの単位指定
float: left;      右列もleftである事は不思議?とにかく考えずにleftなのだ。
}

とするだけで2列になるらしいのだが全体幅を決め左右を概略の%で決める場合は、これで行けるがきっちりとpixで割り付けるとむずかしくなってここから先に???マークがいっぱい付くのだ。

頭がそろそろグジャッて来たので今夜は、ここまで・・・。
後日つづきを書けるように理解できたらまた書くことにするが・・・?
オ(^o^*)ヤ(*^O^)ス(*^^*)ミー(*^-^)ノフリフリ

投稿者 kitaalps36 : 2006年02月05日 00:37

コメント

♪ドーーモ\(∩_∩ ) ( ∩_∩)/ ドーーモ♪
トップページは、シックな色合いへ変更しました。
実際のページは、前も今も56kbだから同じですがフラッシュが重いから開きが遅いようです。
テーブルタグのデザインからDIVタグのデザインへもう少しで移行できそうです。完成したらフラッシュだけ遅く他が早く出る事を期待してるのですが・・・
さてどうなるやらです。

写真の白鳥は、今期はじめて飛来した5丁目の田んぼです。すぐ近くに家があり中鵜よりローケーションが良くないけど山が近いから晴れた日なら北アルプスをバックに飛ぶ白鳥を狙えるよ。

ブログは、あまり見る人がいないようなので時々コメントしてくれると張り合いになります。

投稿者 kitaalps36 : 2006年02月05日 23:16

こんばんわ。
リニューアルしてぐっとシックになったね〜
ブログのコーナーも出来て、時々寄らせてもらいます。
トップページが開くのが遅い気がしたのは当方の
ADSL回線の影響かとも思いましたが・・・
以前のものとそんなに違いは無いようにも思いますが。
フラッシュの湖面の文様、スミナガシのようで面白かったね。
上の写真、寒そうだけどいい天気・中鵜とは場所が違うようだね・・・

投稿者 UCHIYAMA : 2006年02月05日 22:34