サイドバーを右に移してみる
最後に残った（ｃ）「サイドバーを左から右に移動する」です。
はじめにいろいろ調べたところ、「keyword:sidebar」にズバリ「sidebarを右に」という説明を見つけました。で、そのまま設定をコピーしてみましたが、うまくいかず。横着しないでページのソースを見てみることにします（＾＾；
ザッと見たところ、これははてなダイアリー全般に言えることかもしれませんが、少なくともテーマ「Hatena_sunflower」では、日記の全体的な配置を次のように考えているみたいでした。まず、トップに「Hatena::Diary」と書いてあるいわゆる「ヘッダ」ですね。その下にサイトのタイトルを表示する。で、その後からが日記の本体（hatena-body）になり、ここに日記本文を格納する「main」と、サイドバーである「sidebar」が並びます。
サイドバーを動かすには、このmainとsidebarの位置関係を調整すればいい、ということになります。これについては、テーマのスタイルシートのほうに記述がありました。
div.hatena-body{
width:740px;
margin:0 auto;
padding:0px;
text-align:left;
position:relative;
}
div.main {
margin-left:220px;
margin-top:10px;
padding:0px;
text-align:left;
}
div.sidebar {
width:200px;
padding:0px;
position: absolute;
text-align:left;
top: 0px;
left: 0px;
}この部分です。日記の本体（hatena-body）は幅が740px。その中に、サイドバーが本体上の座標(0, 0)（＝左上隅）を原点として幅200pxの部分を占めており、日記本文は(220, 10)から右下の範囲を占める、と指定されています。
本体とサイドバーの幅を変えないとすると、サイドバーを右側に移すためには、日記本文が本体の右から220px以降の左側を占め、サイドバーの位置を本体右から200pxの範囲を占める、というように指定すればよいことになります。ここで一つ気をつけなくちゃいけないことは、テーマのスタイルシートを「上書き」するように指定しなくてはならない、ということ。要は、元の設定をなるべく残したまま、その一部の値を変えるように書く、ということです。
というわけで、少し考えて、結局このような設定にしました。
div.main {
margin-left: 0;
margin-right: 220px;
}
div.sidebar {
left: 540px;
}日記本文が220pxだけサイドバーに余白を残していたので、左側の余白を削り（margin-left）新たに右側に幅220pxの余白を設定しました（margin-right）。サイドバーは本体上の原点から、「本体の幅（740px）−サイドバーの幅（200px）」の分だけ右側にずれたところを基点とするようにしました。後は微調整して完成です。
というところで、ウォーミングアップとして始めた「はてなダイアリーのデザインをいじってみる」シリーズはここまで。
はてなダイアリーをつけ始めて今日で６日。キリスト教の神様ははじめの６日間で天地を創造して７日目に休んだそうなので、それにあやかってというわけでもないですが、次回からふつうの日記を始めていきたいと思います。
