サイドバーの位置を左にしてみました

人間の目は左から右に動くから左記事の方が読みやすいというのが定説だったけど、これは興味深い。 ブログのサイドバー位置は左のほうがページビューが伸びる？ http://t.co/1TK3rwnLIm

— バンブルビー通信 (@bbb_network) 2013, 9月 7

ふと目にとまったツイート、せっかくなので試してみることにしました。

#wrapper {
    width: 750px;
    background: transparent;
    float: right;
}

CSSの #wrapperの floatがrightだと本文が右によるらしいので、あとは#box2の値や#main-innerのボーダーを右から左に変えたり微調整。

うーん、たしかに本文よりサイドバーの方に目がいきやすいかも？

なぜ簡単に入れかえられるの？

はてなブログは、

• <div id="content-inner"> // コンテンツ本体の内側の要素

  • <div id="wrapper"> // 記事やボタン、リンク等の要素

    • <div id="main"> // いわゆる記事本体部分の要素

  • <div id="box2"> // サイドバーの要素

こんな感じの構成になっているので、 wrapperをfloat: right;(右寄せなので次の要素は左に回り込む)にするだけで左サイドバーになります。

以下はこのブログのデザインCSSの設定。基本のbordeauxのスタイルを微調整しているだけです。もっと効率よく書けそうな気もしますが、こっち方面は本職ではなく嗜む程度なのでご容赦を。

/* <system section="theme" selected="bordeaux"> */
@import "/css/theme/bordeaux/bordeaux.css";
/* </system> */

#content {
  width: 978px;
  color: #3d3d3d;
  margin: 0 auto;
  background: #fff;
}

#box2 {
  width: 185px;
  font-size: 13px;
  float: right;
  margin: 16px;
}

#wrapper {
    width: 750px;
    background: transparent;
    float: right;
}

#main:after {
  content: ".";
  display: block;
  height: 0;
  font-size: 0;
  clear: both;
  visibility: hidden;
}
#main-inner {
  border-left: 1px solid #ddd;
}

#main > * {
  margin: 0px;
}

#blog-title {
  margin: 10px auto 0px auto;
  width: 978px;
  text-align: center;
}

#top-editarea{
  width: 978px;
  text-align: left;
  margin: 0 auto;
  margin-bottom: 14px;
  font-size: 14px;
}

/* <system section="background" selected="000"> */
body{background:#000;} #globalheader-container{background: rgba(255, 255, 255, 0.5);}
/* </system> */

div.sos-adbox {
    float: left;  
}