公開デザイン制作をボブの絵画教室風に書いたよ【ね、簡単でしょ？】

「こんにちわ、皆さんご機嫌いかがですか」
「3月21日から公開デザイン祭2008春が、始まっていますが、どうです？4月6日の締め切りに向けて制作は進んでいますか？」
「大賞はAmazonギフト券5万円分、と気になるものの、
『スタイルシートって難しいんじゃないか？』
と考えている人も多いかもしれませんね」

「でも、全然そんなことはありませんよ」
「今日は簡単に公開デザインを作る過程を紹介してみましょう、これを読んで皆さんも是非チャレンジしてくださいね」

「そもそも公開デザインとは何か？ついてはこちらを参考にしてください他人のデザインをインポートする（公開デザイン一覧） - はてなダイアリーのヘルプ」
「はてなダイアリーに慣れない方が公開デザインを作るにあたって、最初につまづくのはどういう仕様なのか、分からないことでしょう。スタイルシートのことは分かっても、ダイアリーの構造までは把握し難いものです」
「しかし、何もはてなダイアリーの仕様を全て理解する必要はありません」

「まず重要なのは、スタイルシートを全部自分で作る必要はない ということ」
「これまでに登録されている公開デザイン・テーマは全てほとんどが GPL で公開されている*1ので、既存のものを利用しても全く問題ないわけです」
「既に十分に検証されて、使い勝手もいいテーマを選んで、少し調整するだけで簡単にオリジナルの公開デザインが制作できます」

「今回はこちらのテーマを利用することにします」
4chairs-sky
「ヘッダの写真が印象的な素敵なデザインですね」
「このヘッダの画像を置き換えて、新しい公開デザインに変更してみます」

「というわけで、この写真を使ってみることにします」

「近くを散歩しながら撮ったものですが、近頃は暖かくなってきましたねー、もうふきのとうなんかも出てました」
「皆さんはふきのとうを食べたことありますか？私は天ぷらにしたものが大好きです」
「それはさておき、ただちょっと、この写真では画面がちょっとさみしいですね」

「ここら辺に雲を追加しましょう、こんな風に」

「私は Illustrator というソフトを使っているのですが、これくらいならオープンソースの Inkscape でも十分に作れます」
「また今回は一部を除いて、正円しか使わないで描いてます」
「丸だけでも、工夫次第で簡単に絵が描けるんですよ」

「さてこの辺にも雲を描いていきましょう」
「ほら、円しか使いませんがちゃんと雲になるでしょう？」

「とりあえず、こんな感じになりましたね」

「続いて雲を足していきます」

「どうです？好きなように円を並べるだけです」
「適当な大きさで構いません、色も自由に決めていいですよ、雲ですが赤が入っても面白いですね」

「この辺が寂しいので、虹を作ってみることにしました」
「これも正円だけで描けます」
「色を塗って」
「ちょっと雲を追加しましょう、ここでも円だけですよ」
「どうです？」

「円しか使わずにここまで描けました」
「ね、簡単でしょう？（筆をパタパタと洗いながら）」

「あとは表情を描いていきます」
「ここだけは円ではありませんが、まぁそんなに難しくはありません」
「こちら向きはちょっと愛嬌のある感じにしました」

「これに、もう一つ表情を加えて、さらに微調整して完成です」

「Illustrator形式ですが、最後にファイルも公開しておくので、よければ確認してみてください、難しい機能も使っていません。本当に丸しか並べてないですよ」

「さて、ヘッダ画像の作成はここまで」
「今度はこれを、実際にヘッダに使えるようにしてきます」
「先程の 4chairs-sky を選択して」

「スタイルシートに」

body{
  background-image: url(http://f.hatena.ne.jp/images/fotolife/r/rikuo/20080330/20080330012107.jpg);
}

「と書くだけです」

「これだけで、ヘッダ画像が置き換わりましたね」
「これでも十分に印象が変わるのですが、もうちょっと手を入れてみましょう」
「はてなスターを変えてみます」
「それぞれこんな感じですね」
「設定方法は」

.hatena-star-star-image {
  background-image: url(http://d.hatena.ne.jp/images/diary/r/rikuo/2008-03-26.gif);
}

.hatena-star-add-button-image {
  background-image: url(http://d.hatena.ne.jp/images/diary/r/rikuo/2008-03-24.gif);
}

.hatena-star-comment-button-image {
  background-image: url(http://d.hatena.ne.jp/images/diary/r/rikuo/2008-03-23.gif);
}

.hatena-star-comment-button-image-active {
  background-image: url(http://d.hatena.ne.jp/images/diary/r/rikuo/2008-03-22.gif);
}
.hatena-star-inner-count {
  color: #2D81DD;
}

「こうです*2」

「あとはヘッダ画像と文字が重なると見難いので調整が必要ですね」

#simple-header ul li a,
#simple-header ul li a:hover{
  color: #fff;
}

「あ！ちょっといいことを思いつきました」
「Amazon の書影の部分もカスタマイズしてみましょう」
「こちらもヘッダのモチーフにあわせて」
「雲を登場させてあげます」
「最後に小見出しの部分を調整」
「ここには傘を持った女の子を配置します」

.body h3.title {
  background: url(http://d.hatena.ne.jp/images/diary/r/rikuo/2008-03-25.gif) no-repeat 0 2px;
}

h2 img,
h3 img,
p.sectionfooter img {
  vertical-align: middle;
}

「そして、アイコンが複数並んだときに、キレイにそろうよう調整を加えます」

「これだけで完成です」
「ね、簡単でしょう？（扇型の筆を持ちながら）」

「あとはこれを公開デザインに登録するだけです」

「デザイン管理で共有するを選びます」

「GPL についての項目をよく読み、デザイン名とカテゴリ、説明などを記入します、それを確認して登録の前に再度 GPL で公開するか考えてください」

「かなり重要なので繰り返しますが、公開デザインに登録する場合は GPL での公開となります」
「詳しい内容はこちらなどをよく確認して欲しいのですが」

「GPL で公開することは、具体的に言えば GPL に沿う形であれば自由に改変することや、他のブログサービスであなたが作った公開デザインを使うこと、また商用利用についても容認することになります」
「広く使われることを受け入れるわけですから、そのことをよく考えてくださいね」

「さてこれで登録が終わりました」
公開デザイン「jape」 - はてなダイアリー
「こちらから登録された公開デザインを見ることができます」
「ね、簡単でしょう？」

「いかがでしょう？」
「冒頭でも言いましたが、なにも全ての設定をゼロから作る必要はなく、既存のテーマを利用して構いません」
「ヘッダ画像を変えるだけでも随分と印象が変わったものになりますから、是非公開デザイン祭にチャレンジしてみてください、そんなに難しくはないですよ」
「正直なところ、参加数は前回よりも少ないので Amazonギフト券を手に入れるチャンスです、絵を描けるならイラスト部門で、カメラが得意な方なら写真部門でそれぞれ狙ってみてもいいですね」