ブログカスタマイズの雑談BLOG

前回の記事＜■【Seesaaブログ新デザインシステム】ブログの横幅を変更し、ブログの背景色も変更する＞でブログの横幅を「960px」から「1024px」に変更したので、それに合わせてメインコンテンツとサイドバーの横幅を設定します。
前回の記事で説明したカスタマイズを前提として話を進めますので、とりあえず読んでおいてください。



まずは、現時点でのメインコンテンツとサイドバーの状態です。





ブログの横幅は「960px」から「1024px」に広げたのに、メインコンテンツとサイドバーの横幅をまだ広げていないので、メインとサイドの間が空いてしまっています。



メインとサイドがここまで離れているのはさすがにおかしいので、メインコンテンツとサイドバーの、それぞれの幅を調整したいと思います。
まずはメインコンテンツを、その後でサイドバーの調整のやり方を紹介して、最後に少しだけ説明します。

メインコンテンツの横幅を調整する（「main」を編集）

CSS（スタイルシート）を編集します。
管理画面の「スタイルシート編集」画面で「main」というclassを探します。
テンプレートがデフォルトのままだと439行目ぐらいにあります。
（画像では諸事情により「}」の上が1行空いていますが気にしないでください）



CSSの該当部分に以下の「編集後」のコードをコピーして貼り付けてから「保存」します。
説明するために文字色を変更している部分がありますが、気にせずにコピペしてください。


＜元コード＞



＜編集後＞


●コメントアウトで見出し「/******* メインコンテンツ *******/」を付けました。
●メインコンテンツの幅を620pxから730pxに変更しました。
●メインコンテンツ内側の右余白「padding-right」に10px、内側の左余白「padding-left」に15pxの余白を入れました。（左右合わせて25pxの余白を設定）
●結果的にメインコンテンツとしては、730px−25px＝705pxを使うことができます。

コード編集後のCSS（main）

サイドバーの横幅を調整する（「side」を編集）

CSS（スタイルシート）を編集します。
管理画面の「スタイルシート編集」画面で「side」というclassを探します。
テンプレートがデフォルトのままだと443行目ぐらいにあります。
（画像では諸事情により「}」の上が1行空いていますが気にしないでください）
今回は「.side--left」までをコピペしますのでご注意ください。



CSSの該当部分に以下の「編集後」のコードをコピーして貼り付けてから「保存」します。
説明するために文字色を変更している部分がありますが、気にせずにコピペしてください。


＜元コード＞



＜編集後＞


●コメントアウトで見出し「/******* サイドバー *******/」を付けました。
●サイドバーの横幅を280pxに変更しました。元が300pxだったので20pxほど狭くなっています。（余白を追加設定したので、その分のサイドバーの横幅を狭くしました）
●サイドバーの外側の左余白「margin-left」を5pxにしました。
●サイドバーの内側の右余白「padding-right」を15pxにしました。
●サイドバーの内側の左余白「padding-left」を5pxにしました。
●サイドバーの内側（右左）に15pxと5pxの計20pxの余白が入りましたので、「280px（サイドバー）−20px（内側余白）＝260px」ということで、結果的にサイドバーとしては260pxを使うことができます。


●「.side--left」に記述されていた「margin-right: 40px;」
「.side--left」に記述されていた「margin-right: 40px;」を削除しました。
これは何に対するclassなのか正直わかりません。左カラムにした時に関わってくるclass名かな？それともメインコンテンツとサイドメニューとの空間なのかな？ちょっとよくわからないですね。
でも、この40pxは上記のコード記述にすると必要ありませんので、削除しました。この40pxが無くても、普通に表示できます。
まあ、本当に不必要なコードなのかよくわからないので、一応、こうやって設定の変遷を書いておくことで保険をかけています。あ、心配だったらコメントアウト（「/*」と「*/」で「margin-right: 40px;」を挟む）しておけばいいと思います。つーか、あってもなくても関係ないので、そのまま残しておいてもいいかもしれませんね。お好きなようにしてください。（結局、削除してもかまわないことは後述しています）

コード編集後のCSS（side）

メインコンテンツとサイドバーの関係

編集後、メインコンテンツの横幅は730pxになりました。
（内側に計25pxの余白を入れていますが、メインコンテンツとしての横幅は730pxであり、内側の余白は無関係です）


サイドバーの横幅は280pxですが、余白が外側左に5px入っています。
（内側に左右合わせて20pxの余白を入れていますが、内側の余白は無関係です）





730px（メイン）＋280px（サイド）＋5px（サイドバーの左余白）＝1015px

ブログの横幅は1024pxに設定していますので、9pxほど余りますが、コレで大丈夫です。
もしもキッチリ1024pxになるように設定してしまうと、枠線を入れた時などにコンテンツがズレてしまう可能性があります。（テンプレートを編集する際に枠線を入れて確認することもあるでしょうが、この余白が無いと、コンテンツがズレて下に回り込んだりしてしまいます）


元のテンプレートもそうでしたよね？
横幅が960pxだった時（デフォルトのテンプレート）も、メインコンテンツは620px、サイドは300pxだったので、合わせても960pxにはなりません。（920pxです）
デフォルトでちゃんと余白を作ってあるので、それに合わせてカスタマイズして問題ありません。


●「.side--left」に記述されていた「margin-right: 40px;」
上記「サイドバーの横幅を調整する」の最後で、「.side--left」の「margin-right: 40px;」を削除するとかしないとか書きましたが、もしかしたら「960px−920px＝40px」ってことで、メインコンテンツとサイドバーの間の余白を設定しているclassなのかもしれません。
いずれにしても、上記のカスタマイズでメインとサイドの間の余白は9pxになってしまったので、「margin-right: 40px;」は必要ないと思います。

コード編集後の実際のページ

メインとサイドを調整すると、このような感じになります。程よい余白が入りましたね。






次の記事の紹介

次の記事ではSeesaaブログの「ヘッダーの高さ」と「ブログタイトル」について説明します。