横幅の広げ方:サイドバー表示にすると狭いと感じる方へ

新機能追加で記事ページにもサイドバーが表示できるようになったのは
嬉しいんですけど、ちょぉ~っと画面がごちゃごちゃしすぎかな?
と、思いまして横幅を広げてみました。

自分もやってみたいという方は、以下をご覧になってやってみて下さいね。
CSS編集画面で行います。

/*----------------------------------------------*/
/*            共通スタイル */
/*      (トップ、月別、テーマ別、記事ページ共通) */
/*----------------------------------------------*/
body{
}

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

/* カウンタ領域 */
#counter{
}

上記の赤字の部分を書き足します。(半角です)
これが、横幅の指定になるのですが、元が700pxだったので私は780pxにしました。
これは、勿論自分の好きなように1px単位で指定できます。
%指定もできるのですが、そうすると画面の大きさの何%という表示になりますので、
ご覧になる方の画面の大きさによって変わってきますので、レイアウトが崩れたりもします。
なので、大きさで指定したほうが、いいのかな、と。

/*----------------------------------------------*/
/* トップ、月別、テーマ別ページ */
/*----------------------------------------------*/

/*---------------- タイトル(大) ----------------*/
#banner{
/* 包含要素を相対位置指定できるようにします */
background-position:center;
}

/* タイトル領域内のアンカー */
#banner a{
}

/* タイトルテキスト */
#banner h1{
/* タイトル領域内での位置を指定します */
position:absolute;
left:40px;

}

最初の設定で横幅を変えると、トップページ上部のbannerの写真がサイドによってしまうものがあります。
(プレーンなものや、テクスチャは横幅にあわせて広がってくれます)
そのままでもいい方は、次の設定はしなくてもOKです。
私は、ちょっと気になったので、bannerをcenterに指定しました。
(leftやrightにも、指定できます)
そうすると、タイトルもずれてしまうので、タイトルテキストも「左から40px」の位置に指定しました。
(ここも1px単位で指定できます)
(上記赤字参照)

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

/* 見出し */
#contents #postlist h2{
}

/* 一覧ヘッダセル */
#contents #postlist th{
}

さて、このままだとトップページの新着記事の部分が前のままなので、ここも幅を変えます。
上記赤字の部分を、書き足します。
これは私が記事全体の幅を780pxにして、サイドバーが160pxなので、560pxにしました。

780-160-560=60pxがマージン分のようです。

570pxにしたらサイドバーが落ちてしまったので560pxにしましたが、
560~570pxの間は試していないので、ディテールにこだわりたい方は(笑)1px単位で試して
みてくださいね。

/*----------------------------------------------*/
/* 記事ページ */
/*----------------------------------------------*/

/*---------------- タイトル(小) ----------------*/
#subbanner{
/* 包含要素を相対位置指定できるようにします */
background-position:center;
}


/* タイトル領域内のアンカー */
#subbanner a{
}

/* タイトルテキスト */
#subbanner h1{
/* タイトル領域内での位置を指定します */
position:absolute;
top:4px;
left:40px;

}

と、いうわけで記事ページのbannerもcenterに指定し、タイトルテキストのタイトルを
「トップから4px、左から40px」の位置に指定しました。
これも、お好みでど~ぞ。

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

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

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

一つ上の設定画面を下にスクロールすると上記の画面が出てきます。
赤字部分を書き足すと、記事ページの記事部分の幅が広がります。
私は、トップページの新着記事の幅と同じ560pxにしました。

そして、コメント欄の幅も広げたかったので・・・・・
/* フォーム フィールド */
#blog input.txt,
#blog textarea{
}
/* コメント欄の幅調整 */
#comment TABLE .cont {
WIDTH: 75%
}
#comment TABLE .sub {
WIDTH: 25%
}

ず~っと下のほうにスクロールし、トラックバック、コメント領域を設定する画面の一番下にあるフォームフィールドの下の部分に、上記赤字の部分を書き足しました。

以上が、私がCSS画面で編集した部分です。
いじっているうちに、めちゃくちゃになってしまったら、初期設定に戻す機能が付いてますので、
それで、一度リセットして、やり直してみてくださいね。

※その後、全体の横幅を800px、Topの新着記事の幅と記事ページの記事の幅を580pxに変更しました。(2005.04.10)

※3カラム(左右)に変更したい方は、記事部分の幅を広げるために書き足した
  width:560px;を、また削除してくださいね。
 そうしないと、左右に振り分け3カラムに設定してもなりません。
 横幅から全て設定しなおせば別ですが、記事の幅指定だけ解除するのが
 一番簡単だと思います^^。(2006.07.19)

※またまたその後、全体の横幅を820px、記事ページの記事の幅を600pxに変更しました。(2008.04.22)



"横幅の広げ方:サイドバー表示にすると狭いと感じる方へ" へのコメントを書く

お名前
メールアドレス
ホームページアドレス
コメント