大幅にトップページを改装してみました。
まあ、見た目じゃ分からないと思うので解説してみます。
とりあえず、今回の改装の目的として
- メインスタイルをsimple-skyとして独立。一般に配布可能な形にする
- その結果として通常の２段組スタイルと１段組スタイルの変更を容易化
- むしろ自動化
- 印刷したときのスタイルの最適化
という４つのことをやってみました。
その結果として、CSSファイル１２個という恐ろしいことになってしまいました。構造ではさらに複雑です。さらにIE対策（おすすめスタイルシートではさらにCSS3未対応ブラウザ対策ということでFirefox等への対策も兼ねてます）ということで恐ろしいことになっております。
まあ、この変更の一番の効果はぱっと見誰もまねできないことかもしれませんね。する人いないでしょうけれども。
では、今回のスタイルシートで一番複雑な「おすすめ」スタイルシート。正式名称は「general-recommended」の解説をしておきます。
このファイルでは１０ファイルを使っていて、中には同じファイルを複数回読み込ませてるものもあります。
- おすすめスタイルシート：以下のスタイルをまとめ上げる為のスタイルシート
- デフォルトスタイルシート：ブラウザ間の表示の違いを統一するためのスタイルシート
- ２カラム（段組）用スタイルシート：CSS3未対応ブラウザ対策。CSS3未対応ブラウザはこれを読み込ませて２カラムで表示させます。
- IE対策スタイルシート：パソコンで見てる人以外（プリンタ印刷、テレビ、プロジェクタ等を使っている人）は、一度２カラム用スタイルシートを解除します。
- １/２カラム用スタイルシート：ここから、CSS３です。ウィンドウが851ピクセル以上のときは２カラム。850ピクセル以下の時は１カラムで表示します。今のところ新しいOperaしかこれを読み込むことはできません。
- カウンター用スタイル：カウンターに使うスタイル。他とは全く関係ないので独立してしまいました。
- シンプルスカイ：テーマスタイルです。このスタイルシートだけを変更すれば、デザインを崩さずにテーマだけを変えられます。
- ぺたんこ詳細スタイル：うちのサイトの細かい表示設定です。シンプルスカイは、どのサイトでも利用可能なのを集めたのでその他の余り物。
- プリントスタイル：印刷するときにのみ使用するスタイル。印刷する際にのみ読み込みます。
- シンプルスカイ-プリント：シンプルスカイをプリント用に最適化したもの。印刷する際にのみ読み込みます。
そんな努力の甲斐あって、Operaを使うと非常に快適に閲覧することができるようになりました。最新版のOperaでPetanko.orgトップを開いてウィンドウの大きさを変えて言ってみてください。850ピクセルを切って見難くなった瞬間に１カラム構成に変わり、画面が広く使えます。Firefoxでは未対応ですが、２０１０年までには対応するでしょう。
ちなみにFirefoxや他のブラウザでも今は自動ではありませんが手動で切り替えることが有ります。ブラウザによりますが、「表示」の「スタイル」とか「スタイルシート」とか選ぶと、「１カラム」か「２カラム」かの選択が出てくると思います（ＩＥ７意外）。これで、自分の見やすいスタイルで見ることができます。
あと、印刷プレビューを押していただけると、左右の空白が完全になくなり、印刷に適したデザインになります（ＩＥ７意外）。あと、リンクの色も同じにして、リンクの後に（）でURLも記入されるようにしました（ＩＥ７意外）。
さらに、ナビゲーションだとか、ページ情報とか、紙の上では邪魔な内容とは関係ないものは全部削除されるようにしました（ＩＥ７意外）。
