*当サイトではアフィリエイト広告を利用して商品を紹介しています。

サイドバーを左側に表示させたい

MovableTypeを導入すると、すぐにブログは始める事が出来ますがデフォルト(標準)の仕様では、右側にサイドバーがある”2カラム”になっています。
今回はこのサイドバーを左側に移動させてみましょう。

インデックステンプレートのスタイルシートを見てみるとサイドバーやエントリー(記事)のある部分はスタイルシートで定義されています。

#center {
float: left;
width: 500px;
overflow: hidden;
}

#right {
float: left;
width: 200px;
background-color: #FFFFFF;
overflow: hidden;
}

まず#centerというのはエントリー(記事)のある領域ですね。
ここでfloat: left;が指定されています。同様に#rightでもfloat: left;が指定されています。そのためHTMLで記述された順番により、左に回りこんでいます。ですからfloat: left;の記述をfloat: right;と書き換えればサイドバーは右側に表示されます。

#center {
float: right;
width: 500px;
overflow: hidden;
}

#right {
float: right;
width: 200px;
background-color: #FFFFFF;
overflow: hidden;
}

HTMLの記述の順番を変えるとか、他にも方法はあるかと思いますがボクは当時こうしていました。

MovableType の関連書はこちら*
*独学ですので専門的な事はわかりませんが、ボクがこのサイトで試行錯誤して行ってきたMovableTypeカスタマイズの覚え書きです。間違っている記述があるかもしれません。御了承ください*



タイトルとURLをコピーしました