読者です 読者をやめる 読者になる 読者になる

sos の 作業メモ

プログラミングや英会話学習、マイルや旅行、日常生活など。最近はWebFormなASP.NETのお守りがお仕事です。

日々の生活にhappyをプラスする|ハピタス Gポイント

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

プログラム一般 その他

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

#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;  
}