(cache) css知識がない人のためのはてなダイアリー３カラム化

2011-01-29

■[はてな] css知識がない人のためのはてなダイアリー３カラム化

ついこの間BLOGのデザインをサイドバー２つにしました。

そのメモ書き

ちなみに「css知識がない人のための」は私自身を指す

用意するもの
- Firefox
- firebug

手順1 もうひとつのサイドバー部分を定義

divでもうひとつのサイドバーの部分を用意します。

設定前状態

送信者 hatena 3カラム

設定後状態

送信者 hatena 3カラム

このようにleftbarのdivを追加します。

設定方法

管理 → デザイン → デザインを編集 → 詳細タブ → ページのヘッダ

設定前

<div class="main">

設定前

<div class="leftbar">
	<hatena name="profile" template="hatena-module">
	<hatena name="calendar2photo" template="hatena-module">
	<hatena name="section" template="hatena-module">
	<hatena name="comment" template="hatena-module">
	<hatena name="trackback" template="hatena-module">
</div>
<div class="main">

手順2 サイドバーの領域を確保

Leftbarの領域を確保します

firebugで現サイドバーのサイズを見てみましょう

sidebar詳細

送信者 hatena 3カラム

firebugの右上スタイルを見ると

sidebarのwidthが220になっているのでそれぐらい真ん中mainの領域を空けましょう

設定方法

管理 → デザイン → デザインを編集 → 詳細タブ → スタイルシート

 div.main {
    width:70%;
    margin-left: 220px;
}

ちなみにwidthのパーセントは適当です。

設定後(イメージ)

送信者 hatena 3カラム

(手順1を踏まずに行った場合の画像）

手順3 サイドバーのcssを定義

同様にfirebugのsidebarのスタイルをすべてコピーします

サイドバーのcss詳細(firebug閲覧時）

.sidebar {
  line-height: 1.5;
  width: 220px;
  float: right;
  margin-left: -222px;
 _margin-left: -220px;
 *margin-left: -220px;
  border-left: 1px solid #a5bce7;
  border-bottom: 1px solid #a5bce7;
  overflow: hidden;
}

上記より rightはleftにleftはrightに全部置き換えましょう

新規追加用サイドバー

.leftbar {
  line-height: 1.5;
  width: 220px;
  float: left;
  margin-right: -222px;
 _margin-right: -220px;
 *margin-right: -220px;
  border-right: 1px solid #a5bce7;
  border-bottom: 1px solid #a5bce7;
  overflow: hidden;
}

設定方法

管理 → デザイン → デザインを編集 → 詳細タブ → スタイルシート

 div.main {
    width:70%;
    margin-left: 220px;
}

.leftbar {
  line-height: 1.5;
  width: 220px;
  float: left;
  margin-right: -222px;
 _margin-right: -220px;
 *margin-right: -220px;
  border-right: 1px solid #a5bce7;
  border-bottom: 1px solid #a5bce7;
  overflow: hidden;
}