とりあえず - うたての境地

開設しました

内容は雑多になると思います

とりあえず初期設定としてメモがてらデザインについて

もちろん独学初心者なので変なところいっぱいあると思います…

ページのヘッダ

<h1 class="dummy"><a href="http://d.hatena.ne.jp/utate/">うたての境地</a>
<a id="twitter-header-icon" href="http://twitter.com/utate_" target="_blank"><img src="/images/icon-twitter.png" alt="Twitter" title="このページ作者のTwitterへ" class="icon" height="16" width="16" border="0"></a>
<div class="blog-description">あることないこと</div>
</h1>
</div>
<div class="hatena-body2">
<div class="main2">

ページのフッタ

</div>
</div>
<div class="sidebar">
<hatena name="profile" template="hatena-module">
<div class="blog-description">つらつらと書きます<br></div>
<hatena name="sectioncategory" template="hatena-module">
<hatena name="section" template="hatena-module" showcategory="false">
<hatena name="comment" template="hatena-module">
<div class="hatena-module">
<div class="hatena-moduletitle">リンク</div>
<div class="hatena-modulebody">
<ul class="hatena-link">
<li><a href="http://twitter.com/utate_" target="_blank" title="@utate_" />twitter</a></li>
<li><a href="http://utate.tumblr.com/" target="_blank" title="うたてタンブラー" />tumblr</a></li>
</ul>
</div>
</div>
<div class="hatena-module">
<div class="hatena-moduletitle">twitter</div>
<div class="hatena-modulebody module-twitter">
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
  version: 2,
  type: 'profile',
  rpp: 4,
  interval: 30000,
  width: 225,
  height: 400,
  theme: {
    shell: {
      background: '#ffffff',
      color: '#000000'
    },
    tweets: {
      background: '#ffffff',
      color: '#333333',
      links: '#000000'
    }
  },
  features: {
    scrollbar: false,
    loop: false,
    live: false,
    hashtags: true,
    timestamp: true,
    avatars: false,
    behavior: 'all'
  }
}).render().setUser('utate_').start();
         </script><a target="_blank" href="http://twitter.com" class="twtr-logo"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/u/utate/20120909/20120909023215.png?1347125593" height="16" width="80"></a>
</div>
</div>
<hatena name="calendar2photo" template="hatena-module">
</div>

スタイルシート

/*トップについて*/

body {
padding-bottom: 20px;
max-width: 1024px;
margin: 0px auto;
}

div#simple-header {
_width: 912px;
}

h1 { 
display: none;
border: 0px ;
}

h1.dummy { /*←dummyというクラス名は適当*/
display: block;
margin: 0px auto;
width: 100%;_width: 912px;
color: rgb(140, 146, 156);
background-image: url(http://d.hatena.ne.jp/images/diary/u/utate/titleimg.jpg);
background-repeat: no-repeat;
text-align: left;
font-size: 150%;
text-indent: 20px;
font-family: "times new roman","geogia",serif;
height: 50px;
}

.blog-description {
color: #8d9098;
font-size:15px;
padding-left:7px;
font-family:'ヒラギノ角ゴ Pro W3','ＭＳ Ｐゴシック','Osaka','メイリオ','Meiryo',sans-serif;
font-weight: normal;
height: 20px;
}

.hatena-body {
border: 0px;
margin: auto;
max-width: 922px;
width: 100%;_width: 924px;
overfllow: hidden;
*zoom: 1;  /* IE用 */
}

.hatena-body2 {
border-left: 0px;
border-right: 0px;
border-top: 0px;
border-bottom: 1px solid rgb(210, 214, 222);
margin: auto;
max-width: 922px;
width: 100%;_width: 924px;
overfllow: hidden;
text-align: left;
line-height: 1.5;
*zoom: 1;  /* IE用 */
}

/*メインカラムについて*/

.main2 {
display: inline-block;
*display: inline;  /* IE用 */
*zoom: 1;  /* IE用 */
vertical-align: top;
width: 70%;
margin-bottom: 10px;
text-align: left;
}

.day {
padding: 0px 5px 1em 10px;
}

.main2 div.calendar, .main2 div.day {
margin-right: 0px;
}

.body .section {
margin-left: 10px;
}

.body h3.title {
margin-left: -10px;
}

.body .section p.sectionheader {
margin: 0px 0px 30px -10px;
}

.body h4 {
border-left: 4px solid rgb(174, 178, 184);
padding-left: 0.6em;
margin-left: -10px;
}

.body h5 {
margin: 1em 0 0.5em;
}

div.calendar {
text-align: left;
}

div#pager-bottom.calendar {
padding: 0px 0px 10px 0px;
}

.comment .caption, .refererlist .caption {
background: none repeat scroll 0% 0% rgb(245, 245, 245);
}

.comment .caption a, .refererlist .caption a {
color: rgb(100, 100, 100);
}

.refererlist ul li {
word-break:break-all;
word-wrap:break-word;
}

.refererlist ul li a {
text-decoration: underline;
}

.refererlist ul li a:hover {
color: rgb(169,169,169);
}

