黒木ノ水岩

黒木ノ水岩

ゲームを中心に様々なものを趣味の赴くままに紹介していきます。尚、当ブログの利用や掲載内容等により生じた損害等の責任は一切負いかねますので、ご了承下さい。

【はてなブログ】サイドバーを左に表示させる方法!

当ブログで使っている「Naked」テーマは、通常右にサイドバーが来ています。

しかし、サイドバーを左に移動させる事も簡単にできます。

 

今回は、サイドバーを左に移す方法を紹介したいと思います。

 

デザインCSSに追記する場合

ダッシュボード」→「デザイン」→「カスタマイズ」→「デザインCSS」の欄に下記のコードを追記して下さい。

追記後は「変更を保存する」をお忘れなく!

#wrapper {
    float: right;
}
#box2 {
    float: left;
}

 

デザインCSSを直接上書きする場合

「Naked」のCSSをimportのリンクではなく、直接全て「デザインCSS」にコピペしている方向けのカスタマイズ方法です。

「デザインCSS」の中の下記のコードを見つけて下さい。

#wrapper {
    width: 100%;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    float: left;
    margin-right: -340px;
    padding-right: 340px;
}
#box2 {
    float: right;
    width: 300px;
    padding-bottom: 40px;
    margin-top: 10px;
}

上記のコードの中の「float」プロパティを下記の通り書き換えます。

  • #wrapperfloat: left;float: right;
  • #box2float: right;float: left;

これだけです。簡単!

要するに、#wrapper#box2floatを値を入れ替えてやれば良いのですね。

 

みなさんもブログを自由にカスタマイズしてみてはいかがでしょうか?