このエントリはテンプレートの見た目を確認するのにお使いください。

強調したいときは、strong要素。
ちょっと強調したいときに。em要素。
u要素。下線です
del要素とは・・・打ち消し線のためにある
リンクはこんな感じ

これはp要素です。pというのは段落という意味です。

これはpre要素です。preというのは整形済みテキストという意味です。

h1要素です

h2要素です

h3要素っす

画像はこんな感じ

リンク付きの画像はこんな感じ


ul要素（順番がないリスト）

• いち
• に
• さん

ol要素（順番があるリスト）

1. いち
2. に
3. さん

dl、dt、dd要素：定義

りんご

りんごとは、赤くて丸くてしゃりしゃりしたおいしいくだものである。

blockquote要素：引用文

じゅげむじゅげむごこうのすりきれ。
かいじゃりすいぎょのすいぎょうまつ。

それぞれの書き方は続きより。

スピカ

とても素敵な写真をMIZUTAMAさんのところで見つけたので使わせて頂きました。今回はログピとLast.fmの最近聴いた音楽を表示するブログパーツもおそろいです。ログピはfreespaseに公式のタグをはりつけるだけでOK。Last.fmのブログパーツの利用方法は下の方にあります。
≫ダウンロードページへ
≫UTFのway*coのページへ
☆Last.fmの最近自分が聞いた音楽を表示するブログパーツ『lfls.php-Last.fm listing』の利用方法
野池賢二さんによるブログパーツです。ここでは『最近聴いたトラック』を表示するものをご紹介。 [使い方] このソースをまるっとコピーして、フリースペースに貼り付けて下さい。 そしてソース中に一ヶ所ある『あなたのアカウント名』のところをLast.fmのアカウント名に書き換えればOKです。

<iframe id="lfls" 
src="http://noike.info/~kenzi/cgi-bin/lfls/lfls.php?user=

あなたのアカウント名

&mode=rt&time=ago&ud=false&td=false&css=
body{
margin:0;
padding:0;
background-color:FFFFFF;
line-height:15px;
}
br{display:none;}
a{text-decoration:none;}
a:link{color:7f7f49;}
a:visited,
a:hover,
a:active{color:7f7249;}
span.lflstime,
span.lflstrack{display:block;}
span.lflstime{
background-image:url(http://heeldrops.img.jugem.jp/20080727_409086.png);
background-repeat:repeat-x;
padding-top:17px;
color:999999;
font-size:93%;
text-align:right;
}
span.lflstime a{
padding-left:10px;
background-image:url(http://heeldrops.img.jugem.jp/20080727_409198.png);
background-position:0% 0%;
background-repeat:no-repeat;
}
" width="170" height="320" style="border:none;	overflow:hidden;">
</iframe>
<p style="text-align:right;">
<a href="http://noike.info/~kenzi/cgi-bin/lfls/index.html">
lfls.php</a> 
(c)<a href="http://noike.info/~kenzi/">Kenzi NOIKE</a>
</p>

すみません、時間不足につきさらーりと説明してしまいましたが、説明足りないところが沢山あると思うのでまた後日更新します。眠いよー。

簡単に色を変えられるようにしてあるテンプレートについて説明します。 うちでは勝手にColorSetっていう名前をつけてみました。

1. ColorSetなCSSはこんな見た目になっています
テンプレート『あさがお』を例に説明します。


この画像はCSSの一番上の部分の画像です。先頭に『@charset "EUC-JP";』と描いてあり、その下から
/**--------------------------Color Set-----------------------------**/
/*color1*/
・
・
/*color2*/
・
・
/*color3*/
・
・
/*color4*/
・
・
/*color5*/
・
・
/* CSSの記述順

となっています。この
/**--------------------------Color Set-----------------------------**/
から
/* CSSの記述順
の間が色を入力する場所です。
ここを押さえておいてください。


2. 色を変える
『あさがお』のテンプレートでは、/*color1*/から/*color5*/までありました。これは色を5色設定できるということです。
さっそく/*color1*/の色を変えてみましょう。変える場所はここです。

background-color:#101c5a
color:#101c5a
border-color:#101c5a
/*color1*/から/*color2*/の間にある、#がついた6けたの英数字
これが色を表しています。
ためしにここにgreenと入力してみましょう。

さあ、これをプレビューしてみると？

背景色、ブログのタイトル、タイトル横の朝顔の画像の色などが一気に変わりました。
これと同じようにして、/*color2*/から/*color5*/までの#がついた6けたの英数字を他の色に変えてやればサイドバーのリンクの色などを変えることが出来ます。

ところで、
さっき#101c5aとかっていう英数字を色って言ってたけど、これはなに？色じゃなくて変な英語と数字じゃん？
greenでもいいってどういうこと？#がついた英数字じゃないといけないわけじゃないの？
そう思われた方もいらっしゃるかと思います。
簡単に説明すると、
#101c5aってのは機械語
greenってのは英語
・・・ってことです（乱暴だなぁ・・・）。ホームページで表示できる色はすべて#と6けたの英数字で表せるのですが、よく使う色は英語でもOKな仕組みになっているんです。ちなみに#と6けたで表せる色の数は1600万色ぐらい。英語で表すことができる数は140色です。 green以外の英語で表せる色は、こちらのサイトに掲載されているので参考にしてみてください。Web色見本 原色大事典

3. 注意点と参考サイト

注意点

• 例に使用したテンプレート『あさがお』の画像は記事執筆時のものなので、更新等により現在のものとは違う場合があります。



参考サイト

色の組み合わせを探すのにぴったりなサイトです。
• Web色見本 原色大事典
• colourlovers

あさがお

夏らしく大きな朝顔が咲いているテンプレート。ちょこっと変わった編集をしてあるので、テンプレートを少し変えるだけで簡単に色を変えることが出来ます。 変え方はこちらColorSetが付いたテンプレートの色の変え方
ちなみにIE6では背景色が灰色になってしまいます。IE7で見るからいいもーんという方のみお使いください。
≫ダウンロードページへ
≫UTFのway*coのページへ

おすすめのColorSetを載せておきます。

1. デフォルト。渋く大人っぽく。
   
   Color by COLOURlovers
   Color No. 1:101C5A 2:5A7222 3:79923E 4:37458E 5:172464
2. 空をイメージしてみました。
   
   Color by COLOURlovers
   Color No. 1:74DFF2 2:99654B 3:9CFF6E 4:2FCF29 5:24D6CD
   

BASE

ビックリするくらいシンプルなテンプレート。
テンプレ作りをするときの土台として使おうかなあ、と思って作成。

≫ダウンロードページへ
≫UTFのway*coのページへ