はてなブログでサイドバーを2つ（3カラム）にしてみた

最近ではブログで、真ん中に記事、両脇にサイドバーをつける、いわゆる「3カラム（列）」のスタイルが多いと思います。

なので、はてなブログでもそうしようと思っていたのですが、デフォルトのデザインでは3カラムのが無いし、
更に以前からあった「はてなダイアリー」とHTMLの編集の仕方が違うせいか、ちょっと工夫をしないと3カラムにできなくなっていました。
でも、今ではこのブログのように、はてなブログでも3カラムが出来る方法を考えたので、それを載せようと思います。

！注意点！

• HTMLやCSSの知識が無いと、内容が理解できないかもしれません（コピペするだけでも使えるようにはしてます）。
• デザインテーマ「Epic」（多分デフォルトで設定されているもの）で編集しました。なのでほかのテーマでは上手くいかないところがあるかもしれません。そこは各自調整をお願いします。
• この方法を使い、「body」に「margin: 0 auto;」を指定すると、はてなスターのポップアップがズレて表示されます。ご注意ください。
• この方法では「はてなモジュール」を普通の方法では使えなくなります。更に、モジュールによっては使えないものも出てくるので、はてなモジュールをどうしても使いたい人はご注意ください。（この方法ではてなモジュールを使う場合はこちらを参照してください）

2014/4/10 追記：
※はてなモジュールを使えるタイプの3カラムを作りました。こちらからどうぞ。


では長くなりましたが、本題に入ろうと思いますがその前に基礎の復習。

<div id="main">
記事本文
</div>
<div id="left-side">
左サイドバー
</div>
<div id="right-side">
右サイドバー
</div>

こんな感じのHTMLにすると、3カラムの構造が出来上がります。（厳密にはCSSの編集が必要です）


ですが、はてなブログではCSSはともかく、HTMLは直接全体の編集が出来ず、サイドバーの「HTMLモジュール」を使うしかありません。
ですが、これだと＜div id="left-side"＞というタグをモジュールの中に書いてもそれだけではすぐにモジュールを閉じるDIVタグが来てしまうので、意味がありません。
でもこれを逆手に取って3カラムを実現できます。

<div id="box2-inner">
<div class="hatena-module hatena-module-html">
 <div class="hatena-module-body">
  <div id="left-side">
  左サイドバーの中身
  </div>
 </div>
</div>
<div class="hatena-module hatena-module-html">
 <div class="hatena-module-body">
  <div id="right-side">
   右サイドバーの中身
  </div>
 </div>
</div>
</div>

上のような構造にすると、はてなブログでも3カラムができます。どういうことかというと、
1行目「box2-inner」は、はてなブログによるサイドバー全体のDIVタグです。
はてなブログにはデフォルトデザインが複数ありますが、選ぶものによってbox2のところが「box1」だったりすると思います。
これははてなの方で決めているので、変更できません。
そして2行目と9行目の「hatena-module hatena-module-html」というクラスですが、これはデザイン設定にある「HTMLモジュール」を表すものです。
これはHTMLモジュールを使うと自動的に付きます。
同様に3行目と10行目の「hatena-module-body」も、「はてなモジュール」だということを表しています。
これもはてなモジュールを使うと出てきます。


注目して欲しいところは、HTMLモジュールの中に、「div id=”left-side”」や「div id=”right-side”」を入れ、またその中にサイドバーの内容を書き込んでいるというところです。
ここが最大のポイントで、こうすることで3カラムを実現しています。


実際に書くとすると、まずはてなブログの管理からデザイン設定に行き、カスタマイズタブでサイドバーの「モジュールを追加」ボタンを押してHTMLモジュールを編集できるようにします。
そして一つ目のHTMLモジュールに以下の内容を書き込みます。（タイトル部分は空にしておいてください）
（1つ目も2つ目も、1行目のdiv id=""の""の中は自分で好きなように変えていいです。ですが、他のidと被らないように）


サイドバーの中身は必ずしも2つに分ける必要はないです。見やすくなるように分けてるだけです。
一つにまとめたい場合は「left-side」のDIVを閉じたあと、すぐにDIV id「right-side」を書いてください。そして中身を書いたあと「right-side」のDIVを閉じれば完成です。

<div id="left-side">
左サイドバーの中身（自由に）
</div>

そして2つ目のHTMLモジュールに以下の内容を書き込みます

<div id="right-side">
右サイドバーの中身（自由に）
</div>

そして、他のモジュールを削除すると、HTMLとしては3カラムの完成です。（クドイようですがCSSの編集も必要です。これは後で書きます）
2つとも、サイドバーの中身（自由に）の部分は自分で好きなように編集してください。
で、気づいた人もいるかも知れませんが、このやり方だと他のモジュールを全て削除しなければなりません。
モジュールの追加方法も書きたいところですが、記事が長くなりすぎるので、
モジュールのソースについてはこちらをご覧ください。


では、この記事では最後に、今まで追加したHTMLを実際に横3列にするための「デザインCSS」を編集する方法を載せたいと思います。
これまたはてなブログの管理から、デザイン設定→カスタマイズタブまで行って、「デザインCSS」を編集できるようにしてください。
何もしなくてもすでに何か書かれていると思いますが、それを消すと色々とアウトなので、それは消さないようにしてください。
編集できるようにしたら、そこに以下のものを書きます。

/* ページ全体 */
body {
  width: 925px;
  position:relative;
  margin: 0 auto;
}

/* 記事部分 */
#wrapper {
  width: auto;
  float: left;
}
#main {
  width: 525px;
}

/* サイドバー全体 */
#box2 {
  float: none;
}

/* 左サイドバー */
#left-side {
 position: absolute;
 left: 0%;
 width: 200px;
}

/* 右サイドバー */
#right-side {
 position: absolute;
 right: 0%;
 width: 200px;
}

上のCSSは自分のブログのものを元に、3カラムに最低限必要なものだけを書きました。
各要素の「width」などの設定は自分で好きなようにしてください。
このCSSだと、記事部分が中央の幅525ピクセル、サイドバーがその両脇に200ピクセルずつでページ全体は925ピクセルの幅という設定のはずです。


以上のことをすると、はてなブログで3カラムにすることが出来るはずです。
気が向いたら・要望があったら、このブログのデザインで僕が実際に編集した部分をすべて解説しようかなと思います。
このブログと同じような感じにしたいけどやり方が分からない人は、コメントなどください。