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

以前の記事＜■【Seesaaブログ新デザインシステム】ブログに画像をアップロードして、背景画像を設定する＞では、Seesaaブログの背景に画像を設定する方法を説明しました。
背景画像の設定はけっこう簡単にできます。



画像の設定は簡単にできるんですが、このままではブログの表示がおかしくなります。
背景画像を設定してその画像を繰り返しているだけなので、境目がないのです。





このままでもいいんだけど、ちょっとメリハリが必要だと思いますので、コンテンツに背景色を付けて、背景画像と区別させたいと思います。
あと、テンプレート「シンプルA. ホワイト 右カラム」の横幅はデフォルトでは「960px」ですが、これをちょこっと広げたいと思います。
広げたいのは、私の気分です。広げなくていいなら広げなくていいんじゃないでしょうか。
ついでにコンテンツ部分の設定もやってしまいます。ページ一番下の「powerd by」との空間を少しだけ狭くしたいと思います。

Seesaaブログの横幅と背景色を設定（「l-wrapper」）

ブログの横幅と背景色の設定をします。
この記事ではブログの横幅をデフォルトの「960px」から「1024px」に広げ、背景色を白色に変更しますが、もちろんお好きなように設定してください。





CSS（スタイルシート）を編集します。
管理画面の「スタイルシート編集」画面で「l-wrapper」というclassを探します。
テンプレートがデフォルトのままだと377行目ぐらいにあります。


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


＜元コード＞



＜編集後＞


●コメントアウトで見出し「/******* ヘッダー・メインコンテンツ・サイドバーを含む領域 *******/」を付けました。
●「width」（赤色部分）でブログの横幅を960pxから1024pxに変更しました。
●「background-color」（青色部分）を追加して、背景色を白色に設定しました。

コード編集後のCSS（l-wrapper）と実際のページ

Seesaaブログのコンテンツ部分を設定（「l-content」）

Seesaaブログの「コンテンツ部分」の設定をしたいと思います。
「コンテンツ部分」とは何ぞや？ということで、とりあえずどの部分なのかを画像にしてみました。





この赤枠部分を私は「コンテンツ部分」と呼んでいますが、正式な名称は知りません。調べるのも面倒なので以降は「コンテンツ部分」で通します。
ちなみに、「メインコンテンツ」とは別物ですからお気を付けください。
「メインコンテンツ」や「サイドバー」を含んだ領域が「コンテンツ部分」でございます。



さて、コンテンツ部分のclassは「l-content」です。
デフォルトのCSS（スタイルシート）には「padding-bottom: 166px;」としか記述されていません。「下余白は166px」という意味ですが、いったいどこの部分のお話なのでしょうか。


ってことで、試しに「166px」を「300px」にしてみました。





「人気記事」とSeesaaブログの「powerd by」部分との距離が広くなったのがわかりますかね？
画像内で「ココ」と書いていますが、要するにSeesaaブログのロゴ「powerd by」部分との距離を設定しているだけなんですよね。



コンテンツには記事が入ったり関連記事やコメントが入りますが、そのコンテンツ部分とロゴとの間の余白しかclass「l-content」では指示されていません。
コンテンツがサイドバーよりも長くなった場合に活かされる設定なのはわかりますが、中途半端な数値「166px」が気になりますので、少しだけ変更します。

コンテンツ部分「l-content」を編集する

CSS（スタイルシート）を編集します。
管理画面の「スタイルシート編集」画面で「l-content」というclassを探します。
テンプレートがデフォルトのままだと388行目ぐらいにあります。


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


＜元コード＞



＜編集後＞


●コメントアウトで見出し（それぞれが何を指しているのか）を付けました。
●下余白を「166px」から「150px」に変更しました。ちょっと狭くしました。
●最終的には私のブログにはナビゲーションメニューを付けますので、そのナビメニューとの余白「margin-top:0px;」を追加しています。（追加しましたが、別にいらない設定です）
●この「l-content」を変更する意味はあったのでしょうか？自分でやっておきながら疑問です。（でも設定しちゃったので記事にしておきます）

コード編集後のCSS（l-content）

次の記事の紹介

次の記事では、Seesaaブログのメインコンテンツとサイドバーの横幅について説明します。