2011年02月14日

はてなダイアリーでCSSをざっと弄ったのでまとめたよ

このブログのデザインを変えました。個人的にはこれで4回目のデザイン変更になります。今回はわりとまともなデザインが出来たように思うので「ココはこういうコードになっています」「こういうツールを使うと便利です」と言うようなことを説明します。

便利なツール
CSS
人気エントリーの表示方法
まとめ
追記

便利なツール

Google Chrome Developer Tools
標準で付いている開発ツールを使います。各要素に割り当てられているCSSを調べるのと、その場でCSSをあててみて期待通りの挙動をするかどうかを確認します。

Digital Color Meter
Mac標準で付いているカラースポイトツールです。ポインタを当てた部分の色をCommand+Shift+Cで取得してくれます。WindowsだとCSSSというソフトが同じ挙動を提供してくれますね。FirefoxであればColorzilla、Chrome拡張だとyuku_tさんがコメントしてくれたEye Dropperというのが良さそうですね！

ProCSSor
CSSを整形してくれるWebサービスです。適当に書き散らしてこれで整形する、という動作を何回か繰り返しています。色々な整形形式の中から好きなものを選べるのが嬉しいですね。

zen-coding
CSSスタイルで書いたテキストを展開してHTMLを生成してくれるプラグインですが、CSSの省略形を展開してくれたりもします。例えば"bgc"と入力して展開用のショートカットキー(渡しの場合はCtrl+Z)を押せば、background-color:#FFFに展開してくれます。この記事を書くときなんかにも、"img"→Crtl+Zでimgタグを簡単に打ってくれるので便利ですね。

CSS

まず前のデザインが気に入らなかったので完全に初期状態に戻しました。設定画面から標準のhatena2というデザインテーマに切り替えます。ついでにサイドバーに追加したいものをここで付けておきます*1。次に、実際にCSSを編集していきます。とりあえずhatena2テーマに最初から用意されている要らないものを全て解除しました。リンクの下線や全体のサイズ指定、ヘッダー、不要なborder等ですね。

/\*\*\*\* reset \*\*\*\*/div.sidebar,h1,.hatena-body{ border: 0 }#simple-header{ display: none }h1 a:visited,div.calendar a,div.calendar a:hover,div.calendar a:visited,.naviBar ul li a{ text-decoration: none }.naviBar ul{ list-style-type: none }#simple-header,h1,.hatena-body{ max-width: none; width: 100%; }

またサイドバーのサイズを弄ろうとしたのですが、はてなダイアリーでは以下のような指定でサイドバーを右側に配置しているようです。

エントリー部分は右側に対してサイドバーの横幅だけマージンを設定してある
画面右端から左方向にネガティブマージンでサイドバーの横幅だけ移動
エントリーの用意してくれたマージンにサイドバーが上手く収まる

ということで、サイドバーの右側に20pxの余白が欲しかったので、以下のような指定をしました。

div.sidebar { margin-left: -242px; /\* 222px + padding\*/ \_margin-left: -240px; /\* 220px + padding \*/padding-right: 20px; } /\* padding \*/

次は色関係を弄りました。色数はあまり多くしたくないので、特徴的なところに目立つ色を使って、あとはグレー等の馴染む色を適当に散らしていきます。このブログの場合であれば、全体の黄土色の背景色、エントリの白い背景色、サイドバーの黒い背景色、という3色がメインですね。preの中だけはコードを読みやすくするためにカラフルにしています。ちなみにここはTerminalの色設定を参考に配色しました。はてなのシンタックスハイライトでは以下の7つのクラス名が振られるようなので、これに合わせて適当に色設定を行います。

synSpecial
synType
synStatement
synPreProc
synIdentifier
synComment
synConstant

/\*\*\*\* color \*\*\*\*/.body .section pre{ color: #ffffff }.synSpecial { color: #00FEFE }.synType { color: #FF6D77 }.synStatement { color: #00FEFE }.synPreProc { color: #FB68F8 }.synIdentifier { color: #00FB4B }.synComment { color: #4AACF9 }.synConstant { color: #FFCCCC }h1 a,h1 a:hover,h1 a:visited{ color: #BE9E60 }div.calendar a,div.calendar a:hover,div.calendar a:visited{ color: #333 }#archive-category a,#archive-category a:visited,.naviBar ul li a,.naviBar ul li a:visited{ color: #20FF00 }#archive-category a:hover,.naviBar ul li a:hover{ color: #FAFC4A }.hatena-module,.hatena-module ul li a,.hatena-module ul li a:visited,.hatena-module ol li a,.hatena-module ol li a:visited{ color: #ccc }/\*\*\*\* background-color \*\*\*\*/.hatena-module .hatena-moduletitle { background: none }h1,.hatena-body,.main { background-color : #DEBE80 }.day { background-color: #FFF }.hatena-module,.body .section pre,#archive-category,.naviBar { background-color: #312D25 }

またシンタックスハイライトが綺麗に動くように、以下のような指定をしています。overflow:auto; ではみ出しそうになればスクロールバーを表示しています。hail2u.netさんのこちらのページなどを見ると良いかと思います。

/\*\*\*\* about SyntaxHighlight \*\*\*\*/.body .section pre{ margin: 1em 0; padding: 20px; color: #ffffff; overflow: auto; max-height: 40em; }

角丸のデザインが好きなので、色々なところにborder-radiusを設定しています。

/\*\*\*\* radius \*\*\*\*/#archive-category,.naviBar,.hatena-module,.day,.body .section pre{ border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px; }

サイドバーや上部のバーの内側の左上に微妙に黒い色で影を入れることで、内側に凹んでいる感じを醸し出しています。

.naviBar { margin: 0 20px; padding: 5px 0; box-shadow: inset 5px 5px 5px #000; -moz-box-shadow: inset 5px 5px 5px #000; -webkit-box-shadow: inset 5px 5px 5px #000; }

凹んでいる感じと言えば、サイドバー内の個々の見出しの線の部分にも微妙に細工をしてあります。上側の横線に背景色より暗い色、下側に明るい色を配色すれば凹んでいる感じになります。

.hatena-module .hatena-moduletitle { border-bottom: solid 1px #000 }.hatena-module .hatena-modulebody { border-top: solid 1px #555 }

ブログタイトル部分もレタープレス風に影を入れました。文字内側の上側に文字色より暗い色、文字外側の下側に文字色より明るい色をそれぞれ1pxほど入れればそれっぽくなります。レタープレス風のデザインについては、こちらのサイトが参考になるかと思います。

h1{ text-shadow: 1px 1px 0 #FEDEB0, -1px -1px 0 #9E7E40; font-weight: normal; }

まとめ

今回はこんな感じでおしまいです。hatena2の標準のデザインが機能的なので、必要以上に手を加えないように心掛けつつ編集していけば、上手くまとまっていってくれます。私はデザイナーではなくエンジニア寄りなのでCSSはあまり上手く書けませんが、少し編集するだけでも雰囲気が随分変わるので弄っていて非常に楽しいです。皆さんも是非CSSを編集して自分だけのデザインを作ってみてください。

追記

さっき職場のWindowsPCからChrome9.0.597.84で確認したら角丸のデザインが崩れていました。きたないさすがWindowsきたない - Chromeでbox-shadowがバグる話というエントリにまとめています。

*1:後からでも「ヘッダー」「フッター」の部分に適切なはてなモジュールを記述すれば自分で追加できます

便利なツール

CSS

人気エントリーの表示方法

まとめ

追記