【CSS編集】ブログ横幅を変更する
顔に泥がついている育児ブログ・・・なんですけれどもCSS編集記事です 今日もお付き合い願います。
【CSS編集】ブログ横幅を変更する
2007-10-15 追記
記事欄が表示されない、記事欄を見るために大幅なスクロールが必要
等のエラーもこちらのCSSの失敗が考えられます。ご参照ください。
ランキングチェック・中から投票はこっちから。
『ブログの横幅の変更』です。
・メインコラムの横幅 ・サイドコラムの横幅 ・ブログ全体の横幅
を変更することができます。
ブログ全体の横幅を変更する限りはメインコラムの横幅とサイドコラムの横幅も変更が必要になります。
が、背景の絵によっては各コラムの間を開けて画像を表示するなどしても素敵かもしれません。
（その調整を考えるだけでも頭が痛いです。）
例えばブログ全体の横幅のみを変更するとこんなふうになります。クリックで画像は拡大します。
サイドカラム（左）とメインコラムの間に空間ができてますね。
その後、メインコラムのcssをいじくって、この空間をうまく無くすようにするわけです。
上の画像を見ていただいてもわかるように、ベーシックスキン以外のCSS編集可能なスキンでも変更することが
できます。ただし、ヘッダーの画像は規定ピクセル数横幅760pxで綺麗に見えるように仕上げられています。
これを更に大きな数字に変更しても、画像が大きくなるわけではありません。
見ていただければわかるように、繰り返し表示になるだけです。ものによってはあまり美しく仕上がりません。
この獅子スキンだと別に変じゃないからいいかも。
カスタマイズで載せた画像の場合には、せめて中央表示に・・・（background-position: center;）程度のあがきを
するくらいのご提案になりますね・・・。それはこの記事の最後のほうに書いてあります。
ですので、ちょっと慣れたらやはりベーシックスキンを選択し、そのヘッダーに合う画像をご自身で準備することを
お勧めします。写真を撮らなくても絵を描かなくても、素材屋さんで借りることはできます。
大きさを変更することを許可している素材屋さんは結構多いです。よく規約を読んでお借りしましょう。
ブログの幅の変更は、「枠」の変更という考え方になります。 frame というソースです。
ではCSS編集画面を開いてみます。かなり下の方になります。色文字が私が書き加えた説明になります。
基本：グリーン
/*
-----------------------------------------------------
ameblo CSS Skin Layout Settings
FileName: type_c.css
Version: 2005.03/03
Skin for: green
-----------------------------------------------------
*/
#frame:after,
#wrap:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#frame,
#wrap {display: inline-table;}
/* Hides from IE-mac \*/
* html #frame,
* html #wrap {height: 1%;}
#frame,
#wrap {display: block;}
/* End hide from IE-mac */
#frame {
width: 760px; ブログ全体の幅を調整できます。（今後①と表記します。）
margin-left: auto;
margin-right: auto;
}
#wrap {
width: 100%;
}
#main{ ブログのメインコラム（記事欄）の幅を調整できます。（今後②と表記します。）
width: 400px;
float: left;
padding-left: 10px;
}
#sub_main{
width:100%;
overflow:hidden;
}
#sub_a{
width:170px; ブログのサイドカラム（左）の幅を調整できます。（今後③-1と表記します。）
float: left;
z-index: 1;
}
#sub_b{
width:170px; ブログのサイドカラム（右）の幅を調整できます。（今後③-2と表記します。）
float: right;
z-index: 2;
}
全体の幅（①）の最大値は900px程度です。「これが絶対値だ」とは書けないのですが、目安にしてください。
固定されますので、ブラウザの「お気に入り」を表示するとそのまま右にずれて表示されない部分が出てきます。
もしもブラウザの「お気に入り」を表示してもブログをそのまま読める状態で作成するのであれば、
だいたい790pxです。これでどの文字も線も削られないはずです。３台のPCで確認しました。
PCによって（モニターによってなのかな）見え方って違うんです。やっかいな話です。
この全体の幅（①）とメインコラム（②）とサイドカラムたち（③-1と③-2）とは、下記の関係が成り立っています。
① ≧ ② ＋ ③-1 ＋ ③-2 ＋ 10×カラムの数
めんどくさいでしょー（笑）
でもね、これを守らないと表示されなくなっちゃうんです。わかりますよね。メインコラムやサイドカラムの幅の合計が
全体の幅を超えてはいけないということです。というか、まあ確実に崩れて表示されるのでわかるんですけど。
『サイドカラムの数』というのは、メインコラムと右カラムと左カラムならば３、サイド片方ならば２です。
20か30かという話になります。
これはなんどか試した結果の「余白部分」で、もし余裕があれば5や3などで試してみてください。もっとくっつくかも
しれません。だけど、関係のない文章の文字と文字とがあまりにも接近しているのは決して美しくありません。
padding-left: 10px; 等の表示がありますから、枠から本体までの距離が既に10と設定されていることに関係する
かもしれません。かもしれない、くらいしか言えない素人です。許してください。
これまでのCSS編集とちがって、「枠」そのものをいじくることになりますので、崩れる時には総崩れです。
決していきなり「保存」をしないで、プレビューで見ながら少しずつやってください。
何度も自分のブログの総崩れ見ました（笑）。Richard won css のほうで試しています。
総数を９００とした時のモデルｐｘ ９００＝７１０＋１７０＋０＋２０ （例えば左カラムのみ）
９００＝５３０＋１７０＋１７０＋３０
これを基本にして、例えばサイドカラムの幅を広げたかったら
９００＝７００＋１８０＋０＋２０ とか。
総数を７９０とした時のモデルｐｘ ７９０＝６００＋１７０＋０＋２０ （例えば左カラムのみ）
７９０＝４２０＋１７０＋１７０＋３０
サイドカラムは170px以下にはしないことをお勧めします。さまざまな画像がきちんと表示されない場合があります。
さて、このようにして仕上げた場合、ベーシックスキンはこれで問題ないのですが、そうではないスキンの場合
フレームの後ろにある「背景画像」がついてこない時があります。私はそれを調整する術を知りません。
ですが、消してしまうとうまくいく場合があります＞こぶとりさん、これをやってください。
全体幅調整のcssで、このように示されている部分の背景設定css（赤字部分）
#frame {
width: 900px;
margin-left: auto;
margin-right: auto;
background: url(http://nwimg.ameblo.jp/p_skin/sisi/img/bg_b.gif
) repeat-y;
}
それを削除してください。こうなります。
#frame {
width: 900px;
margin-left: auto;
margin-right: auto;
}
そうすると、フレームの外の背景（カラムよりも外側）だけが残ります。
うまくいかないスキンもあるかもしれません。お問い合わせいただければ私のほうで試してみます。
ベーシックスキンにおいて、ヘッダーの画像をカスタマイズで載せたものを使用しており、それを調整する場合には
フレーム調整のcss（この記事の上の方で基本：グリーンと書いたところのcssです）の下に
#header {
background-image: url(http://ameblo.jp/user_images/c8/21/10016326718.png
);
}
#header {
background-repeat:repeat-x;
}
という場所があります。ここを調整すると結構いろいろとできます。
このままでは画像が左よりで、右に余った余白には同じ画像が繰り返されるだけになってしまうので（repeat-x）
繰り返しなしにして（no-repeat）私は中央に持ってくるようにしています（background-position: center;）。
画像そのものの大きさを調整することで、余白がなくなります。
}
#header {
background-image: url(http://ameblo.jp/user_images/a3/82/10015758874.png
);
}
#header {
background-repeat:no-repeat;
background-position: center;
}
何かございましたらコメント欄にお願いします。
（ごめんなさい後でもう一度読み直して追記や訂正があるかもしれません。一旦公開 2007-02-21 16:04:35）
今日は会社のHPとかやってて・・・余裕なくって・・・
あたしこっちはもっと完全に「ど」がつく素人だからもう・・・ああ・・・・
その後追記、訂正を致しました。2007-02-21 18:26:03
さらにエラー可能性を追記 2007-10-15