テンプレの基本構造
ここではFC2blogテンプレートの基本的な構造を説明します。 色々個性的なテンプレートがありますので、 当然全てが同じ構造ではないですが、 ブログテンプレの種類 にあるようにテンプレートには一定の類型があります。 ですから「基本的に」同じ部分・似かよった部分が多くあります。
というわけで、ここではその「基本的に同じ部分」「似かよっている部分」 に注目して記事をまとめたページだと考えてください。
htmlファイルとcssファイル
まずあなたのidで fc2blog(別窓で開きます) にログインしてください。 ページ上部右側にある「ブログデザインの設定」をクリックして、 あなたがダウンロードしたテンプレートの一覧を表示してください。 「修正」をクリックするとhtmlとcss(スタイルシート)のソースが表示されます。 このわけのわからない英語・日本語・記号のかたまりをソースといいます。 ソースとは、 言ってみれば「ここはカレンダーを表示しろ」「ここはピンク色に表示しろ」 という命令文の集まりです。 ですから、これらのソース(命令文)をいじくれば あなたの思い通りのブログが出来上がるというわけです。 この命令文について詳しく知りたい方は Academic HTML(別窓で開きます) 等を参照してください。
で、htmlファイル(上の方にあるソース)とは基本的にブログの骨組みの命令文で、 cssファイル(下の方にあるソース)はブログの見た目の命令文です。 だからカレンダーをなくしたいなど「骨組み」を変えたいときはhtmlファイルを、 文字の色を変えたいなど「見た目」を変えたいときは cssファイルをいじればOKというわけです。
プラグインに対応したテンプレートの場合はhtmlをいじらなくても 簡単にカレンダーを表示したり非表示にしたりできます。 詳しくはプラグインの使い方を参照してください。
blogの各部の名称
各部分の名前がわかればhtmlやcssのどこをいじれば良いかわかります。 テンプレートにより若干の違いはありますが、 ほとんどのテンプレートは 「ヘッダー」「メニュー(プラグイン)」「エントリー」「フッター」 の4つの部分に分かれています。
テンプレートの作者によっては各部分の名称が違ったりします。 例えば「メニュー部分」を「サイド部分」という名前にしていたり 「レフト部分」としていたりします。 これらは名前が違うというだけで基本的には 「メニュー(プラグイン)を表示する場所」であることには変わりはありません。
- ヘッダー部分
- blogのタイトル・説明文などがある部分です。
- メニュー(プラグイン)部分
- ここはカレンダーやプロフなど、 小さなユニットが集まって構成されています。 プラグインといわれるものは全てここに入ります。
- エントリー部分
- ここはblog管理人が書き込んだ記事が表示される 「エントリー部分」、 「ページ移動部分」、 「コメント表示部分」 など計7つのユニットが集まっています。
- フッター部分
- ここはfc2の広告やテンプレの情報などがあります。
blogの各部と、それに対応したhtml/cssファイル
当然上記のようなblogはhtml/cssというソース(命令文) によってなりたっていますから、 それぞれのソースにはblog各部分と対応している部分があるわけです。 カレンダーを消したい、 と思えばhtmlのカレンダー部分を削除すればOKですし、 エントリー部分の記事を囲んでいるワクをグレーから薄いブルーにしたいと思えば cssのエントリー部分の色を設定する部分を変えればOKというわけです。
プラグインに対応したテンプレートの場合はhtmlをいじらなくても 簡単にカレンダーを表示したり非表示にしたりできます。 詳しくはプラグインの使い方を参照してください。
ソースをよく調べてカスタマイズしよう
上記がテンプレートの超基本的な構成ですが、 思い通りにカスタマイズしたいのならばやはりhtml/cssの知識が必要です。 個人的にはhtmlの知識は div,table関連,dl関連,ul,ol,hn,p,span,a,img,br 等が使いこなせればOKだと思いますが、 cssの知識は多ければ多いほど良いと思います。
FC2blogは独自の変数を持っています。 htmlの知識がある人でもFC2blogのソースを見たら ワケのわからないタグがたくさんあるのでビックリするかもしれませんが、 これらはFC2内の テンプレートに関するヘルプ(別窓で開きます) に詳しく説明がありますので参照してみてください。
ほとんどのテンプレはdivでボックスを作り、 idやclassで場所を指定したり名前を付けたりしています。 そしてcssで「このclass内の文字は赤色にする」などと設定しているので、 「どこからどこまでがこのclassで指定された部分なのか」 を理解できればカスタマイズはずいぶんと楽になります。 面倒くさいでしょうけど、 一通りhtml/cssを学んだ後、 2･3の作者が違うテンプレートを1行ずつチェックしていけばかなりの知識が得られ、 思い通りのカスタマイズが可能になると思います。