はてなダイアリーのらくらくデザイン法
CSSをべた打ちするよりは楽なのでは、という程度ですが。WYSIWYG（ブラウザに表示される見た目風の画面で編集できるということです）なHTML/CSSエディタがあれば、知りたい場所のCSSセレクタ名がクリックでわかりますし、CSSを変更した後も即座に画面に反映されるので作業の効率が上がるのではと思います。
ホームページビルダー
IBMのホームページビルダーが必要です。今のところ、無料のものでは適当なソフトを知りません。
 |
どこかにフリーのGUI CSSエディタがあれば、それがよいのですが。FireFox拡張あたりでありそうなものです。
ホームページビルダーの学割版というのもありました。
 |
基礎となるテーマを選ぶ
CSSをいじるといっても、レイアウトはなるべく既存のものを使えると楽です。はてなダイアリーで用意されているテーマから、レイアウト的に近いと思われるものを探してきます。よさそうなものが見つかったら、そのテーマのCSSファイルを表示させてコピーします。たとえばhttp://d.hatena.ne.jp/theme/book/book.cssなどです。
ホームページビルダーで編集
次に、はてなの設定でテーマを「指定しない」にした上で、さきほどのCSSファイルを「デザイン」の「詳細設定」ででてくる「スタイルシート」に貼り付けます。公開（パブリック）にしてあることを確認した上で、自分の日記ページをホームページビルダーで開きます。
色やフォント、配置を編集
あとはちょっとずつ調整します。デフォルトでは、編集画面はIE的なものがみえているようです。なにか変更したら、「ツール」「ブラウザ」でIEやFirefoxを開いて確認しましょう。ユーザ定義のツールバーを作れば、クリック一つでIEでの表示ができます。(バージョン9ではIEとNetscapeしかできない)
CSSのセレクタ名は
草稿「どんなセレクタにすればいいのかを調べ - ガイドグループ世話人の日記 - ガイドグループ
はてなダイアリーガイド「CSSセレクタ」とは - はてなキーワード
が参考になります。適当なところでソース表示からCSS部分をコピーし、はてなの設定に貼り付けて更新しておきましょう。
