dusk
久しぶりにこのダイアリーのデザインを変更しました。単に作るのも面白くないので、今回制作するに当たって自己ルールで設定したのが大きく2点。
- 画像を使わない
- IE6でもきちんと表示されるように
世間的にはそろそろIE6,7のシェアも下がってきたのでそろそろIE8以上を前提に作ろう!画像を使わなくても色々できるはず!……と当初は思ったのですが、仮にIE8だったとしても はてなダイアリーは互換モードなので関係ないでござるの巻 orz
そのため、
- ::afterとかでcontentプロパティを使わない(※っていうか使えない)
また
- CSSハックは使わない
- vendor prefixも使わない
ともしました*1。
全体的なレイアウトは1カラム
サイドバーがある2カラムにするのが面倒、ということも理由としては大きいのですが、1カラム & 太いフッタが好きなのでこの形態に。
装飾的な部分
IE6相当で、画像無しとなると border と background-color くらいでしか装飾に使える要素がないため、どういう風に構成するか?パズルのようで悩みました。
(Firefoxの3Dビューでページ構造を立体化)
CSSだけでやるとは言え、div要素を多用するのも安易ですし*2。
ページの要素をメモ帳に書き出し、あーでもないこーでもないとにらめっこしながら、これなら作れそうと考えてやってみたのが虹色の配色です。
日付部分の上部にある他、
Amazonの商品紹介時にも虹が現れるようになっています。
なお部分的な装飾は虹を模していますが、全体的なモチーフとしてはタイトルの「dusk」のままで
通常の日記部分は、薄暮の虹を示していて
プロフィールページ(/about)でさらに空が陰り
日記一覧ページ(/archive)では陽が沈む、という時間経過と黄昏を描きたかった、というのが今回のテーマですね。虹の部分はあくまで装飾のいち要素。
そしてこの「dusk」は公開デザインにも登録したので、利用は自由です。
公開デザイン「dusk」 - はてなダイアリー
[どうぞご利用ください。]
利用に当たっての注意点
この公開デザインを使うに当たって、いくつか問題点もあるのでそれの解説など。
日付部分の扱い
日付のH2要素では、文字間と行間をつめた設定になっています。そのため「2012年5月31日」などと、年月日といった漢字を使うと表示が崩れてしまいます。ですので、
「設定」から「記事の設定」で、日付の部分を編集するといいでしょう
%Y%m%d
個人的にはこの設定がいいかなと、「%Y-%m-%d」でも良いですが。また、年月日を使いたい場合はスタイルシートを変更してください。
「今日の一枚」の配置
はてなダイアリーにはフォトライフを使わずにダイアリーだけで画像登録できる「今日の一枚」という機能があるのですが、この機能は現在ではほとんど使われていないと思うので、対応しませんでした。一応 表示はされるんですが、かなりずれてしまいます。
(ページ右端にずれる)
ページ上部の前次リンク部分
はてなダイアリーは「<前の日 | 次の日>」などと前後の日記に移動できるリンクがページ上部と下部の二か所にあるのですが、上のリンクは非表示にしています。
これらの点は不具合ではなく、意図的な指定ですのでご了承ください。