雨の音が好き

アマオトです。ゲーム攻略、プレイ日記、ペット、雑貨、家電、ガジェット紹介記事などが中心です

はてなブログのサイドバーを右から左にしたい

 とりあえずテーマが色々あって、公式じゃないくてユーザーが配布してくれているテーマが沢山ある。

 お金かかるのか!とおもいきや、無料で配布してくれているのでありがたくつかわせていただきます!

Yunomi - テーマ ストア - はてなブログ

んでもって、背景の色を変更

 でも以前使ってたブログだと右サイドバー(カラム)じゃなくて、左サイドバーなのでこれを何とかしたい。

f:id:nowshika:20140731170352j:plain

 って、事で調べて

サイドバーの位置を左にしてみました - sos の 作業メモ さんのサイトに辿り着いたので、ここを見ていじり中。

 よくわからないけど、とりあえずsosさんのサイトにある、これをデザインテーマのカスタマイズタブにある「デザインCSS」にコピペ。

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

f:id:nowshika:20140731170804j:plain

 あっさり左に。これだけ?

 

width: 750px; ←サイズ指定(好みの問題)なので不要
background: transparent; ←背景を透明にって記述なのでこれも好みの問題。基本的に不要。色変えてもいいしお好きに

 なので、不要な記述を減らして、これをデザインCSSに貼り付けるだけで、サイドバーを右から左にできる↓

#wrapper {
float: right;
}

一応IDとかClass(ブログパーツ毎の名前)とか

 さすがにこれ何もわからなすぎてもあれなので、IDとかClassを調べてみた

はてなブログのidとかclassとか - kyabana's blog

 ここがとてもわかり易かったです。

 上記で言うと、「#wrapper」これがID。

 上記だと「width: 750px;」になってるけど、このサイズを広げるとブログ全体のサイズが変わる。でも広げるのは簡単でも、wrapperの中に入ってるID要素よりは小さくできない。

 簡単に言うと、amazonでDVD買った時に、Amazonの梱包の箱はいくらでもでかくできるけど、中に入ってる商品であるDVDのサイズ以下には梱包の箱を小さくできないという当たり前の理屈。

 #wrapperがamazonの箱なら、中には#main(記事本体)や、#box2(サイドバー)等の商品が入ってるイメージ。