きまぐれAWA's Life

アクセスカウンタ

help リーダーに追加 RSS CSS(スタイル編) 第7回 ブログの幅を広げてみよう♪

<<   作成日時 : 2008/02/09 13:29   >>

トラックバック 1 / コメント 6

ウェブリブログで左右の2カラムにするとトップや記事ページのメイン部分が
狭くなって圧迫感があります。
今回はブログ全体の幅をCSS編集で広げてみますね。

画像






 ブログ全体の幅を広げてみよう ♪  

まずはブログ全体の幅を広げます。
CSS編集にも少し慣れてきた頃ではないかと思うので、
今回から入力前の文は省略します。


入力する場所は 『/* コンテナ(広告・フッタを除くメイン領域) */』
background-color:#FFEEEE; 』の後に次の文字列を入力します。

width:800px;

※ここでは横幅を800pxで設定しますが、お好みで『 width 』の数値を変更してください。
緑の文字列が以前デザインを指定した命令文になります。
『コンテナ領域の背景色』を設定していない場合は
#container{ 』の後に文字列を入力してください。

 A 『 共通スタイル 』   CSS 全体Map 

/*----------------------------------------------*/
/* 共通スタイル */
/* (トップ、月別、テーマ別、記事ページ共通) */
/*----------------------------------------------*/
body{
background-image:url(画像のURL);
background-color:#FFEEEE;

}

/* コンテナ(広告・フッタを除くメイン領域) */
#container{
background-color:#FFEEEE;
width:800px;
}



入力(貼り付け)が出来たら、設定ボタンをポチッと押して完了です(ういんく)
これでブログの幅が広くなりました♪

画像


※この設定でブログ全体の幅が『 800px (ピクセル)』になりました。
デフォルトに合わせて、以前設定したタイトル画像の幅は『 700px 』でした。
ブログの幅に合わせるために『幅 800px 』のタイトル画像に置き換えました。
設定するブログの幅に合ったタイトル画像を使用します。
 参照  CSS(スタイル編) 第1回 タイトル画像を変更する♪





 他の部分も広くしてみよう ♪  

上の設定でブログの幅が広がりましたが、各パーツは以前のままの大きさです。
そこで、他の部分も見栄えがいいように広げてみましょう。

 トップページのリストの幅

入力する場所は 『/*------------------ 新着記事 ------------------*/』
#contents{ 』 の後に次の文字列を追加します。

width:580px;

※お好みで『 width 』の数値を変更してください。

 B 『 トップ、月別、テーマ別ページ 』   CSS 全体Map 

/*------------------ 新着記事 ------------------*/
#contents{
width:580px;
}

/* 見出し */
background-image:url(画像のURL);
background-repeat: no-repeat;
padding:0px 0px 0px ▲px; height:●px; border-left:none;

}




 記事ページ本体部分の幅

入力する場所は 『/*-- ブログ(記事+トラックバック+コメント) --*/』
#blog{ 』 の後に次の文字列を追加します。

width:580px;

※お好みで『 width 』の数値を変更してください。

  C 『 記事ページ 』   CSS 全体Map 

/* ログインアンカー */
#subbanner #login{
/* タイトル領域内での位置を指定します */
}

/*-- ブログ(記事+トラックバック+コメント) --*/
#blog{
width: 580px;
}

/* ナビゲーション */
#blog .navi{
}




 トラックバック、コメント領域のパーツ

うちのデフォルトでは該当する文字列が無かったので以下の文字列を新規で入力ました。
入力する場所は下のほうで追加しています。

【 コメント入力欄の幅 】

/*追加 コメント入力欄の幅*/
#blog #comment .cont{
width:400px;
}


【 トラックバックとコメントの幅 】

/*追加 トラックバックとコメントの幅*/
#blog #trackback table,
#blog #comment table{
width:560px;
}


緑の文字列が以前デザインを指定した命令文になります。
※ /* ← 今回この中の文はうちのメモ書きです→ */ 特に入力する必要はありません。
※ お好みで『 width 』の数値を変更してください。

  C 『 記事ページ 』   CSS 全体Map 

/* フォーム フィールド */
#blog input.txt,
#blog textarea{
background-image:url(画像のURL);
background-color:■;

}

/*追加 コメント入力欄の幅*/
#blog #comment .cont{
width:400px;
}


/*追加 トラックバックとコメントの幅*/
#blog #trackback table,
#blog #comment table{
width:560px;
}


/*----------------------------------------------*/
/* トラックバックURL表示ウィンドウ */
/*----------------------------------------------*/
#miniwin{
}



入力(貼り付け)が出来たら、設定ボタンをポチッと押して完了です(ういんく)
これで各パーツの幅も広くなりました♪

画像


 追記
コメント欄の高さを変える記事を書きました。
 参照  第9回 コメントの入力欄の高さを変える♪




今回の設定でブログの全体の幅が広がって圧迫感がなくなりました♪
次回は細かい部分に目を向けてみたいと思います。


|ω・)ノシ See you♪

|彡 サッ






