au one net　インターネットガイド 　


特集：はじめようブログ：ラヴログをカスタマイズしよう
投稿記事のカスタマイズ（余白、横幅）　（05.03.17　最終更新05.12.28）

※カスタマイズの基本操作については「カスタマイズの基本」を参照してください。

★★　今回のカスタマイズ　★★


　↓↓↓




今回は投稿記事の余白や横幅をカスタマイズしてみましょう。



図の赤矢印で示した部分が余白、青矢印で示した部分が横幅になります。

■ 余白のカスタマイズ

今回はテーマ「basic」のCSSをカスタマイズします。
※必ずしもテーマ「basic」でなくてもかまいませんが、文中の説明と異なる部分があります。

表示されたCSSの「/* 本文の外枠設定 */」が投稿記事部分を定義しています。

/* 本文の外枠設定 */
.blogbody{
　margin:10px 0px 20px;
　padding:10px;
　border:1px solid #999;
}

余白は「margin」で定義されています。

【margin】
margin:★1 ★2 ★3 ★4
★1（上余白）、★2（右余白）、★3（下余白）、★4（左余白）

★の部分にサイズを表す数値と単位を記述します。
単位には、ピクセル（px）、ポイント（pt）、ミリ（mm）などがありますが、今回は実際のサイズをイメージしやすいピクセル（px）を用います。
ここでは、下のようにカスタマイズしました。

/* 本文の外枠設定 */
.blogbody{
　margin:10px 60px 40px 0px;
　padding:10px;
　border:1px solid #999;
}

カスタマイズしたCSSを保存し、ブログの再構築をすると、次のようになります。



なお、カスタマイズする前の「basic」テンプレートでは、margin:10px 0px 20px;のように余白の数値が3つしか定義されていません。数値が3つの場合は、1つ目が上余白、2つ目が左右余白、3つ目が下余白を意味しています。

■横幅のカスタマイズ

ここで一旦、先ほどの余白の設定を初期値にもどしましょう。

カスタマイズデザインテーマのcustom1〜10のどれかを選択し、テーマ「basic」のCSSを読み込んでください。
※必ずしもテーマ「basic」でなくてもかまいませんが、文中の説明と異なる部分があります。

表示されたCSSの「/* blog本体(日付〜本文まで)の設定 */」の「width」が投稿記事部分の横幅になります。

/* blog本体(日付〜本文まで)の設定 */
.blog{
　float:left;
　width:500px;
　margin-top:20px;
}

初期設定では500pxとなっていますが、ここの値を変更することで横幅が変わります。

/* blog本体(日付〜本文まで)の設定 */
.blog{
　float:left;
　width:400px;
　margin-top:20px;
}


横幅を400pxに変更しました。

ここで注意したいのは、横幅を初期設定より小さい値にすると、投稿記事とサイドバーの間に空白ができることです。また、横幅を大きい値にすると、下の図のようにサイドバーが下にずれて表示されることもあります。



これは、あらかじめブログ全体の横幅が定義されているためです。今回のケースでは、ブログ全体の横幅が710px、サイドバーの横幅が185pxとなっていますので、投稿記事の横幅によっては、空白ができたりサイドバーが下にずれることになるのです。
投稿記事部分の横幅を変更するときは、ブログ全体の横幅もあわせて調整し、全体をバランスよくレイアウトするとよいでしょう。

ブログ全体の横幅は「/* blog全体のサイズなどの設定 */」の「width」で定義されていますので、ここの値を変更しましょう。

/* blog全体のサイズなどの設定 */
#container{
　width:710px;
　margin:0px auto;
　text-align:left;
}
↓↓↓
/* blog全体のサイズなどの設定 */
#container{
　width:610px;
　margin:0px auto;
　text-align:left;
}



先ほど、投稿記事部分の横幅を500pxから400pxに変更しましたので、ブログ全体の横幅を710pxから610pxにしました。これで、投稿記事とサイドバーの間の空間はなくなり、ブログ全体のレイアウトが整いました。

投稿記事部分の横幅を大きくして、サイドバーが下にずれてしまった場合は、ブログ全体の横幅を初期値より大きくするとよいでしょう。

（1/1）

<<　インデックスへ戻る
※本記事の公開後、ソフトの仕様、サービス内容、参照URL等の変更により、最新の情報と記事内容が異なる場合があります。

au one net | ご意見・ご要望 ｜ produce by d-e-x ｜