サイト管理: 2008年9月アーカイブ

大幅にトップページを改装してみました。

まあ、見た目じゃ分からないと思うので解説してみます。

とりあえず、今回の改装の目的として

• メインスタイルをsimple-skyとして独立。一般に配布可能な形にする
• その結果として通常の２段組スタイルと１段組スタイルの変更を容易化
• むしろ自動化
• 印刷したときのスタイルの最適化

という４つのことをやってみました。
その結果として、CSSファイル１２個という恐ろしいことになってしまいました。構造ではさらに複雑です。さらにIE対策（おすすめスタイルシートではさらにCSS3未対応ブラウザ対策ということでFirefox等への対策も兼ねてます）ということで恐ろしいことになっております。
まあ、この変更の一番の効果はぱっと見誰もまねできないことかもしれませんね。する人いないでしょうけれども。

では、今回のスタイルシートで一番複雑な「おすすめ」スタイルシート。正式名称は「general-recommended」の解説をしておきます。
このファイルでは１０ファイルを使っていて、中には同じファイルを複数回読み込ませてるものもあります。

1. おすすめスタイルシート：以下のスタイルをまとめ上げる為のスタイルシート
2. デフォルトスタイルシート：ブラウザ間の表示の違いを統一するためのスタイルシート
3. ２カラム（段組）用スタイルシート：CSS3未対応ブラウザ対策。CSS3未対応ブラウザはこれを読み込ませて２カラムで表示させます。
4. IE対策スタイルシート：パソコンで見てる人以外（プリンタ印刷、テレビ、プロジェクタ等を使っている人）は、一度２カラム用スタイルシートを解除します。
5. １/２カラム用スタイルシート：ここから、CSS３です。ウィンドウが851ピクセル以上のときは２カラム。850ピクセル以下の時は１カラムで表示します。今のところ新しいOperaしかこれを読み込むことはできません。
6. カウンター用スタイル：カウンターに使うスタイル。他とは全く関係ないので独立してしまいました。
7. シンプルスカイ：テーマスタイルです。このスタイルシートだけを変更すれば、デザインを崩さずにテーマだけを変えられます。
8. ぺたんこ詳細スタイル：うちのサイトの細かい表示設定です。シンプルスカイは、どのサイトでも利用可能なのを集めたのでその他の余り物。
9. プリントスタイル：印刷するときにのみ使用するスタイル。印刷する際にのみ読み込みます。
10. シンプルスカイ-プリント：シンプルスカイをプリント用に最適化したもの。印刷する際にのみ読み込みます。

そんな努力の甲斐あって、Operaを使うと非常に快適に閲覧することができるようになりました。最新版のOperaでPetanko.orgトップを開いてウィンドウの大きさを変えて言ってみてください。850ピクセルを切って見難くなった瞬間に１カラム構成に変わり、画面が広く使えます。Firefoxでは未対応ですが、２０１０年までには対応するでしょう。

ちなみにFirefoxや他のブラウザでも今は自動ではありませんが手動で切り替えることが有ります。ブラウザによりますが、「表示」の「スタイル」とか「スタイルシート」とか選ぶと、「１カラム」か「２カラム」かの選択が出てくると思います（ＩＥ７意外）。これで、自分の見やすいスタイルで見ることができます。

あと、印刷プレビューを押していただけると、左右の空白が完全になくなり、印刷に適したデザインになります（ＩＥ７意外）。あと、リンクの色も同じにして、リンクの後に（）でURLも記入されるようにしました（ＩＥ７意外）。
さらに、ナビゲーションだとか、ページ情報とか、紙の上では邪魔な内容とは関係ないものは全部削除されるようにしました（ＩＥ７意外）。

今日明日チャリの日、ホの昨日のデザインを請け負ってみました。
そんでもって、トップ絵中心のデザインにしたので、サンプルとしてローレンツの絵をプレゼントしてみました。

一応、初級編講座でこのくらいのデザインが出来るようにしようかな、と思い中......。

ところでこのローレンツ。実は大学の期末レポートに「ローレンツの似顔絵集」を出そうかという話で１，２分で描いたやつでした。アフォですね。しかし、まさかそのままギフトフォルダに入れられてしまうとは......。

まあ、何にしろ移転＆新装開店おめでとうございます。

このたびトップページを改装したんですが......またしてもＩＥですか。
ここまで僕に喧嘩売りますか。
そんなに僕が憎いですか。
Firefox、Opera、Safariは普通に見れてるのに、IE......
なんなんだお前......という事で調べてみた結果がこちら。
li要素の子孫にリスト要素があるとリストマークが上方にずれる
そうですか。マイクロソフトは2003年に見つかってるバグを未だに直さないんですか。
今までＩＥでもちゃんと見られるように配慮してサイト作ってきましたが。もう無理です。回避策も思いつきません。
というわけで、IEでは全く表示されない版のトップを作ってみました。これですっきり。
IEと他のブラウザで見比べて見ると愕然としますよ。
（このリンクはそのうち消されると思います。）
以下IEのダメな点。
・Firefox、Opera、SafariはHTML(+CSS)もXHTML（+CSS）も表示できるのに、IEはHTML(+CSS)しか表示できない。
・そのHTML（+CSS）でさえも正しく表示できない。

まあ、致命的な表示になったらあれですが、多少変なぐらいだからいいでしょう。IE8になったら多分直るとおもうし...