これから徐々に細部の設定へと進んでいく上で、各欄の重なりを知っておくと、設定がしやすくなります。
今回は大まかな重なり具合を紹介したいと思います。
まずは下の画像をどうぞ。

以前までイジッていた「body」が最背面です。
そして次回に紹介しようと思っているところが「#container」です。
「#container」は「body」の１つ上の層ですね。
「body」がページ全体だとしたら「#container」は、ブログ内全体ということになるのでしょか。

その上に「#banner」、「#content」、「#links」、「#links2」、「#footer」となります。
「#banner」はブログタイトルの背面、「#content」は記事が載るところ（正確には違う）、「#links」は左サイドバー、「#links2」は右サイドバー、「#footer」はページ下の飾りのようなものです。
サイドバーがどちらか片方の場合は「#links2」は存在せず、右サイドバーだったとしても「#links」となります。（たぶん）

まとめ

この重なりが分かっていれば、各欄の幅を設定した時に、とっても分かりやすいと思います。
もし「#container」に幅設定をしていたとして、「#links」や「#content」の幅が「#container」の幅より大きくなってると、正しく表示されなく場合があります。
そんな時、それぞれを「background-color」で色設定してから幅設定を行うと、思い通りの幅設定ができるのです。
幅設定の説明にはまだまだ不十分ですが、今回のポイントは重なりということで、このへんで終わりたいと思います。

次回は「#container」で枠の設定をしてみたいと思います。
枠の設定にもたくさんの種類があるので楽しいですよ
それではお楽しみに

今回はスタイルシートを設定する上で、これをしらなきゃ何もできないってことを紹介します。

通常、記事を書く時は、「記事投稿」を選択されますが、テンプレートをカスタマイズする時は、「管理画面TOP」から行います。
テンプレートを変更される時もそうですよね。
テンプレートを自分好みの設定にカスタマイズするには「ブログの設定」から「テンプレート」、「カスタマイズ」へと進みます。
すると「スタイルシート」、「トップページ」、「個別記事」、「アーカイブ」とそれぞれソースを入力する画面へと変わります。
下の画像を参考にしてください。

そこでそれぞれの設定を行うのです。
設定し終わったら登録をクリックして完了です。

ですが、変更する前にはそれぞれ変更するソースをコピーして保存しておきましょう。
万が一ミスった時に保存していないと、すべてが水の泡となり、1から設定し直さなければなりませんからね。
慣れない内はバックアップは必須です。

バックアップの仕方は、それぞれの設定欄ごとにします。
コピー&貼り付けの仕方は、下の画像を参考にして説明します。

まず、保存する設定欄のどこでもいいのでクリックします。
次にキーボードの「Ctrl」と「A」を同時に押します。
（コツとしては「Ctrl」を押しながら「A」を押すかんじです。）
するとすべての文字が選択されてる状態となります。

つぎにその状態で今度は「Ctrl」と「C」を同時に押します。
画面上では変化はありませんが、これでコピーされました。

次にテキストエディタソフトに貼り付けます。
※ソフトにはフリーのものや市販のものもあるそうなので、使いやすそうなものを使用してくださいね。
テキスト内をクリックして、今度は「Ctrl」と「V」を同時に押します。
コピーした文章がすべて貼り付けられるはずです。
あとは保存をして完了です。

まとめ

文章にすると長～くなりますけど、することは簡単ですよね。
これで設定の方法は以上です。
次回から早速設定をしていきましょう。

最後に一言

テンプレートの変更や、オリジナルデザインをミスって初期のテンプレートに戻したとしても、今まで書き綴ってこられた記事は消えません。
ご心配なく。

ブログとは

まずはブログの構成を簡単におさらいしてみます。
ブログはトップページ、個別記事ページ、アーカイブページでひとまとめになっています。
トップページはみなさんがブログを始められる時に設定されたURLのページになります。
個別記事ページやアーカイブページは、記事を書くごとに追加されていきます。

スタイルシートとは

スタイルシートとはブログのデザインだと思ってください。
デザインには背景、文字、色、大きさなどの設定があります。
それらを各ページごとに設定するのは面倒ですよね。
そんなときに、デザインだけを別に設定しておけば、各ページに反映するのはとっても楽ですよね。
ぞくにCSSと呼ばれるモノが一般的です。

定義方法

CSSは セレクタ、属性、値の3つから成り立っています。

セレクタ { 属性 : 値 ; }

セレクタにはID名やCLASS名などが入ります。
属性と値は : と ; で区切り、 { と } でひとまとめにします。

（例）
#container{
width : 800px ;
}

なにやらダラダラと英語で書かれていますが、難しく考えることはありません。
（例）を元に説明していきます。

#container はID名で、ブログ全体の設定を示しています。
ここがセレクタですね。

{ は、「このセレクタの属性や値はここからですよ」ってことです。

width は横幅の設定を示しています。
ここが属性です。

: は区切りです。
簡単に言うと、「〇〇は」の「は」ってとこでしょうか。

800px は値ですね。
値は日常ではm（メートル）や㎝（センチメートル）をよく使いますが、PCではpx（ピクセル）がよく使われるので、この先も値はpxで説明していくこととなるでしょう。

; も区切りです。
簡単に言うと、「〇〇です」の「です」ってとこでしょうか。

} は、「このセレクタの属性や値はここまでですよ」ってことです。

ですから日本語でムリヤリ訳してみると、「このセレクタの横幅は800pxです」ってことですね。
お解かりになられましたでしょうか？
まぁここは追々各セレクタごとに詳しく説明していきます。

ID、CLASSとは

ブログのデザインといっても、すべてが同じ設定ではないですよね。
「ブログタイトルの背景だったらこんなかんじに」、「記事の背景だったらこう」っていうように設定しますよね。
そんなときにIDやCLASSといった名前があると区別できて分かりやすいです。

IDは # （シャープ）で、CLASSは . （ドット）を名前の頭に付けて定義します。
IDとCLASSの違いはというと・・・小難しいのであえて説明はしませんが、どっちも名前ってことです。

まとめ

いかがですか意味解りましたか
長々と説明してきましたが、まだすべてを覚えようとしなくても構いません。
この先いろいろデザインの設定していく上で理解していけば、何も問題はありません。
また、僕の説明がすべて正しいとも限りませんからね。
これはあくまで僕の理解の仕方なのですから。

次回は滋賀咲くBlogの設定画面を元にオリジナルデザインの登録の仕方を説明したいと思います。