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」でも良いですが。また、年月日を使いたい場合はスタイルシートを変更してください。

「今日の一枚」の配置

はてなダイアリーにはフォトライフを使わずにダイアリーだけで画像登録できる「今日の一枚」という機能があるのですが、この機能は現在ではほとんど使われていないと思うので、対応しませんでした。一応 表示はされるんですが、かなりずれてしまいます。

(ページ右端にずれる)

ページ上部の前次リンク部分

はてなダイアリーは「<前の日 | 次の日>」などと前後の日記に移動できるリンクがページ上部と下部の二か所にあるのですが、上のリンクは非表示にしています。



これらの点は不具合ではなく、意図的な指定ですのでご了承ください。



*1:今回は既存の hatena2-lightblue をベースに制作しているのと、そもそもはてなダイアリーでは一律に base.css などが使われているため、ここでは「自分では使わない」というルールで。

*2:div.main / div.sidebarくらいは使っています