先日公開致しました、ちゃログのテンプレートカスタマイズ講座。
早くもヘッダ部分をご変更下さった方がたくさんいらっしゃり、編集した者としては嬉しい限りです＾＾〃

ご変更下さった方のブログを拝見して、「ご説明が足りなかったかも知れない」と思った事について、
「号外」という形で２回に分けてまとめてみます。

中には次のステップでご説明しようと思っていた内容も含まれておりますので、
少し分かりにくい部分があるかと存じますが、ひとつずつゆっくり進めて頂ければと思います。

選択したテンプレートの違いは、そのまま「CSSの内容の違い」という事が言えます。

例えば、最近リリースした「China」と、一番シンプルな構造のブルーやピンクの「ver1」では、
ブログ全体の幅や、文字色、背景色、すき間の付け方等など、
ほぼ全てが違っていると考えて頂いてよいでしょう。

ですので…、
「カスタマイズする元として選択したテンプレートによって、
用意する材料が異なる」
という事をご理解下さい。

ヘッダの画像の幅を調べる

ほとんどのテンプレートは上から下まで同じ幅の構造をしていると思います。
ですので、ヘッダ部分の画像のサイズを調べたい時には、全体の幅を調べれば、
大体分かるという事になります。

少し一緒に見ていきましょう。

メニューの「スキン」を選択します。

左メニュー、スキン変更・確認の「スキン編集」をクリックすると…、

第１回目でご説明した、「cssの中身」でご説明した
「色分けされたレイアウトの構造の図」は覚えていらっしゃるでしょうか。
もう一度表示しますので確認してみましょう。

思い出して頂けたでしょうか？＾＾
背景を変える、黄色で表している「div id="header"」の下に、
図の白で表している「div id="wrapper"」がご覧頂けると思います。
「div id="wrapper"」は表示されるブログの一番最初に敷かれる「下敷き」となります。

ちゃログで使用している記述方式は…、
ホームページで使われている言葉であるxhtmlを下敷きにし、
そのノートの中をパーテーションで区切り、各部で様々なエフェクトをかけて表示させている。
そんなイメージになります。
普通はノートの大きさをはみ出して書いたりしないのと同じような感覚です。

・xhtmlの下敷きの上に、
・「div id="wrapper"」というノートを載せ、
・「div id="header"」という区切りを作って、その中に要素を入れて表示させる。
普通はノートをはみ出して書いたりはしないから、
・「div id="header"」の中で表示させる事が出来る幅の上限は、特別な事がない限り、
ノートの大きさである「div id="wrapper"」と同じである。

これらの事から、
ちゃログのテンプレートのヘッダの背景画像の幅を知るには、
「div id="wrapper"」を調べれば分かる。
と言う事になるのです。

いかがだったでしょう。
もしかしたら文字だけでは分かりにくいかも知れませんので、
最後に実際にいろんなテンプレートのCSSの「div#wrapper"」部分を表示して、
それぞれの違いを見て頂いて今回の号外を終わりたいと思います。

上の３つだけを取ってみても意外と違うものですよねぃ＾＾

次の号外は背景の色と文字の色について「見え方」を中心に、
一緒に考えていきたいと思いますので、よろしくお願いしますm(_ _ )m