【 CSS編集(スタイル編) 】
オリジナルデザインのブログを作ろう♪
第1回 タイトル画像を変更する♪
第2回 背景の画像と背景色を変更する♪
第3回 アイコンを変更する♪ 〜 コンポーネント領域
第4回 アイコンを変更する♪ 〜 ページヘッダ部分
第5回 トラックバック、コメント領域も変えてみよう♪
第6回 一覧の画像と罫線のサイズと色♪
第7回 ブログの幅を広げてみよう♪  現在地 
第8回 いろんな場所の線のデザインをいじってみよう♪
第9回 コメントの入力欄の高さを変える♪
第10回 コメントを区切る罫線のデザイン♪ (要考察)

【 CSS編集(フォント編) 】
ブログのフォントのデザインを変えてみる♪
第1回 トップページのフォント♪ 『タイトル〜プロフィール』
第2回 トップページのフォント♪ 『新着記事一覧』
第3回 リンクの付いているフォント♪ 【再編集】
第4回 コンポーネント領域ののフォント♪
第5回 記事ページのフォント♪ 『タイトル 〜 記事題名』
第6回 記事ページのフォント♪『 関連テーマ 』

【 ブログ編 】
ウェブリブログでパンヤの絵文字〜フリースペースの活用♪





設定テーマ

関連テーマ 一覧

月別リンク

トラックバック(1件)

タイトル (本文) ブログ名/日時
ブログカスタマイズ
このブログのカスタマイズ履歴を記録しておきます(順不同) ...続きを見る
馬耳湯風(ばじとうふう)
2008/02/19 14:31

トラックバック用URL help


自分のブログにトラックバック記事作成(会員用) help

タイトル
本 文

コメント(6件)

内 容 ニックネーム/日時
(メ●´_________________`●)ビローン 
ってやっても大丈夫かな?(ひょえ)
(ぺこ)失礼しました。はよ寝て散髪いかなきゃ(あせ)
(* ^ー゚)ノでわでわ〜
癌ばすた〜
2008/02/10 03:57
癌ちゃん、いらっしゃい(わら)

大丈夫よ(*´艸`)クスクス
散髪イッテラー( ̄ー ̄)ノ▽"フリフリ
mairis
2008/02/10 13:26
はじめまして。
記事ページの幅の狭さに悩んでいましたが、このページを
見つけて簡単に修正することができました。
ありがとうございました。
このコメント書いていたら下の絵文字も楽しそう(笑)
これからいろいろとお世話になりたいと思いますので
どうぞよろしくお願いします。
Yashiro
2008/02/18 21:08
Yashiroさん、いらっしゃいませ(ん)

少しでもお役に立てたようでよかったです♪
うちがブログでしてみた事を書きとめてるものなのですが、
ほとんど人の受け売りだったりします(〃ノノ)
また少しずつ記事を増やしていこうと思ってますので、
見守ってやってください(にこ)

絵文字はうちがしてるゲームで使ってるものです。
ポチッと押すとその絵文字が出るようになってます(にや)
なかなか楽しいですよ(*^m^*)

お世話なんてとんでもないですよ(〃ノノ)
こちらこそよろしくです(ぺこ)
mairis
2008/02/18 22:43
はじめまして(にや)
同じくウェブリでブログを書いているものですが、前からコメント欄のニックネーム部分が随分左に寄っているのがとても気になっていました(しょぼ)
が、この記事を読んでいじってみたら悩みも解決(すき)!
コメント部分が広くなってとても満足しています(にや)

とても分かりやすい記事をありがとうございました(ぺこ)
シリーズ物になっているようなので、これからもCSS編集の参考にさせて頂きたいと思います(わら)
ユーリル
2008/02/21 21:46
ユーリルさん、いらっしゃいませ(ん)

オリジナルなブログにしたいなぁってはじめたCSS編集なんですが、
それをうちなりにまとめていってる記事です。
ホント初歩的なことしか書いてませんが、少しでもお役に立てたようで何よりです(にこ)

シリーズものといってもいつまで続くか…(あせ)
でも、しばらくはぼちぼちと増やしていくつもりでいます。
でも、あんまり期待しないでね( ・ノェ・)コッチョーリ

それではまた|ω・)ノ

mairis
2008/02/22 17:57

コメントする help

ニックネーム
本 文

あいさつ

ようこそ!AWA's Life へ
mairis です(oゝω・)ノ゚・:*☆
Beer飲みながら
パンヤ楽しんでま〜す♪
合言葉は (ひょえ)(@びーる)

ブログ内を検索♪

"AWA's Life"で探しもの?
キーワード検索はこちら♪
Powered by Google


ブログのカスタマイズ

CSS編集や小技などで
ブログをカスタマイズしちゃお

     ◆  ピックアップ  ◆
CSS編集の記事はこちらから
  ・ ブログのレシピ♪

CSS編集の時あると便利かも
  ・ CSS編集で使う文字列集
  ・ CSSのエラーチェック
  ・ Web セーフカラーチャート

emo [エモ]