トップページ改装しました〜

今週頭くらいからボチボチ修正を初め、この日記でも一回愚痴を書いた(笑)トップページの改装が、やっと何とか見るに耐えられるレベルになったので公開します。

まあ、以前にも書きましたが今回の改装の目的は腐ったHTMLを修正する事です。トップページを「nicky!」にして、更新が楽になったのはいいのですが、このCGI、デフォルトだと、Tableタグをレイアウトに使ってしまうのです

勿論、表でも無い所にTableタグを使うのはHTMLの文法としては間違っています。なので、先ずはTableタグを取り外す所から改装を始めました。レイアウトはスタイルシートで調整。この間の日記で書いた可変幅の段組は諦めて、今回は幅固定する事にしました。ブラウザの横幅が720ピクセル以下だと、左右スクロールバーが出るので注意(^^;)

え〜。毎回の事ですがスタイルシートでレイアウトしていくと、ブラウザ間での差異に悩まされるのですよね(^^;)今回も、どうしようも無いので(というか、私が分かって無いだけかも)妥協した部分があるのですが……。簡単に図に纏めてみました。


ブラウザ別比較


マージンとパディングの取り方がIEと他のブラウザで違うんですよ〜。多分IEの方がおかしいと思うのですが、閲覧者はIEIEコンポーネント使用ブラウザを含む)を使っている人が圧倒的に多いので、差異が出る部分はIEを基準に調整しております。

でも、もじら系ブラウザやOperaでも閲覧に特に問題は無いはず。無いように調整したのですが(汗)

HTMLを正しい意味合いでマーキングし直したので(但し、本文部分に改行(br)の嵐が……この事については後述)、スタイルシートをオフにしたり、閲覧側が自分の好きなユーザースタイルシートを使っても問題なく見られるはずです。

スタイルシートをオフにして表示

CSSオフ

◆ ユーザースタイルシート使用例

http://members.jcom.home.ne.jp/jintrick/Personal/usrstyle.html

(↑こちらのサイトで配布されているユーザースタイルシートを使用)


ユーザーCSS



……さて、そんなわけで、大筋では大体修正したものの、まだ直しきっていない部分があります(^^;)その最たるものがトップページ下部の過去ログ一覧がテーブルタグで囲っている所。ここは、CGIが自動で付け加える部分なので修正出来ませんでした。

う〜ん……月別にセルを組んだら何とか表と言えない事も無い……いや、やっぱり苦しいなぁ(^^;)まあ、仕方が無いのでここは妥協。

あと、日記本文部分の文章が段落タグ(p)で囲っていない&改行タグ(br)の乱用。これは、「nicky!」では、フォームに入力した文章の改行場所に自動でbrタグを挿入してpタグは挿入されない仕様の為。

自動タグ入力をオフにして、タグを手動入力するモードもあるのですが、それでは更新を楽にする為に「nicky!」を導入した意義が失われ仕舞う(タグを手動入力するなら、ちゃんとしたHTML編集ソフトを使ってアップした方が早い)ので、ここも妥協(^^;)あれは、文章に見せかけた長い詩だと思って、brの乱発は見逃して下さい……。

それと、前述のIEとその他のブラウザによるマージンとパディングの差によって出るレイアウトの乱れを修正する為に、所々意味のないbrタグが混ざっている所もご容赦を〜(^^;)


まあ、そんなわけで一応修正したものの、まだ変な部分が多いと思うので(^^;)直した方がいい部分、改良の余地がある部分等気が付かれた方がおられましたら、メールフォーム等から指摘していただけると嬉しいです。CSSとHTMLについてはソース参照……というか、他の方から指摘を受けやすいように、index.htmlにCSSを直接記入しております(^^;)。このまま問題が無いようでしたら、一週間後くらいを目処に、スタイルシートの部分を別ファイルにしようと思っております〜。