何かいろいろ面倒になってきたけど、今回はがんばると決めた自分。
はてなダイアリーのブロックに関して
画面左にあるのがcssのクラス名sidebar。
この中にはてなで指定されている各モジュールを入れることで画面左にカレンダーやプロフィールや最近タイトルなど表示させてます。それぞれにモジュール名がついているので、設定方法をヘルプ等で確認して、それを[管理]-[デザイン]-[詳細デザイン設定]のページフッタに入れてます。
別にページヘッダでも良いんじゃないかと思うんですが、このページをcssがない状態またはhtmlソーズでみると、日記本文が先に内容表示され、その後にカレンダーとか最近のタイトルとかの内容が表示されてるのは本文の下すなわちページのフッタに記述しているからということに。
なので音声ブラウザやcss未対応のブラウザで見ると先に本文を読ませるということになるわけで、さき読ませたいんだったらページのヘッダに記述するといいと思います。
ページのフッタに
<div class="sidebar"> <hatena name="profile"> <hatena name="calendar2photo" template="hatena-module"> </div>
こんな感じで、div class="sidebar"〜/divの間にモジュールの記述を追加するとプロフィールとかカレンダーとかが表示されます。
で、そのサイドバーを左側に移動させるのがfloat:left;
サイドバーの幅を固定したいなら
width:固定したい幅を数値で指定;
pxで絶対指定になり、％で幅が可変式って感じでしょうか。ちなみにここに文字サイズも設定すればサイドバー内の文字のみかえるということも可能。ちなみにbodyでtext-align:center;にしたので、文字が全部このままだと中央揃えになるので左揃えの指定があります。
div.sidebar {
width: 140px;
margin-left: 5px;
text-align:left;
float:left;
}コレだけだとまだサイドバーと日記の内容がかぶってしまうので、日記の内容をサイドバー分右に移動させてます。が、これもいろんなやり方があるので、これが正解というわけではあありません。
日記本文の移動で使うクラス名はmainです。
marginで上0px、右0px、下0px、左150px;としています。これで、左側に余白ができたということになります。ほかの方法としては、float:right;で右寄せにするとかいろいろありとおもいます。ちなみにbodyでtext-align:center;にしたので、文字が全部このままだと中央揃えになるので左揃えの指定があります。mainの中で左右の余白が欲しかったのでpaddingで指定してます。ソースコードにたくさんメモってますので興味がある人はソースのぞいて下さい（ウツクシクないけど 汗；）
div.main {
margin:0px 0px 0px 150px;
text-align:left;
padding:0px 5px 0px 8px;
}
