テンプレート講座第四回 
2005 11 05
Sat 13:11:57

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

三回目でHTMLとスタイルシートを基本のみで取りあえず完成しました。
そこで実際にデザインしてみた方が、覚えるし使えるかな？と、思いファイルを用意してみました。
test_top.html
test_style.css
実際にファイルをダウンロードしてスタイルシートの編集でオリジナルなトップをデザインしてみて下さい。
HTMLファイルは三回目で創ったHTML文を使って創ったページファイルです。

補足
bonkさんのテンプレートを使い幅固定とトップページを付けたモノを実際に用意しました。
デザインはほとんどしていませんが、ちゃんと基本的な機能などは付属されていますので後はスタイルシートをカスタマイズするだけです。
プレビューしてみる

テスト版ソースファイル
bonk_with_glim-html.txt
bonk_with_glim-css.txt
<!--index_area-->
<div class="index_top">

<div id="blog_name"><%blog_name></div>
<div id="blog_introduction"><%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-->

スタイルシートはこちら。
* 基本設定 */

@charset "EUC-JP";
* {margin : 0px;padding : 0px;}

body {
margin:0px;
padding:0px;
margin-left:auto;
margin-right:auto;
text-align:center;
}

.index_top {
margin:0px;
padding:0px;
margin-left:auto;
margin-right:auto;
text-align:center;
width:600px;
height:450px;
background: url(./○○.jpg) no-repart top left;
}
.index_enter {
margin-left:auto;
margin-right:auto;
margin-top:10px;
text-align:center;
font-size:20pt;
}

#blog_name {font-size:18pt;}

#blog_introduction {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;white-space : nowrap;}

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

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

HTMLファイルはここのカテゴリー一覧や記事一覧が付けられていますが、このファイルをスタイルシートの編集でデザイン出来れば、そのまま使える事になります。
ご自身のパソコンに保存する訳ですから、画像ファイルのアドレスは後で追加します。（取りあえず画像ファイルなどはHTMLファイル・スタイルシートファイルと同じフォルダに保存して編集です。）
それほど項目数も無いのでカスタマイズは以外と簡単でしょう。

完成したら画像ファイルなどはご自身のサーバーアドレスに変更し、スタイルシートを改造したいテンプレートに追加します。
勿論、HTML文も上に書かれたものを実際に追加します。
後は、今までの講座通りに<!--not_index_area-->で囲めばトップページ付きテンプレートの完成です。
頑張ってみて下さい。(^ー^)

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

◆ Re comments.

Comment form.

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

◆ Trackbacks.

↑HOME