GINPRO / SQLの窓と銀プログラマ

★ ブラウザは最大化
★ デスクトップ解像度は幅 1280px

▼ 最初の状態です



ここから、CSS を３箇所変更します。

1) #container の width を 1263px に変更
2) #content の width を 940px に変更
3) .blog に margin-left: 20px を追加

これをするだけで、1280px で最大化しているブラウザの中でいっぱいいっぱいにブログを使用できるようになります。この際、右サイドは 300px に初めから設定されているのでバナー等を表示するのに良いサイズとなっています。

▼ 一番広い状態です



1263px と 940px を同数減らせば、表示が中央よりになります。その際は margin-left: 20px は必要無い感じになるでしょう

1263px だと、情報をたくさん載せたい場合にはいいですが、文章が主体の場合はもう少し幅を狭くするといいと思います

▼ 少し調整した結果です


最大表示 


1) #container の width を 1100px に変更
2) #content の width を 777px に変更
3) .blog から margin-left: 20px を削除


テキストサイズの調整

初期状態ですと、フォントのサイズが少し小さいようです。フォントサイズはいろいろな場所で個別に設定できますが、ここではほぼ全ての要素の初期値的な reset という場所があったのでそこで変更しました。

/* reset */

div,
span,
iframe,
p,
blockquote,
cite,
h1,
h2,
h3,
h4,
h5,
h6,
img,
dl,
dt,
dd,
ol,
ul,
li,
form,
label,
article,
aside,
figcaption,
figure,
footer,
header,
nav,
section,
time,
mark,
input,
textarea {
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  vertical-align: baseline;
  font-weight: normal;
  font-style: normal;
  font-size: 17px;
}

テキストの色の変更

元は濃い灰色だったので、黒に設定しました。場所は、.blog .text で、color: #000000; としました。


最大表示 

実際のブログへのリンク


既存のデザインをそのまま同様にコントロールしたい場合

古いタイプのデザインですと、なかなか調整が難しいかもしれないので、現在のデザインがやっている大元の設定を一つ DIV で囲んでそこに指定します。

1) コンテナ(id=container)全体を div で囲んで、以下の CSS を設定する

    position: relative;
    margin: auto;
    width: 1263px;

コンテナの終わりは、<!-- マーク --> で予想される </div> の直前に書いておいて、Google Chrome のデベロッパーツールの Elements で開いて確認する。デベロッパーツール では、階層構造になっているので確実に特定できます。

ディスプレイの解像度は 1280px と言う前提で、1263px と言うのは、ブラウザを最大化してスクロールバーの横幅を差し引いた大きさです。

margin が auto なのは、ブラウザ内の表示を縮小したり、より大きい解像度で表示された場合に中央にコンテンツを表示する為です。

SimpleDホワイト(右サイドバー) では、#container に以下のような設定がされており、幅以外(幅は今回設定したものです)はだいたいにおいて同じ結果をもたらしています。

#container {
    width: 1100px;
    position: relative;
    height: auto !important;
    min-height: 100%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}