livedoor
2008年04月30日
livedoorブログの幅を変更する方法（3カラム）
livedoorナレッジを見ていると、幅の変更やサイドバーの落ちなどの症状をよく目にします。
そこで、ブログ暦2ヶ月である初心者の私でもできた方法を説明します。
スタイルシート(CSS)をいじることになるので、コピーするなど必ずバックアップをとってください。
また、こちらのテンプレート構成表を参考にしてください。
参照：http://blog.pekebatu.com/archives/50439689.html
【CSSにおけるブログ画像該当箇所】
body…ブログ両サイドの余り部分
#header…ブログタイトル上部のlivedoorBlogなどの背景
#container…bodyとブログ本体との境目
#banner…ブログタイトル
#blogcontainer…サイドバー
#categorytitle…記事上部
datetop,#articletop…#categorytitleと同じ
fullbody,#articlebody…記事本文
date…記事の日付横のアイコン
posted…本文とコメントの境目
dateend,#articlebottom…記事末端
menu…postedと同じ
calendarhead…サイドバータイトル（本来はカレンダータイトル）
sidetitle…calendarheadと同じ
ここでは私が行った、「ブログタイトルの背景画像を変更する」「記事の日付横のアイコンを変更する」「ブログ全体を左右に広げる」「サイドバーにバナー画像が収まるようにする」について説明していきます。
「ブログタイトルの背景画像を変更する」
「記事の日付横のアイコンを変更する」
この2つは簡単です。
変えたい部分と同サイズの別画像をアップロードし、そこで得たURLを上の該当箇所に差し替えるだけでOK。
「ブログ全体を左右に広げる」
「サイドバーにバナー画像が収まるようにする」
まずはCSSのテンプレートサイズから変更していきます。
わかりやすいように、#bannerのwidthを1000pxにします。（これを基準に変更していきます）
↓
もともと#bannerのwidthは767pxだったので、差分の233pxを#container,#blogcontainerのwidthに加算します。
（サイドバーの幅を変えないのなら、#wrapper,#content,#blogのwidthにも加算するだけでOKです）
↓
#leftと#rightのwidthを210pxにします。これで幅200pxのバナー画像がきれいに収まります。
↓
#contentのwidthを[#blogcontainer-(#left+#right)]にします。
私の場合、[998-(210+210)]で578pxにしています。
↓
#blogのwidthはもともと#contentより10px小さいので、568pxにしています。
↓
#wrapperのwidthを[#left+#content]にします。
私の場合、[210+578]で788pxにしています。
以上でテンプレートのサイズ変更は終了です。
次に、変更したサイズどおりに画像サイズも変更します。
変更しなければならないのは
#container
#banner
#blogcontainer
#categorytitle
datetop,#articletop
fullbody,#articlebody
dateend,#articlebottom
calendarhead
sidetitle
の9項目です。
background:url(http://〜〜〜)のURLより画像をダウンロードしてください。
多いです（；^ω^）
ですが頑張りましょう。同じ画像を使っている部分があるので、編集する画像は全部で7つです。
ペイントやphotoshopなどでサイズ変更しましょう。
編集し終えたらアップロードし、CSSでURLを差し替えます。
これですべての工程は終了です。
お疲れ様でした(*・ω・)ﾉｼ ﾌﾞﾝﾌﾞﾝ♪
質問等あればコメントでお願いします。
そこで、ブログ暦2ヶ月である初心者の私でもできた方法を説明します。
スタイルシート(CSS)をいじることになるので、コピーするなど必ずバックアップをとってください。
また、こちらのテンプレート構成表を参考にしてください。
参照：http://blog.pekebatu.com/archives/50439689.html
【CSSにおけるブログ画像該当箇所】
body…ブログ両サイドの余り部分
#header…ブログタイトル上部のlivedoorBlogなどの背景
#container…bodyとブログ本体との境目
#banner…ブログタイトル
#blogcontainer…サイドバー
#categorytitle…記事上部
datetop,#articletop…#categorytitleと同じ
fullbody,#articlebody…記事本文
date…記事の日付横のアイコン
posted…本文とコメントの境目
dateend,#articlebottom…記事末端
menu…postedと同じ
calendarhead…サイドバータイトル（本来はカレンダータイトル）
sidetitle…calendarheadと同じ
ここでは私が行った、「ブログタイトルの背景画像を変更する」「記事の日付横のアイコンを変更する」「ブログ全体を左右に広げる」「サイドバーにバナー画像が収まるようにする」について説明していきます。
「ブログタイトルの背景画像を変更する」
「記事の日付横のアイコンを変更する」
この2つは簡単です。
変えたい部分と同サイズの別画像をアップロードし、そこで得たURLを上の該当箇所に差し替えるだけでOK。
「ブログ全体を左右に広げる」
「サイドバーにバナー画像が収まるようにする」
まずはCSSのテンプレートサイズから変更していきます。
わかりやすいように、#bannerのwidthを1000pxにします。（これを基準に変更していきます）
↓
もともと#bannerのwidthは767pxだったので、差分の233pxを#container,#blogcontainerのwidthに加算します。
（サイドバーの幅を変えないのなら、#wrapper,#content,#blogのwidthにも加算するだけでOKです）
↓
#leftと#rightのwidthを210pxにします。これで幅200pxのバナー画像がきれいに収まります。
↓
#contentのwidthを[#blogcontainer-(#left+#right)]にします。
私の場合、[998-(210+210)]で578pxにしています。
↓
#blogのwidthはもともと#contentより10px小さいので、568pxにしています。
↓
#wrapperのwidthを[#left+#content]にします。
私の場合、[210+578]で788pxにしています。
以上でテンプレートのサイズ変更は終了です。
次に、変更したサイズどおりに画像サイズも変更します。
変更しなければならないのは
#container
#banner
#blogcontainer
#categorytitle
datetop,#articletop
fullbody,#articlebody
dateend,#articlebottom
calendarhead
sidetitle
の9項目です。
background:url(http://〜〜〜)のURLより画像をダウンロードしてください。
多いです（；^ω^）
ですが頑張りましょう。同じ画像を使っている部分があるので、編集する画像は全部で7つです。
ペイントやphotoshopなどでサイズ変更しましょう。
編集し終えたらアップロードし、CSSでURLを差し替えます。
これですべての工程は終了です。
お疲れ様でした(*・ω・)ﾉｼ ﾌﾞﾝﾌﾞﾝ♪
質問等あればコメントでお願いします。
