こんにちは、ほくほくです。
今日は、ブログデザインを変更するお話。
それでは、いよいよCSSの編集です。
今回はまず、ブログのページ幅を広げてみましょう。
ここで使用するのは、Seesaaブログの「Green Leaves(両サイドバー)」テンプレートです。
まずはデザインの一覧からこのテンプレートを自分のブログに追加し、テンプレート名のリンクを押して下記画面を表示しましょう。
ここで「プレビュー」ボタンを押すと、現在のテンプレートをベースとした画面が表示されます。
このページ幅を広くするのが、今回の目的。
ランキングクリック＆応援、よろしくお願いします
そのやり方ですが、CSSの編集画面で“#container”と書かれている部分を探します。
見つけたら、その中の“width:800px;”と書かれている部分を“width:1000px;”に書き換えてみましょう。
これで、ページ全体の幅が1000pxに広がります。
CSSの編集画面で「プレビュー」を押してみると・・・
はい、こうなりました。
・・・変ですか？
変ですね。
どうしてこうなってしまうかというと、ページ全体の幅と、ブログコンテンツの幅が違っているからです。
今はこんなふうになっています。
ページ全体の幅は1000pxに広がりましたが、ブログコンテンツの幅は800pxのまま。
そしてコンテンツが左側に寄っているので、右側に200pxの空きが出来ている状態です。
ちなみに画像は、後に説明しますが、ページ全体の真ん中にくるように設定されているため、やはり800pxのままで、両側に100pxずつの隙間が表示されるようになっています。
これらを、今後設定していきます。
さて、以降の設定は次回にまわし、ここではページ幅について少し説明します。
ブログのページ幅は、基本的に800px程度の幅のものが多いようです。
これは、パソコンの画面の解像度が800×600のものが多かったためで、これ以上の幅のページにしてしまうと、画面上一度に表示しきれなくなってしまうからです。
画面解像度を越えたページ幅の場合、ブラウザに横スクロールバーが表示されてしまいます。
でも最近のパソコンでは解像度はもっと高くなっているため、800pxでは少し物足りない気がしたのが、ほくほくの今回のデザイン変更の理由でした。
ちなみに、ほくほくは3年前のPCを使っていますが、画面解像度は1400×1050です。
ただ、ほくほくの仕事先にある安いリースPCの画面は、未だに1024×768が最大解像度となっています。
なので、今回ブログのページ幅を変えるにあたり、1024×768の画面でも見ることができるよう、1000pxにしています。
ブログを見る人の環境は様々なので、見る人を意識したデザイン変更が必要です。
（以下、次回です）
＜CSS編集関連記事＞
◆CSSでブログのデザインを変えてみよう！
◆①CSS編集の基本
◆②ページ全体の幅を広げる
◆③右サイドバーの幅を広げる
◆④左サイドバーとメインの幅を広げる
◆⑤背景画像を変更する
◆⑥記事コンテンツに枠線をつける
◆⑦サイドコンテンツに枠線をつける
＜参考書＞
◆スタイルシート辞典
◆HTMLタグ+スタイルシート辞典ちび
▼▼▼ 年利20%以上の簡単FXシステムトレード『o(^0^)o ほくほくFX』 ▼▼▼
◆投資資金の稼ぎ方タグ：ブログ
いつも何時も村ポチありがとう
お返し村ポチやんか～～～
明日も 来ます 宜しくやんか～～～
寛助さん、いつもありがとうございます。
今日も遊びに行ってきましたよ～