|
ウェブリブログで左右の2カラムにするとトップや記事ページのメイン部分が 狭くなって圧迫感があります。 今回はブログ全体の幅をCSS編集で広げてみますね。 ブログ全体の幅を広げてみよう ♪ ![]() まずはブログ全体の幅を広げます。 CSS編集にも少し慣れてきた頃ではないかと思うので、 今回から入力前の文は省略します。 入力する場所は 『/* コンテナ(広告・フッタを除くメイン領域) */』 『 background-color:#FFEEEE; 』の後に次の文字列を入力します。 width:800px; ※ここでは横幅を800pxで設定しますが、お好みで『 width 』の数値を変更してください。 緑の文字列が以前デザインを指定した命令文になります。 『コンテナ領域の背景色』を設定していない場合は 『 #container{ 』の後に文字列を入力してください。 A 『 共通スタイル 』 CSS 全体Map /*----------------------------------------------*/ 入力(貼り付け)が出来たら、設定ボタンをポチッと押して完了です(ういんく) これでブログの幅が広くなりました♪ ※この設定でブログ全体の幅が『 800px (ピクセル)』になりました。 デフォルトに合わせて、以前設定したタイトル画像の幅は『 700px 』でした。 ブログの幅に合わせるために『幅 800px 』のタイトル画像に置き換えました。 設定するブログの幅に合ったタイトル画像を使用します。 参照 CSS(スタイル編) 第1回 タイトル画像を変更する♪ 他の部分も広くしてみよう ♪ ![]() 上の設定でブログの幅が広がりましたが、各パーツは以前のままの大きさです。 そこで、他の部分も見栄えがいいように広げてみましょう。 トップページのリストの幅入力する場所は 『/*------------------ 新着記事 ------------------*/』 『 #contents{ 』 の後に次の文字列を追加します。 width:580px; ※お好みで『 width 』の数値を変更してください。 B 『 トップ、月別、テーマ別ページ 』 CSS 全体Map /*------------------ 新着記事 ------------------*/ 記事ページ本体部分の幅入力する場所は 『/*-- ブログ(記事+トラックバック+コメント) --*/』 『 #blog{ 』 の後に次の文字列を追加します。 width:580px; ※お好みで『 width 』の数値を変更してください。 C 『 記事ページ 』 CSS 全体Map /* ログインアンカー */ トラックバック、コメント領域のパーツうちのデフォルトでは該当する文字列が無かったので以下の文字列を新規で入力ました。 入力する場所は下のほうで追加しています。 【 コメント入力欄の幅 】 /*追加 コメント入力欄の幅*/ #blog #comment .cont{ width:400px; } 【 トラックバックとコメントの幅 】 /*追加 トラックバックとコメントの幅*/ #blog #trackback table, #blog #comment table{ width:560px; } ※ 緑の文字列が以前デザインを指定した命令文になります。 ※ /* ← 今回この中の文はうちのメモ書きです→ */ 特に入力する必要はありません。 ※ お好みで『 width 』の数値を変更してください。 C 『 記事ページ 』 CSS 全体Map /* フォーム フィールド */ 入力(貼り付け)が出来たら、設定ボタンをポチッと押して完了です(ういんく) これで各パーツの幅も広くなりました♪ 追記コメント欄の高さを変える記事を書きました。 参照 第9回 コメントの入力欄の高さを変える♪ 今回の設定でブログの全体の幅が広がって圧迫感がなくなりました♪ 次回は細かい部分に目を向けてみたいと思います。 |ω・)ノシ See you♪ |彡 サッ ![]() 【 CSS編集(スタイル編) 】 ・ オリジナルデザインのブログを作ろう♪ ・ 第1回 タイトル画像を変更する♪ ・ 第2回 背景の画像と背景色を変更する♪ ・ 第3回 アイコンを変更する♪ 〜 コンポーネント領域 ・ 第4回 アイコンを変更する♪ 〜 ページヘッダ部分 ・ 第5回 トラックバック、コメント領域も変えてみよう♪ ・ 第6回 一覧の画像と罫線のサイズと色♪ ・ 第7回 ブログの幅を広げてみよう♪ 現在地 ・ 第8回 いろんな場所の線のデザインをいじってみよう♪ ・ 第9回 コメントの入力欄の高さを変える♪ ・ 第10回 コメントを区切る罫線のデザイン♪ (要考察) 【 CSS編集(フォント編) 】 ・ ブログのフォントのデザインを変えてみる♪ ・ 第1回 トップページのフォント♪ 『タイトル〜プロフィール』 ・ 第2回 トップページのフォント♪ 『新着記事一覧』 ・ 第3回 リンクの付いているフォント♪ 【再編集】 ・ 第4回 コンポーネント領域ののフォント♪ ・ 第5回 記事ページのフォント♪ 『タイトル 〜 記事題名』 ・ 第6回 記事ページのフォント♪『 関連テーマ 』 【 ブログ編 】 ・ ウェブリブログでパンヤの絵文字〜フリースペースの活用♪ ![]() |
| << 前記事(2008/02/09) | トップへ | 後記事(2008/02/10)>> |
| タイトル (本文) | ブログ名/日時 |
|---|---|
ブログカスタマイズ
このブログのカスタマイズ履歴を記録しておきます(順不同) ...続きを見る |
馬耳湯風(ばじとうふう) 2008/02/19 14:31 |
| 内 容 | ニックネーム/日時 |
|---|---|
(メ●´_________________`●)ビローン |
癌ばすた〜 2008/02/10 03:57 |
癌ちゃん、いらっしゃい(わら) |
mairis 2008/02/10 13:26 |
はじめまして。 |
Yashiro 2008/02/18 21:08 |
Yashiroさん、いらっしゃいませ(ん) |
mairis 2008/02/18 22:43 |
はじめまして(にや) |
ユーリル 2008/02/21 21:46 |
ユーリルさん、いらっしゃいませ(ん) |
mairis 2008/02/22 17:57 |
| << 前記事(2008/02/09) | トップへ | 後記事(2008/02/10)>> |