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

当ブログで使っている「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」プロパティを下記の通り書き換えます。

• #wrapperのfloat: left;→float: right;
• #box2のfloat: right;→float: left;

これだけです。簡単！

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

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