特に多いご質問
ブログデザインが急に崩れてしまった
デザインを変更したのに反映されない
新着記事

2011年04月05日

ブログの記事幅を広げたい

スタイルシートを編集して、記事表示の横幅を広げる手順についてご説明します。

サイドバーが左右にあるタイプ(3カラム)のテンプレートをご利用の場合、
記事横幅が狭いためブログデザインが乱れてしまう場合などにお試し下さい。

「マイブログ」−「デザイン」−「スタイルシート」画面より、
ご利用中のテンプレート名を選択し、スタイルシート編集画面を表示させます。

記事幅を広げるには2ヶ所変更が必要です。

■ブログの全体の横幅を広げる
#container{
margin:0px auto 0px auto;
padding-right:0px;
width:780px;
padding-left:10px;
text-align:center;
color:#6D6E71;
}

この部分の「width:780px;」は、ブログ全体の横幅を表します。
記事幅を広げる分だけ、数字を足します。
ここでは「100ピクセル」分広げることとし、「width:880px;」に変更します。

■記事の横幅を広げる
#content {
margin-bottom:30px;
margin-left:20px;
float:left;
width:370px;
text-align:left;
}

この部分の「width:370px;」が、記事表示部分の横幅を表します。
ここでは先ほど広げた「100ピクセル」分を広げ、「width:470px;」に変更します。

■変更を保存します。
「スタイルシートを保存する」をクリックして修正が完了します。

ポイントは、ブログ全体の横幅を広げた数字(今回は100ピクセル)と、
記事の広げる横幅を同じ数字にすることです。


【注意】
今回の方法で記事幅を広げた場合、テンプレートにより対応できない場合がございます。
「のんびりレトリバー」や「プリティプードル」など、
日付や記事タイトルの背景に画像を使用しているテンプレートの場合、
記事幅を広げても背景画像が広がらずに、デザインが乱れてしまいます。

今回の方法では、日付や記事タイトルの背景が画像でない場合のみご利用いただけます。
背景画像を使ったテンプレートの場合は、背景画像を変更していただく必要がございます。

※今回の方法で記事幅を広げることのできないテンプレート(3カラム)
「プリティプードル」
「のんびりレトリバー」
「グッピーブルー」
「オカメインコ」
「ガーリーラビGr」
「セレブ犬ピンク」
「幸せの青い鳥」
「セレブ犬イエロー」
「バナナンさる」
「K&K」
「ガーリーラビ」
「なごみ猫」
「BLUE FISH」
「お散歩パピヨン」

※HTMLやCSSの編集についての技術的サポートは行っておりません。
お問い合わせを頂きましてもお答えできない場合がございますのでご了承下さい。

ニックネーム アセラ事務局 at 11:45| デザイン・カスタマイズ | このブログの読者になる | 更新情報をチェックする