ちゃログホーム » テンプレートカスタマイズ講座 vol.1 「テンプレート編集の予備知識」
いつもちゃログをご利用頂きましてありがとうございます。

ちゃログが全面的なリニューアルをしてから、およそ半年が経とうとしています。
システム的にも最近ようやく安定し、ユーザー数も順調に増え、
毎日のように更新して下さる方もたくさんいらして、
運営サイドでもほっと胸を撫で下ろしているところです。

ところでちゃログは、ユーザーご自身がブログの表示を変更する事が出来る機能を元々持っています。
ユーザーの方から「カスタマイズ方法を解説して欲しい」などのご意見も多数頂いておりましたので、
カスタマイズ方法をご説明する準備を少しずつ進め、今回の公開に至りました。

このテンプレート編集のページをお読み頂き、
是非ぜひ「オリジナルのちゃログ」にチャレンジして下さい。
ちゃログを予め用意されているテンプレートではなく、ご自身でデザインされたものを使用する場合、
少し専門的な知識を必要とします。

第１回目はその知識についての解説と、ブログの印象を大きく左右する、
ヘッダ部分のカスタマイズの基本についてご説明します。
出来る限り分かり易くご説明して参りますので、お時間の許す限りよくお読み頂き、実際にカスタマイズに挑戦し、
より楽しいブログにして頂けたらと存じます。

ちゃログとxhtmlとcss
ちゃログは誰でも簡単にブログが作れますが、
実はその中身は、意外にちょっと高度なwebの技術が使用されています。

ほとんどのホームページはhtmlという言語で書かれています。
ちゃログも同じような言語を使用していますが、
厳密に言うとhtmlではなくxhtmlで書かれているページになります。

xhtmlについての詳しいご説明は割愛させて頂きますが、
ちゃログはそのxhtmlファイルと見た目を調整する役割を担うcssの組み合わせで構成されています。
ちゃログでご自身がデザインされたものを使用する場合、 htmlファイルを変更するのではなく、
cssファイルを変更して「見た目としての変更」を行なって頂く形になります。

ちゃログの表示の基本構造
それではご一緒に、少しだけ「ちゃログの内側」に触れてみる事にしましょう。
1．メニューの「スキン」をクリックします。
2．左メニュー、スキン変更・確認の「スキン編集」をクリックします。すると…
上記のような、フォームの中に文字がたくさん書いてある画面に切り替わります。
実はこれこそがcssファイルそのものであり、
「この中身を変えると表示が変わる」という事になります。

少しだけ変えてみましょう
それでは実際に表示を変えてみる事にしましょう。
フォームのスクロールバーを下ろし、
/* Layout_Element
===========================================================*/
と記述してある部分を表示します。

その中に、「div#header」と書いてある部分があるのがお分かりになると思います。
スキンを選択しただけの標準の設定の状態では、
このように記述されていると思います。

これを読み解きますと…、

「背景色は白にします」
「ボーダーラインを、下側に、2pxの太さの青緑色のベタ塗りで引きます」
「高さ70pxにします」

と書かれている事になります。

表示のされ方は…。
このような感じになっていると思います。
この高さが70ピクセルという事になります。

それでは実際headerの内容を変更し、カスタマイズしてみる事にしましょう。
反転されている70と記述されている部分を変えていきます。
70を150に変えてみて下さい。
150に書き直したら、「保存」です。
すると…、
このように、ヘッダの部分が高くなっていればカスタマイズ成功です！
さて、最初のカスタマイズに成功したところで、
ちゃログで使用しているcssの構造を少し掘り下げてご説明しましょう。

cssの中身
ちゃログの見た目の中身は、下図のようになっています。

先に触れた、
/* Layout_Element
===========================================================*/
以降に該当する記述がされているのがご確認頂けると思います。
2カラム 3カラム
 
2カラムは、メニューとメインコンテンツの２段構造、
3カラムは、メニュー２段とメインコンテンツの３段構造になっています。
 
先ほど変更して頂いた部分は黄色い部分、headerでしたね。

header以外の部分も同じように変更してあげると表示方法が変わります。

ですがheader以外の部分は中身がものすごく細かく分かれていたり、特殊な方法が取られていたりで、
少し変えたくらいでは変わらない事や、逆に少し変えただけなのにものすごく変わる事なども多いので、
CSSの編集に慣れるまではheaderの変更に留めておいた方がよさそうです。

header以外の部分の具体的な変更については後日細かくお話しする予定ですので、
今の段階では「あぁ。。。そのような感じの作りなんだな」と頭の片隅に置いておいて下さい。
テンプレート編集についてお話しして参りましたがいかがでしたでしょうか。
ヘッダの高さが150ピクセルになったくらいでは物足りないかも知れませんね。
テンプレート編集第２回目以降で、実際にヘッダに背景画像を設定し、見た目を大胆に変えてしまいましょう。

それでは第２回目でまたお会いしましょう☆
テンプレート追加班 担当の〝はにぃびぃ〟でしたー 
カスタマイズ講座 1
カスタマイズ講座 2
カスタマイズ講座 3
カスタマイズ講座 号外1
カスタマイズ講座 号外2

click!