テンプレート講座第三回 
2005 11 05
Sat 11:52:09

◆ テンプレート講座  ◆ Comment 3  ◆ Trackback 0  ◆ edit.

第三回と言う事で、二回目の講座を深く掘り下げようと思いましたがちょっと趣を変えて「ブログに必要な機能」を考えて見たいと思います。
bonkさんの「ゼロから創るテンプレート」を見るとよく分かりますが、実際に創らなくてもその構造を知る事で、新たな発見が出来ると思います。
私の場合は「無いなら創れ」的な発想でINDEXシリーズが出来た訳ですが当然、基本となる部分はいつも考えています。
ブログを始める時にbonkさんの記事を知っていたら良かったんですが(^^;
では必要な機能とは・・・・
そこで箇条書きにして考えてみたいと思います。

・ブログタイトル。
・記事を見せる。
・ナビゲーション。
・コメント機能。
・編集機能。

まぁ〜この４つがブログで必要不可欠なモノでしょう。
そこから何を一番見て貰いたいかと考えると、「自分が書いた最近の記事」でしょうね。
「私はカテゴリーだな」と言う方も居るでしょうが、訪問する方が初めて目にするページ、それがトップページな訳ですよ。（記事リンクやトラックバックから来ないと仮定して）
そこで記事やらコメントやらブログパーツが一斉に目に入る一般のブログスタイルをどうしてもなじめない、ホームページのように「自分の顔」とも呼べるモノがほしいと考えると、効果的なのがトップページと記事部分を分ける事じゃないでしょうか。
そう考えると、二回目に続いて何が必要なのか見えてきますね。
・最近の記事一覧。
・最近のコメント。
・カテゴリー。
・記事表示ページへの入り口

ブログタイトルに関しては、別に文字でなくても画像を使うのであれば直接画像に書き込んだ方が見栄えが良いでしょう。
一番目の「最近の記事一覧」と言っても本文まで載せては意味がないのでここではタイトルと投稿日が分かればOK。
実は私個人的にトップに一番必要なモノは、「最近の記事一覧」だけだと思ってます。
でもそれには訪問者が一目で「どんな内容の記事なのか」を理解するタイトル付けが必要になってきます。（これは難しい問題）
それを補う形で「カテゴリー」が存在するとも言えます。
カテゴリーを見て「この人はこういう記事を書いて居るんだ」と、言うのが有る程度予測して貰えるからです。
そう考えると、この二つは必要だなと理解出来るでしょう。
それでは実際にFC2の変数を見てみましょう。
<div class="recent_title">▽ENTRIES</div>
<div class="recent_body">
<!--topentry-->
<!--same_day-->
<%topentry_year><%topentry_month>/<%topentry_day>
<!--/same_day-->
<a href="<%topentry_link>#CommentHeader" title="<%topentry_title>へ"><%topentry_title></a><br />
<!--/topentry-->
</div>

これが｢最近の記事｣のタイトルと日付を表示するFC2の変数達です。
ひとつひとつの変数については説明を省きますが、変数表を見ればある程度は理解出来るでしょう。（理解しなくてもこの形が一般的と覚えても良いですｗ）
｢何故これでタイトル一覧が出来るの？｣と言う方のために、ちょっとだけ説明。
<!--topentry-->〜<!--/topentry-->と言う変数に囲まれた部分をFC2は管理画面で｢最近の記事の表示数｣で設定した数だけ繰り返します。
そして｢％｣が付いている変数は、それを使う事でサーバーからそれに対応したデータが入ると言う仕組みです。

次にカテゴリーの表示変数を見てみましょう。
<div class="category_title">▽CATEGOEY</div>
<div class="category_body">
<!--category-->
<a href="<%category_link>" title="<%category_name>"><%category_name></a>　[<%category_count>]<br />
<!--/category-->
</div>

一応、｢最近の記事｣と同じ様な構造で創ってみました。
これも又　<!--category-->〜<!--/category-->に囲まれた部分を登録しているカテゴリー数だけ繰り返す事でカテゴリーの一覧が出来上がります。
（注意！後々のためにクラス名を付けています。）

実際に二回目で創ったトップページのHTMLに組み込んでみましょう。
<body>
<!--index_area-->
<div class="index_top">
<div id="blog_name">
<h1><%blog_name></h1>
<%introduction>
</div>
<div class="index_enter">
<a href="./?page0" title="記事一覧ページへ">ENTER</a>
</div>

<div class="recent_all">
<div class="recent_title">▽ENTRIES</div>
<div class="recent_body">
<!--topentry-->
<!--same_day-->
<%topentry_year><%topentry_month>/<%topentry_day>
<!--/same_day-->
<a href="<%topentry_link>#CommentHeader" title="<%topentry_title>へ"><%topentry_title></a><br />
<!--/topentry-->
</div>
</div>

<div class="category_all">
<div class="category_title">▽CATEGOEY</div>
<div class="category_body">
<!--category-->
<a href="<%category_link>" title="<%category_name>"><%category_name></a>　[<%category_count>]<br />
<!--/category-->
</div>
</div>

</div>
<!--/index_area-->

<!--not_index_area-->
〜 （この中は２カラムのタグが書かれてます）
<!--/not_index_area-->
</body>

これで取りあえずHTMLの方は完成です。
次にスタイルシートに加えたクラス名を設定します。
.index_top {
width:500px;
height:450px;
background: url(http://画像のアドレス○○.jpg) no-repeat top left;
}
.index_enter {
margin-left:auto;
margin-right:auto;
margin-top:10px;
text-align:center;
font-size:20pt;
}

h1 {font-size:18pt;}

#blog_name {font-size:12pt;}

.recent_all {
float:right;
margin:0px;
padding:0px;
width:50%;
text-align:left;
}

.recent_title {font-size:12pt;}
.recent_body {font-size:10pt;}

.category_all {
float:left;
margin:0px;
padding:0px;
width:50%;
text-align:left;
}

.category_title {font-size:12pt;}
.category_body {font-size:10pt;}

実際にはもっと色々な設定が必要かも知れませんが、これで左右に｢最近の記事一覧｣と｢カテゴリー一覧｣がトップページに表示されるでしょう。
後はこの配置を細かな設定を施す事で自分の考えた所に配置し、色や文字の種類などを設定する事でトップの構成を完成させます。
（注意！多分、このまま使っても配置が崩れたりどのブラウザでも同じように見えるとは限りません。）

大雑把な説明ですが、基本は以上です。
後は、好きなブログパーツを配置するなり、画像を使うなりしてトップデザインの完成になります。
詳しい設定などが知りたい場合は、質問に応じますが、まずは色々試してみる事が第一です。
色々と失敗して見る事が何より覚える早道です。
ちなみにクラス名・ID名に関して、タグ名やスタイルシートの属性名と同じ名前を決して付けない事だけを覚えておけばどのような名前でも構いません。

とまぁ〜今回は初心者には難しいかも知れませんね。
でもタグとかスタイルシートと言うものは、英語で書かれていますのでその単語の意味を理解する事で何を意味しているのか察しが付くと思います。
何を隠そう私自身英語は｢赤点人間｣ですので初歩的な英語だと思われます。(爆)
各々の｢決まり事｣と言うのは眺めているだけでも分かってくるものです。まずは諦めないでチャレンジして下さい。

ん〜三回目でトップページが完成してしまいました。(^^;
四回目は何を書きましょうか？(爆)

次回へ続く（不定期）

◆ ジャンル [ ブログ ]  ◆ テーマ [ オリジナルテンプレート ]

◆ Re comments.

◆｢勉強になりました！｣
はじめまして。｢てつじ｣といいます。
自分のブログに最近の記事一覧を作ろうと四苦八苦し、いろいろリンクを辿っているうちにこちらに辿り着きました。

説明がHTML&CSS初心者の私にでも分かりやすく、問題を解決することができました。今後もまた勉強しにお邪魔させてください。

本当に助かりました。
ありがとうございます！
◆2006/01/31(火) 01:22:33 [URL] てつじさん [編集]
◆｢良かった良かった(^ー^)｣
どうもはじめまして、てつじさん。
自分も専門でも無いので、素人の解説ですがそれが役立てるとは嬉しいです。
つたない記事ですが、こうして読んでくれた方のコメントが一番嬉しいですよ。(^ー^)
◆2006/02/01(水) 11:48:00 [URL] 有希之武さん [編集]
◆｢管理人のみ閲覧できます｣
このコメントは管理人のみ閲覧できます
◆2008/01/24(木) 00:04:08 [] さん [編集]
Comment form.

  管理者にだけ表示を許可する 
  ◆注意　名前、タイトル、本文を入力する事で投稿可能になります。

◆ Trackbacks.

↑HOME