経済指標flg_JPN.jpg
日本
flg_US.jpg
米国
flg_EU.jpg
EU
flg_UK.jpg
英国
flg_AUS.jpg
豪州
flg_NZ.jpg
NZ
雇用統計6/28(金)7/5(金)
政策金利7/2(火)
GDP
前月以前の経済指標スケジュールはこちら

2008年04月27日

CSS編集A:ページ全体の幅を広げる

header_12

こんにちは、ほくほくです。

今日は、ブログデザインを変更するお話。

それでは、いよいよCSSの編集です。
今回はまず、ブログのページ幅を広げてみましょう。


ここで使用するのは、Seesaaブログの「Green Leaves(両サイドバー)」テンプレートです。

まずはデザインの一覧からこのテンプレートを自分のブログに追加し、テンプレート名のリンクを押して下記画面を表示しましょう。

design_20080413_02.JPG

ここで「プレビュー」ボタンを押すと、現在のテンプレートをベースとした画面が表示されます。

design_20080412_01.JPG

このページ幅を広くするのが、今回の目的。

ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)
にほんブログ村 為替ブログへ ランキングクリック&応援、よろしくお願いしますexclamation にほんブログ村 為替ブログ FX システムトレード派へ
ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)

そのやり方ですが、CSSの編集画面で“#container”と書かれている部分を探します。

design_20080413_03.JPG

見つけたら、その中の“width:800px;”と書かれている部分を“width:1000px;”に書き換えてみましょう。
これで、ページ全体の幅が1000pxに広がります。

CSSの編集画面で「プレビュー」を押してみると・・・

design_20080413_04.JPG

はい、こうなりました。

・・・変ですか?

変ですね。

どうしてこうなってしまうかというと、ページ全体の幅と、ブログコンテンツの幅が違っているからです。

今はこんなふうになっています。

design_20080413_05.JPG

ページ全体の幅は1000pxに広がりましたが、ブログコンテンツの幅は800pxのまま。
そしてコンテンツが左側に寄っているので、右側に200pxの空きが出来ている状態です。

ちなみに画像は、後に説明しますが、ページ全体の真ん中にくるように設定されているため、やはり800pxのままで、両側に100pxずつの隙間が表示されるようになっています。

これらを、今後設定していきます。



さて、以降の設定は次回にまわし、ここではページ幅について少し説明します。

ブログのページ幅は、基本的に800px程度の幅のものが多いようです。

これは、パソコンの画面の解像度が800×600のものが多かったためで、これ以上の幅のページにしてしまうと、画面上一度に表示しきれなくなってしまうからです。
画面解像度を越えたページ幅の場合、ブラウザに横スクロールバーが表示されてしまいます。

でも最近のパソコンでは解像度はもっと高くなっているため、800pxでは少し物足りない気がしたのが、ほくほくの今回のデザイン変更の理由でした。

ちなみに、ほくほくは3年前のPCを使っていますが、画面解像度は1400×1050です。

ただ、ほくほくの仕事先にある安いリースPCの画面は、未だに1024×768が最大解像度となっています。

なので、今回ブログのページ幅を変えるにあたり、1024×768の画面でも見ることができるよう、1000pxにしています。

ブログを見る人の環境は様々なので、見る人を意識したデザイン変更が必要です。

(以下、次回です)

<CSS編集関連記事>
  ◆CSSでブログのデザインを変えてみよう!
  ◆@CSS編集の基本
  ◆Aページ全体の幅を広げる
  ◆B右サイドバーの幅を広げる
  ◆C左サイドバーとメインの幅を広げる
  ◆D背景画像を変更する
  ◆E記事コンテンツに枠線をつける
  ◆Fサイドコンテンツに枠線をつける

<参考書>
  ◆スタイルシート辞典
  ◆HTMLタグ+スタイルシート辞典ちび

▼▼▼ 年利20%以上の簡単FXシステムトレード『o(^0^)o ほくほくFX』 ▼▼▼
1日わずか15分!半年で運用利回り17.8%の簡単システムトレード
  ◆投資資金の稼ぎ方
タグ:ブログ
posted by o(^0^)o ほくほく at 10:52 | Comment(2) | ブログカスタマイズ | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
こんにちは、
いつも何時も村ポチありがとう
お返し村ポチやんか〜〜〜
明日も 来ます 宜しくやんか〜〜〜
Posted by 寛助 at 2008年04月27日 12:50
o(^0^)o――――――――――――――――
寛助さん、いつもありがとうございます。
今日も遊びに行ってきましたよ〜
Posted by ★ ほくほく o(^0^)o at 2008年04月29日 00:47
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。