TakayukiKoyama Geek Blog

Create, Entertain, Experience

はてなブログのサイドバーの幅を変更する

公式テーマ1位のこのテーマも悪くないけど、ちょっとサイドバーが狭いので調整してみた。

HTMLタグの構成を確認する

 Google Chromeなら右上の設定ボタン("三"みたいなやつ)> ツール > デベロッパー ツール でブログのレイアウトを確認してみる。sidebarを探すとidは"box2"で、widthは180pxらしい。

 180pxは窮屈感があるので、250pxにしてみる。

CSSを編集する。

 はてなブログのサイドバーにあるidからプルダウンメニューを開いて、デザインを押す。

f:id:tkoyama1988:20131221163932j:plain

 左にあるメニューから「カスタマイズ」>「デザインCSS」でサイドバーのcssを書き換えてみる。

f:id:tkoyama1988:20131221164313j:plain

 cssを書いてみる。

#box2 {
  float: right;
  width: 250px; /* サイドバーの幅 */
}

 サイドバーのスペースに収まらず、コンテンツの下にいどうしてしまったので、コンテンツのサイズを調整する。

こんな感じにした。

#box2 {
  float: right;
  width: 250px; /* サイドバーの幅 */
}

#content {
  padding: 0 10px 20px 10px;
}

#wrapper {
  float: left;
  width: 680px;
}

#main {
  float: right;
  width: 540px;
  padding: 0 10px 0 10px;
  min-height: 100px;
}

f:id:tkoyama1988:20131222112504j:plain

 これが一般的なやり方なのか知らないけど、動いたからいいか。

参考になるサイト: はてなブログのidとかclassとか - kyabana's blog

広告を非表示にする