buried


公開デザイン「buried」 - はてなダイアリー
昨日の予告通り、公開デザインに登録しました。

コンセプト

主題としては分りやすいので、説明の必要はないかな。
制作のきっかけとしては、MY CHEMICAL ROMANCE の「Helena」PV を見たのが要因の一つです。

http://www.youtube.com/watch?v=yTTZKqyhIUQ
http://www.nicovideo.jp/watch/sm77471(こちらはニコニコ動画
で、当初は葬列、または棺を運ぶ場面をスケッチしていたのですが → 墓を掘る場面 → 今の形と、いつの間にか時系列がどんどん後になっていきました。PVでは、雨の葬列というモチーフが良かったのでそれを活かしたかったのですが、まぁそれは別の機会にでも。

Three Cheers for Sweet Revenge

Three Cheers for Sweet Revenge

デザイン

別段目新しいことはしてないので、特筆することはないですね。
細いヘッダのカスタマイズと、上部の div.calendar の扱いに付いてはこちらのエントリーを参考にしました。

また、細いヘッダアレンジの作例で使われてた「POWERED BY」の画像はそのまま使ったのですが、

やはりあった方がいいのかな。


あと黒背景は初めて挑戦なので、これまた初めてベーステーマとして hatena2-black を使いながらの制作というのが、個人的には新鮮ではあったのですけれども、世間的にはどうでもいいことの一つらしいですよ。

カスタマイズ

画像を修正する

このテーマに使用している画像は タグ[buried] に置いてあります。
画像を使っているので、簡単に色違いのバージョンを作成する、……というわけにはいきませんが、どうしても他の色が良いという方のために画像の元データを置いておきます。

それぞれ、ヘッダとフッタの2つの画像が収録されています。編集にはベクター系のソフトが必要ですね。

Illustratorでもいいのですが、めっちゃ高いのでお手軽なのは SVGファイルが扱えるフリーソフト Inkscape でしょうか。
尚、このファイルに関しては、ライセンスは公開デザインと同様に GPL とするので、色違いだけではなく他のテーマに使うなどご自由にお使い下さい。

日付部分を脇に動かす

使い勝手は悪いので、デフォルトでは設定していませんが、私自身はあまり日付にタイトルを使わないので、このような形に変更しています。

その代り、日付部分に文字が入りません。
変更の仕方は

.main{
  width: 740px;
}

.day h2 {
  position:relative;
}
.day h2 .edit{
  position:absolute;
  top: 0;
  right: 10px;
}


.day h2 span.title{
  display: none;
}

.day .body{
  width: 520px;
  margin: -2.1em auto 0 auto;
  _margin: -1.9em auto 0 auto;
  text-align: left;
}
div.comment div.caption{
  padding-left: 0.5em;
}
div.comment div.commentshort{
  width: 520px;
  margin: -1.8em auto 2em auto;
}

div.refererlist{
  width: 520px;
  margin: -2.5em auto 3em auto;
  _margin: -2.4em auto 2em auto;
}

で。
日付部分に加え、[コメントを書く] の文言も動かしています。