今回はCSSを編集してブログの大きさ,背景色を編集します。
はじめに
下に並んでいるのは、今回の記事でCSS編集の対象となる要素です。body{ }
#wrapper { }
#container { }
#content { }
#main { }
#sidebar { }
なんのこっちゃって感じですね。 これらはWebページを構成する骨組みの名前みたいなもんです。 私のブログで表現するとこんな感じ。
・各要素が対応するエリア
今回の記事は、こいつらの横幅とか背景色を自由に変更しようということになります。
※bodyと#wrapperは仕組み,構造としては別の要素となりますが、どちらを編集しても表示されるWebページは同様となります。 ややこしいですが、まあそういうもんだと思ってください。
「width:」と「background-color:」
各要素の横幅を変更する
「width:」の値を変更することで、要素の横幅を変更することができます。ブログ全体の幅を変更する
#container { }の中のwidth:の数値を変更します。※ブログ全体の幅、というとbody,#wrapperが該当しそうなものですが、実際は#container { }になります。 body,#wrapperは#container { }の外側、いうなれば余白のようなものになります。
ちなみに、推奨されるWebページの幅についてですが、面白い考察,検証をされているブログ記事がありましたのでリンクを置いておきます。
プロモニスタ―サイトデザインの横幅の基準はこれだ!
一読の価値ありです。
上の記事を参考に、私はこのブログの#container { }=ブログ全体の幅を
width: 1080px;
にしました。
記事本文,サイドバーの横幅を変更する
さっき図の通りなんですが、#main{ }が記事本文、#sidebar{ }がサイドバーの要素とります。ここの「width:」を変更すればそれぞれの横幅を変更することができます。しかし、#mainと#sidebarの合計サイズは#container { }のサイズよりも小さくなるように設定しないと、デザインが崩れてしまいますので注意が必要です。margin:とpadding:について
margin:を設定すると要素の外側に、padding:を設定すると要素の内側に余白を取ることができます。何分ややこしい話なので、詳細は別途Web検索してもらえると助かります。 予め設定されている場合、自分で数値を変更してみると分かりやすいですよ。背景色を変更する
「background-color:」の値を変更することで、各要素の背景色を変更することができます。ちなみにこのブログの場合だと、
body {
background-color: #F0EBEB;
}
としております。 これで全体の背景色が変更できるわけですね。
詳しい色の指定の仕方は別途調べてもらえると分かりやすいかと思いますが、Googleで「#000000」と調べるとこんな画面が出てきます。
ここでアイコンをぐりぐりすると色とカラーコードが表示されるので、それをコピペすればO.K.ですよ。
コメント
このブログにコメントするにはログインが必要です。
さんログアウト
この記事には許可ユーザしかコメントができません。