スポンサーサイト

一定期間更新がないため広告を表示しています

  • -
  • -
  • -
  • -

見本

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

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

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

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

h1要素です

h2要素です

h3要素っす


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

ul要素(順番がないリスト)
  • いち
  • さん

ol要素(順番があるリスト)
  1. いち
  2. さん


dl、dt、dd要素:定義
りんご
りんごとは、赤くて丸くてしゃりしゃりしたおいしいくだものである。


blockquote要素:引用文
じゅげむじゅげむごこうのすりきれ。
かいじゃりすいぎょのすいぎょうまつ。



それぞれの書き方は続きより。
続きを読む >>

スピカ[JUGEMテンプレート]

JUGEMテーマ:テンプレート
スピカサムネイル

スピカ

とても素敵な写真を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://img-cdn.jg.jugem.jp/fb8/728512/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://img-cdn.jg.jugem.jp/fb8/728512/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が付いたテンプレートの色の変え方

簡単に色を変えられるようにしてあるテンプレートについて説明します。 うちでは勝手にColorSetっていう名前をつけてみました。
  1. ColorSetなCSSはこんな見た目になっています
  2. テンプレート『あさがお』を例に説明します。
    あさがおサムネイル
    Colorsetの説明コード1
    この画像はCSSの一番上の部分の画像です。先頭に『@charset "EUC-JP";』と描いてあり、その下から
    /**--------------------------Color Set-----------------------------**/
    /*color1*/


    /*color2*/


    /*color3*/


    /*color4*/


    /*color5*/


    /* CSSの記述順


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

  3. 色を変える
  4. 『あさがお』のテンプレートでは、/*color1*/から/*color5*/までありました。これは色を5色設定できるということです。
    さっそく/*color1*/の色を変えてみましょう。変える場所はここです。
    ColorSetの説明2
    background-color:#101c5a
    color:#101c5a
    border-color:#101c5a
    /*color1*/から/*color2*/の間にある、#がついた6けたの英数字
    これが色を表しています。
    ためしにここにgreenと入力してみましょう。
    ColorSetの説明3
    さあ、これをプレビューしてみると?
    color1がgreenのあさがお
    背景色、ブログのタイトル、タイトル横の朝顔の画像の色などが一気に変わりました。
    これと同じようにして、/*color2*/から/*color5*/までの#がついた6けたの英数字を他の色に変えてやればサイドバーのリンクの色などを変えることが出来ます。

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

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

    参考サイト

    色の組み合わせを探すのにぴったりなサイトです。

あさがお[JUGEMテンプレート]

JUGEMテーマ:テンプレート

あさがお

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

おすすめのColorSetを載せておきます。
  1. デフォルト。渋く大人っぽく。
    ASAGAO
    Color by COLOURlovers
    Color No. 1:101C5A 2:5A7222 3:79923E 4:37458E 5:172464
  2. 空をイメージしてみました。
    ASAGAO-2nd
    Color by COLOURlovers
    Color No. 1:74DFF2 2:99654B 3:9CFF6E 4:2FCF29 5:24D6CD
    あさがお2

BASE[JUGEMテンプレート]

JUGEMテーマ:テンプレート

BASE

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

≫ダウンロードページへ

≫UTFのway*coのページへ


▲top