検索はてなダイアリーでCSSをざっと弄ったのでまとめたよ2011年02月14日このブログのデザインを変えました。個人的にはこれで4回目のデザイン変更になります。今回はわりとまともなデザインが出来たように思うので「ココはこういうコードになっています」「こういうツールを使うと便利です」と言うようなことを説明します。Tools標準で付いている開発ツールを使います。各要素に割り当てられているCSSを調べるのと、その場でCSSをあててみて期待通りの挙動をするかどうかを確認します。MeterMac標準で付いているカラースポイトツールです。ポインタを当てた部分の色をCommand+Shift+Cで取得してくれます。WindowsだとCSSSというソフトが同じ挙動を提供してくれますね。Dropperというのが良さそうですね!ProCSSorCSSを整形してくれるWebサービスです。適当に書き散らしてこれで整形する、という動作を何回か繰り返しています。色々な整形形式の中から好きなものを選べるのが嬉しいですね。zen-codingCSSスタイルで書いたテキストを展開してHTMLを生成してくれるプラグインですが、CSSの省略形を展開してくれたりもします。"bgc"と入力して展開用のショートカットキー(渡しの場合はCtrl+Z)を押せば、background-color:#FFFに展開してくれます。この記事を書くときなんかにも、"img"→Crtl+Zでimgタグを簡単に打ってくれるので便利ですね。CSSまず前のデザインが気に入らなかったので完全に初期状態に戻しました。設定画面から標準のhatena2というデザインテーマに切り替えます。ついでにサイドバーに追加したいものをここで付けておきます*1。次に、実際にCSSを編集していきます。hatena2テーマに最初から用意されている要らないものを全て解除しました。リンクの下線や全体のサイズ指定、ヘッダー、不要なborder等ですね。}またサイドバーのサイズを弄ろうとしたのですが、はてなダイアリーでは以下のような指定でサイドバーを右側に配置しているようです。エントリー部分は右側に対してサイドバーの横幅だけマージンを設定してある画面右端から左方向にネガティブマージンでサイドバーの横幅だけ移動エントリーの用意してくれたマージンにサイドバーが上手く収まるということで、サイドバーの右側に20pxの余白が欲しかったので、以下のような指定をしました。*/次は色関係を弄りました。色数はあまり多くしたくないので、特徴的なところに目立つ色を使って、あとはグレー等の馴染む色を適当に散らしていきます。このブログの場合であれば、全体の黄土色の背景色、エントリの白い背景色、サイドバーの黒い背景色、という3色がメインですね。preの中だけはコードを読みやすくするためにカラフルにしています。ちなみにここはTerminalの色設定を参考に配色しました。はてなのシンタックスハイライトでは以下の7つのクラス名が振られるようなので、これに合わせて適当に色設定を行います。}またシンタックスハイライトが綺麗に動くように、以下のような指定をしています。はみ出しそうになればスクロールバーを表示しています。hail2u.netさんのこちらのページなどを見ると良いかと思います。}角丸のデザインが好きなので、色々なところにborder-radiusを設定しています。}サイドバーや上部のバーの内側の左上に微妙に黒い色で影を入れることで、内側に凹んでいる感じを醸し出しています。}凹んでいる感じと言えば、サイドバー内の個々の見出しの線の部分にも微妙に細工をしてあります。上側の横線に背景色より暗い色、下側に明るい色を配色すれば凹んでいる感じになります。}ブログタイトル部分もレタープレス風に影を入れました。文字内側の上側に文字色より暗い色、文字外側の下側に文字色より明るい色をそれぞれ1pxほど入れればそれっぽくなります。レタープレス風のデザインについては、こちらのサイトが参考になるかと思います。}人気エントリーの表示方法サイドバーに出している「人気エントリー」の表示方法ですが、これははてなブックマークのブログパーツをはてなダイアリー用のデザインにして付ける、という感じで付けています。いうページにアクセスします。そのページから、『(ブログタイトル)』の人気エントリーをブログに貼りつけ、を選択します。するとブログパーツ用のコードを生成してくれるので、テーマ:はてなダイアリーにしてコードをコピーし、サイドバーの表示したい部分にコードを貼り付けます。"count";に変更するとはてブ数順に取得することが出来るなど、弄れる部分が幾つかあります。まとめ今回はこんな感じでおしまいです。hatena2の標準のデザインが機能的なので、必要以上に手を加えないように心掛けつつ編集していけば、上手くまとまっていってくれます。私はデザイナーではなくエンジニア寄りなのでCSSはあまり上手く書けませんが、少し編集するだけでも雰囲気が随分変わるので弄っていて非常に楽しいです。皆さんも是非CSSを編集して自分だけのデザインを作ってみてください。追記さっき職場のWindowsPCからChrome9.0.597.84で確認したら角丸のデザインが崩れていました。Chromeでbox-shadowがバグる話というエントリにまとめています。*1:後からでも「ヘッダー」「フッター」の部分に適切なはてなモジュールを記述すれば自分で追加できます。