2014/04/18

【Blogger】シンプルテンプレートの幅を調整したい



こんにちは!「シンプルが一番!」がモットーのtknriaです!

もちろん、Bloggerで使っているテンプレートも「シンプル」。


しかし、シンプル故に、ちょっとした幅が気になっちゃたりします。

とは言え、変更の方法がちょっとわかりにくかったりしたので、備忘のために書き殴っちゃいます。

※シンプルテンプレートの中でも、ブログの右側にメニューがあるテンプレートを使用しているので、参考にならない場合もあると思います。



■ Bloggerのシンプルテンプレートの幅をちょちょいといじりたい!


まずは、比較的簡単にいじれるところから。



Bloggerの管理画面の右メニューにある「テンプレート」をクリックし、「カスタマイズ」をクリック


「幅を調整」の項目をクリックし、図の赤枠の2つの数字を変更します。
ここで変更できるのは、ブログ全体の幅と、右メニューの幅だけです。

これだけでも十分なんですけど、強いて言うなら余白とかまで細かく設定したい!という気持ちが芽生えてきたので、もっとよく調べてみることに。



■ Bloggerのシンプルテンプレートをもっと細かく設定したい!


※HTMLを編集していくので、自己責任でお願いします!

※HTMLを編集していくので、自己責任でお願いします!

※HTMLを編集していくので、自己責任でお願いします!

※ちなみに僕自身もよくわかっておらず、試行錯誤の結果、よくわからないままできちゃいました。

※ですので、重ねて、自己責任でお願いします!



Bloggerの管理画面の右メニューにある「テンプレート」をクリックし、「HTMLの編集」をクリック


「<b:skin>」を探して、右向きの▲をクリックして、展開します。
(左側の行番号は、設定によって異なるのでアテにしないでください)

なかなか見つからないときは「Ctrl+F」で検索ウィンドウが表示されるので検索してみてください。


開くとこんな感じです。


スクロールダウンして「Posts」という項目を探します


「Posts」という項目の中にある、「.post-header」とか「.post-footer」という項目を探します。

この前後に、以下の項目を追記します。


.post-outer{
  padding: 5px 20px 5px 15px;
  margin: 0 0 5px -30px;
}



これで、記事周りの余白などを設定しています。

「padding」とか「margin」とか、それぞれの数字が何を表しているかはググってみてください。

個人的に参考になるなと感じたサイトだけ挙げておきます。

 ・ブログが作りたい!

 ・HTMLクイックリファレンス  margin  padding


あとは試行錯誤あるのみ!



■ 億劫なあとがき


ホント、わからないことを調べて、試行錯誤して、調べて、試行錯誤して・・・っていうプロセスって楽しいですね!