こんにちは!「シンプルが一番!」がモットーの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: 5px 20px 5px 15px;
margin: 0 0 5px -30px;
}
これで、記事周りの余白などを設定しています。
「padding」とか「margin」とか、それぞれの数字が何を表しているかはググってみてください。
個人的に参考になるなと感じたサイトだけ挙げておきます。
・ブログが作りたい!
・HTMLクイックリファレンス margin padding
あとは試行錯誤あるのみ!
■ 億劫なあとがき
ホント、わからないことを調べて、試行錯誤して、調べて、試行錯誤して・・・っていうプロセスって楽しいですね!