/*サイドバーについて*/

.sidebar2 {
display: inline-block;
*display: inline;  /* IE用 */
*zoom: 1;  /* IE用 */
vertical-align: top;
width: 25%;
margin: 90px 0 0 45px;
border-left: 0px;
line-height: 1.5;
border-bottom: 1px solid rgb(210, 214, 222);
text-align: left;
overfloat:hidden;
}

.hatena-module ul li a:hover, .hatena-module ol li a:hover {
color: rgb(169,169,169);
}

.hatena-moduletitle {
border-left: 6px solid rgb(141, 146, 156);
}

.hatena-moduletitle a {
text-decoration: none;
}

.hatena-moduletitle a:hover {
text-decoration: underline;
}

.hatena-modulebody {
border-bottom: 0px !important;
}

.module-twitter {
position: relative;
padding: 2px !important;
}

.twtr-logo {
display: block;
position: absolute;
bottom: 13px;
left: 13px;
}

ul.hatena-link, ul.hatena-section {
list-style-type: square;
margin-left: 15px;
color:#aeb2b8;
}

.sidebar2 table.calendar {
  font-size: 90%;
  width: 198px;
  border-collapse: collapse;
  margin-top: 7px;
  margin-left: 5px;
  margin-bottom: 5px;
}

.sidebar2 table.calendar td {
  text-align: center;
  padding: 2px;
  border: 1px solid #f0f0e4;
  background: #fff;
}

.sidebar2 table.calendar td a {
text-decoration: underline;
color: rgb(169, 169, 169);   
}

.sidebar2 table.calendar td a:hover {
text-decoration: none;
}

.sidebar2 table.calendar td img {
  width: 15px;
  height: 15px;
}

.sidebar2 table.calendar td.calendar-prev-month, .sidebar2 table.calendar td.calendar-next-month, .sidebar2 table.calendar td.calendar-current-month {
  padding: 4px 0;
  background: transparent;
  border-top: 0;
  border-left: 0;
  border-right: 0;
}

.sidebar2 table.calendar td.calendar-prev-month a, .sidebar2 table.calendar td.calendar-next-month a, .sidebar2 table.calendar td.calendar-current-month a {
color: rgb(51, 51, 51);
text-decoration: none;
}

.sidebar2 table.calendar td.calendar-prev-month a:hover, .sidebar2 table.calendar td.calendar-next-month a:hover, .sidebar2 table.calendar td.calendar-current-month a:hover {
text-decoration: underline;
}

.sidebar2 table.calendar td.calendar-prev-month {
  text-align: right;
}

.sidebar2 table.calendar td.calendar-next-month {
  text-align: left;
}

.sidebar2 table.calendar td.calendar-weekday {
  background: #f5f6ec;
}

.sidebar2 table.calendar td.calendar-sunday {
  background: #f9eded;
}

.sidebar2 table.calendar td.calendar-saturday {
  background: #e9f7fd;
}

.sidebar2 table.calendar td.calendar-day a {
  display: block;
}

.sidebar2 table.calendar td.day-today {
  background: #f0f0e4;
}

.sidebar2 table.calendar td.day-selected {
  font-weight: bold;
}

/*記事本文について*/

div.section a:hover {
color: rgb(169,169,169);
}

.azlink-box {
width: 95%;
font-size: 90%;
border: 1px solid rgb(212, 216, 224);
padding: 0.8em;
margin-bottom: 0.6em !important;
display: inline-block;
_display: inline;
}

.azlink-image { 
display: inline-block;
_display: inline;
width: 35%;
float: none !important;
margin-left: 0 !important;
}

.azlink-info {
display: inline-block;
_display: inline;
width: 65%;
float: none !important;
margin-left: 0 !important;
vertical-align: top;
}

img.hatena-fotolife {
padding: 7px ;
margin: 5px 0px;
border: 1px solid rgb(212, 216, 224) ;
}

.body .section pre {
max-height: 1000px;
overflow-y: auto;
}

.body p.footnote {
font-size: 80%;
text-indent: -1.7em !important;
padding-left: 3.5em;
}

.body .section ul {
margin: 0 0 0 1.5em;
padding: 0;
}

blockquote {
font-size:smaller;
}

ムダに時間かけたのはサイドバーのtwitterの部分とヘッダタイトルの部分

twitterのウィジェットについては
・Twitter Widgetをはてなダイアリーに表示させる方法。 - miscellaneous notes

こちらを見てJoin the conversationの隣のロゴをかぶせてみたり…

ヘッダのタイトルについては
・はてなダイアリーガイド「CSSセレクタ」とは - はてなキーワード

こちらを参考にしつつ、サブタイトル（説明文）を入れました

<div class="main">の下に新たに<div class="***">みたいなのを入れて

持ち上げる方法がなんとなく嫌だったので…

あと、ありがちですがデザインを弄るときに"かんたん"から行おうとすると

せっかく書いたコードが勝手に改変されてレイアウトが崩れるから注意

追記：azlinkの部分も付けたしました

追記：サイドバーもろもろ大幅修正（見た目は変わらず）