sampling.sys

【ヤプログ：スキンカスタマイズ24】

線のスタイルについて

※　わかりやすいような、太さと色にしています。
※　dashedとdottedは、1pxでは違いがわかりません。

---

　→　線の太さ。　thin、thickなどの指定もできる。

　→　線の色。

　→　線種。　solid（実線）、double（二重線）、dotted（点線）など。
　　　　上の図参照。

（例）

border: 3px #999999 solid;
　→　左上の図のようになります。

border-width: 5px 1px;
　→　線の太さ：　上下5px　左右1px

border-width: 1px 2px 3px 4px;
　→　線の太さ：　上1px　右2px　下3px　左4px

border-color: #999999;
　→　線の色：　#999999

border-style: dotted
　→　線の種類：　点線

変なことをしてみると

とかもできるわけです；
あるいは以下のようなのも。

■　一番外側の線の、色やスタイルを変えたい、消したい

スタイルシートの中から該当個所を探し、色を付けてある部分を変えます。

　　border-○○: #369 1px solid;
のようになっていますが、全部まとめて
　　border: #369 1px solid;
とすることもできます。

■　記事の線を変更したい場合

.entry{ } （92～100行付近）、上記と同様のスタイル部分をいじる

■　記事を囲む線を変更したい

.entry_title{ } （102～115行付近）、上記と同様のスタイル部分をいじる

■　サイドバーのタイトル部分の線を変更したい

.side_title{ } （220～233行付近）、上記と同様のスタイル部分をいじる

【ヤプログ：スキンカスタマイズ14】

サイドバーにプロフィール等を付ける

■　はじめに

1.　サイドバー→機能の追加。編集で「新規作成」を押します。
（修正の場合は、現在追加されている機能、から該当のものをクリック）

2.　機能名を付けます。
　機能名は、並び替え画面で表示される名前。
　自分でわかりやすければ、何でもOKです。

3.　HTMLのところには、以下のようなHTMLを入れます。
　テキストエディタなどで作っておいて、貼り付ける方が安全です。

■　とにかく簡単に付けたい場合

これが一番、簡単な形かと思われます。

■　↑だと、うまくいかない時

□　HTML/CSSが触れないスキンで、上の方法ではサイドバータイトルの上下の画像が表示されない場合。
□　スタイルシート（サイドバーのタイトル部分）【No.12】で、2や3のようにして隙間を利用している場合。

その場合は次のようにしてみてください。

【ヤプログ：スキンカスタマイズ12】

スタイルシートについて（サイドバーのタイトル部分を変える）

※　サンプルは、紺のカスタマイズ可なスキンを元にしてます。
　　他の色の場合は、「#369」の値が変わっています。

※　変更していない部分は省略しています。

線のスタイルについてはこちらをどうぞ。

---

1.　まわりに枠をつける

.side { border: #369 1px solid; }

上に隙間があくのは
img src="/blog/template/17/img/side_title_header.gif"を挿入するようになっているためです；
気になる方は、独自タグをどぞ。

2.　まわりに枠を付ける（改１）

.side { border: #369 1px solid;
    padding: 0px 1px; }

上の隙間が消せないなら、左右にも開けてやれ・・・という意味で、padding: 0px 1px;

3.　まわりに枠を付ける（改２）

.side { border: #369 1px solid; }
.side_title { border-bottom: #369 3px double; }

あるいは、上下にに線をひいてしまう・・・とか

4.　↑と似ているけど、ちょっと違う

.side { border: #369 0x solid; }
.side_title{ color: #369;
    background-color: #b0c4de;
    border-top: #369 3px double;
    border-bottom: #369 3px double; }

タイトル部分だけにしてみたり。

5.　点々で囲んでみる

.side{ border: #369 3px dotted; }
.side_title{ color: #369;
    background-color: #b0c4de; }

6.　点線で区切ってみる

.side{ border: #369 1px solid; }
.side_title{ color: #369;
    background-color: #fff;
    border-bottom: #369 1px dotted; }

---

7.　点々背景

.side{ border: #369 1px solid;
    padding: 0px 1px; }
.side_title{ color: #369;
    background-color: #b0c4de;
    background-image: url(http://～/sk12_7img.gif); }

使用画像→　（8*8　赤い部分が透過してます）

8.　ジグザグしてみる

.side{ border: #369 1px solid;
    padding: 0px 1px;}
.side_title{ color: #369;
    background-color: #b0c4de;
    background-image: url(http://～/sk12_8img.gif);
    background-repeat: repeat-x;
    background-position:  bottom; }

サイドバータイトル部分の高さより小さい画像なので、positionがbottom　かつ　横方向のみの繰り返し指定をしています。

使用画像→　（8*8　赤い部分が透過してます）

9.　左にポイント

.side{ border: #369 1px solid;
    padding: 0px 1px; }
.side_title{ padding: 5px 0px 5px 20px;
    color: #369;
    background-color: #b0c4de;
    background-image: url(http://～/sk12_9img.gif);
    background-repeat: no-repeat;
    background-position:  left; }

サイドバータイトル部分の幅より小さい画像なので、positionがleft　かつ　繰り返しなしの指定をしています。
また＋画像に重ならないように、余分に左paddingをとっています。

使用画像→　（21*21　赤い部分が透過してます）

※　9は、<img>ではなく背景として画像を設置し、アイコンの様に見せかけているだけです。
そのため左右上下に空白部分をわざと作った画像を使用しています。
そのような画像を用意できる場合はしてみてください。
このプラスのようなものですと、左には5px空白をとっています。

しかし素材屋さんのアイコンなど、画像加工のできないものを使用したい場合には、
background-position: 5%;　のように割合を指定してみてください。
（数値はそれぞれのサイドバーの長さによって異なります。　自分で調整してくださいね）　

またその画像の位置にあわせて、.side_titleのpadding（-left）も調整してください。

【ヤプログ：スキンカスタマイズ11】

スタイルシートについて（ある範囲の、背景色・画像を変更したい）

サンプルは、一番外側のテーブルに背景を設定する場合になります↓
→　対応箇所はブログ説明文（.range）になります。
→　デフォルトのスタイルシートでは28-39行あたり？

.range { 
    ～省略～
    background-color: #ff0;
    background-image: url(http://～/○○.gif);
    background-repeat: no-repeat;
    background-position: left top;
    border:1px #ff0 solid; }

↓こういう風に、まとめて書くことも。

.range { 
    ～省略～
    background: #ff0 url(http://～/○○.gif) no-repeat left top;
}

---

■　背景色を変えたい
■　背景に画像を使いたい
■　画像の繰り返し指定、位置指定がしたい
■　周りの線の色やスタイルを変えたい、消したい。
■　背景画像を固定する
■　全体の背景を画像にする
■　記事の背景を画像にする
■　記事のタイトル部分を画像にする

（下の「続きを読む」を押してから、リンクを押してください；）

---

■　背景色を変えたい

■　背景に画像を使いたい

■　画像の繰り返し指定、位置指定がしたい

　　　repeat　→通常どおり、全方向に繰り返す（指定しないのと同じ） 　　　no-repeat　→繰り返さない（1つだけ表示） 　　　repeat-x　→横方向にのみ、並べる 　　　repeat-y　→縦方向にのみ、並べる

　　　left、center、right　→横方向の位置（それぞれ左端、中央、右端）
　　　top、center、bottom　→縦方向の位置（それぞれ上端、中央、下端）
　　　ほかにも30%とかのパーセントでの指定もできる。

■　周りの線の色やスタイルを変えたい、消したい。

　　　線種に付いては線のスタイルについて【No.24】をどぞ。

■　背景画像を固定する

　　　scroll　→規定値。スクロールバーと一緒に壁紙も動く。
　　　fixed　→固定。

---

■　全体の背景を画像にする

スタイルシートに

body {
    background-color: #○○;  /* 壁紙と似た色が良い */
    background-image: url(http://～/○○.gif);
    background-repeat: no-repeat;  /* 必要なら */
    background-position: center;  /* 必要なら */
    background-attachment: fixed;  /* 必要なら */
}

のようにします。

■　記事の背景を画像にする

.entry{ } （92～100行付近）に、上記と同様のスタイルを書き足す

.entry {
    background-color: #○○;
    background-image: url(http://～/○○.gif);
    background-repeat: no-repeat;  /* 必要なら */
    background-position: center;  /* 必要なら */
    background-attachment: fixed;  /* 必要なら */
}

※　全体の背景を指定し、かつ外側のtableの中もその背景をつかう場合
.range{ }の中の
background-color: #○○;を消す。
body{ }は↑を参考。

※　記事部分の背景にまでは、画像を使わない場合
.entryに background-color: #○○;
を足す。
body{ }、.range{ }は、↑を参考。

■　記事のタイトル部分を画像にする
.entry_title{ } （102～115行付近）に、上記と同様のスタイルを書き足す

.entry_title {
    background-color: #○○;
    background-image: url(http://～/○○.gif);
    background-repeat: no-repeat;  /* 必要なら */
    background-position: center;  /* 必要なら */
    background-attachment: fixed;  /* 必要なら */
}

【ヤプログ：スキンカスタマイズ10】

日付表記について

次の箇所を、自分好みに書き換えることができます。

■　メインテンプレート

記事の日付　：　32行目
　　{$BlogEntryDate format="%Y年%m月%d日(%a)" language="jp"$}

■　アーカイブテンプレート

記事の日付　：　42行目
　　{$BlogEntryDate format="%Y年%m月%d日(%a)" language="jp"$}

■　1記事テンプレート

記事の日付　：　42行目
　　{$BlogEntryDate format="%Y年%m月%d日(%a)" language="jp"$}

トラックバックの日付　：　89～90行目
　　{$BlogPingDate format="%Y年%m月%d日(%a)　%H:%M" language="jp"$}

コメントの日付　：　170～171行目
　　{$BlogCommentDate format="%Y年%m月%d日(%a)　%H:%M" language="jp"$}

■　サイドバーの各項目

ヤプログの独自タグ（サイドバ－）【No.37】を、どうぞ

■　ヤプログ date format　一覧

とりあえず、数値が与えられているものだけ挙げておきます。

%x　年　月　日（曜日：漢字、省略しない）
%y　年（下二桁）
%Y　年（四桁）
%b　月　（一桁でも0が付かない）
%m　月　（一桁だと0が付く）
%B　月　（6月とか「月」が付く）
%d　日付　（一桁だと0が付く）
%e　日付　（一桁でも0が付かない）
%a　曜日（漢字、省略）
%A　曜日　（漢字、省略しない）
%p　午前／午後
%k　時（24時間表記、一桁でも0が付かない）
%l　時（24時間表記ではない、一桁でも0が付かない）
%H　時（24時間表記、一桁だと0が付く）
%I　時（24時間表記ではない、一桁だと0が付く）
%M　分
%S　秒
%X　時　分　秒 +JST
%j　1/1からのナンバー（1/1は001、1/2は002、
　　・・・1/30は030・・・12/31は365：閏年は366）

---

ちなみに。

language="us"とすると、英語になったり。

変わるのは以下のもの。

%x　Wednesday, November 24, 2004
%b　Nov　月　（英語、省略）
%B　November　月　（英語　省略しない）
%a　Wed　曜日（英語、省略）
%A　Wednesday　曜日　（英語、省略しない）
%p　AM／PM

【ヤプログ：スキンカスタマイズ9】

スタイルシートについて（リンクの挙動）

サンプルには、以下の部分を使ってみますね～。
→　対応箇所はブログの記事部分（.entry_text）のリンクになります。
→　デフォルトのスタイルシートでは125-150行あたり？

.entry_text A:link {
    font-weight: normal;
    color: #a52a2a;
    text-decoration: none; }
.entry_text A:visited {
    font-weight: normal;
    color: #a52a2a;
    text-decoration: none; }
.entry_text A:active {
    font-weight: normal;
    color: #a52a2a;
    background-color: #c0c0c0;
    text-decoration: none; }
.entry_text A:hover {
    font-weight: normal;
    color: #a52a2a;
    background-color: #c0c0c0;
    text-decoration: none;}

.entry_textでは通常時のテキスト色
.entry_text A:link　（entry_text内での）リンクの色
.entry_text A:visited　（entry_text内での）行ったことのあるリンクの色
.entry_text A:active　（entry_text内での）アクティブ状態の時のリンクの色
.entry_text A:hover　（entry_text内での）リンクの上にカーソルをのせた時の色

の指定をします。

---

■　リンク時の色を変えたい
■　リンク時の背景色を変えたい
■　リンク時のアンダーラインをなくしたい
■　リンクの上にもラインを付けたい
■　上下に点線を付けたい
■　どこのA～を変えればいいの？

（下の「続きを読む」を押してから、リンクを押してください；）

---

■　リンク時の色を変えたい　（A）

　　Aの付いた場所のcolorは、リンク色。

■　リンク時の背景色を変えたい　（A）

■　リンク時のアンダーラインをなくしたい　（A）

　　アンダーライン無し→none
　　アンダーライン有り→underline

■　上にもラインを付けたい　（A）

　　アンダーライン有り、オーバーライン無し→underline
　　アンダーライン・オーバーライン有り→underline, overline

■　上下に点線を付けたい （A）

---

■　どこのA～を変えればいいの？

「ブログタイトル」
　→　.blog_title A:link、.blog_title A:～3箇所

「記事の下、コメントやトラックバックへのリンク」
　→　.posted A:link、他.posted A:～3箇所

「サイドバーのテキスト」
　→　.side_text A:link、他.side_text A:～3箇所

「カレンダー」
　→　.calendar A:link、他.calendar A:～3箇所

「記事の下、前へ | 次へ」
　→　.page A:link、他.page A:～3箇所

「アーカイブ表示の時の、« | Main | » 」
　→　.prevew A:link、他.prevew A:～3箇所

「ブログ＋ヤプース！＝ヤプログ！ 」
　→　.footer A:link、他.footer A:～3箇所
　　　.footer_jp A:link、他.footer_jp A:～3箇所

【ヤプログ：スキンカスタマイズ8】

スタイルシートについて（テキストサイズ、大きさ、行間）

サンプルには、以下の部分を使ってみますね～。
→　対応箇所はブログの記事部分（.entry_text）になります。
→　デフォルトのスタイルシートでは115-124行あたり？

.entry_text {
    padding: 8px;
    font-weight: normal;
    font-size: 12px;
    color: #333;
    line-height:140%;
 }

---

■　テキストの大きさを変えたい
■　テキストの色を変えたい
■　テキストの行間を変えたい
■　フォントを変えたい

（下の「続きを読む」を押してから、リンクを押してください；）

---

■　テキストの大きさを変えたい　（font、div、span、td　などなど）

font-size: ○○px;を変更。
　　自分でいろいろ変えてみるとわかるかと。
　　12px以下だと読みにくいかも（小さくて可愛いと思うけど；）。
　　指定しない方が、本当は親切なんだろうけどね・・・・（読み手が簡単にフォントサイズを変更できるので。）

■　テキストの色を変えたい　（font、div、span、table、td　などなど）

color: #○○○;を変更。
　　色々な色があります。　　　私用はこっち。
　　#666666　=　#666　、　#369　=　#336699　です。

■　テキストの行間を変えたい　（div、span、table、td　などなど）

line-height:○○%;を変更。

左がline-heightを指定せず、右がline-height:140%;
・・・結構、違います。

■　フォントを変えたい

変えたいクラス名のところに、例えば次のような属性を書き足します。

ゴシック系を指定したい場合↓ 明朝系を指定したい場合↓

"○○"部分に、自分の指定したいフォントを入れます。

しかしそのフォントが、全てのパソコンにはいっているとは限りません。
ですので「ＭＳ Ｐゴシック（win用）」「Osaka（mac用）」「sans-serif（それらがはいっていなかった場合に、ゴシックタイプのフォントになるように）」、のように書きます。
（明朝系が良い場合も同様に、Win・Mac用にそれぞれ、そして更に予備の指定をしてあると良いですね）

とほほさんやクイックリファレンスさんも見ると参考になります。（というか、私の説明より良いです）

【ヤプログ：スキンカスタマイズ4】

HTML記述の基本（文章などの書き方）

■　HTMLで書ける場所（ヤプログさんの場合）
■　文字を書く
■　改行
■　画像を表示する
■　画像の周りの線を消したい
■　リンクする
■　数値文字参照・文字実体参照

（下の「続きを読む」を押してから、リンクを押してください；）

---

■　HTMLで書ける場所（ヤプログさんの場合）

　→　記事を書くときに、「HTMLで記事を書く」にチェックをいれた記事
　→　サイドバーの「機能追加・編集」
　→　設定の中の「ブログ説明文」
　→　HTML/CSS変更可能なスキンの場合は、3つのテンプレート

■　文字を書く

　・・・というのは、キーボードとかで打ち込めば良いだけですね；

　ただ、使う文字には、一部気を付ける必要のあるものがあります。
　「機種依存文字」と言われ、丸付き数字とか、ローマ数字が代表的。
　詳しくは数値文字参照・文字実体参照。

　文字のスタイルは、HTMLでは<font>タグを使い、次のように変えることができます。
　→　文字の大きさを変える
　　　<font size=3>ここに文章</font>など。
　　　数値は1（小さい）～7（大きい）まで指定できます。

　→　文字の色を変える
　　　<font color="#ff0000">ここに文章</font>など。
　　　カラーコードについては、こちらをご覧下さい。

　・・・が、周りのスタイルと違った色・大きさにしないのであれば、スタイルシートを利用した方が早いです。

　例えばサイドバーに機能の追加で付け足す場合は、

　このdivタグで囲めば、他のサイドバーの文字と同じスタイルになります。（このclass名は、どのスキンでも用意されています）

　サイドバーのタイトル部分と同じにするのであれば 　となります。

※　文字のスタイルについてはスキンカスタマイズ8、サイドバーに機能を追加についてはスキンカスタマイズ14をご覧ください。

※　<font>および<div>タグを使う場合は、終了タグ（</font>および</div>）を忘れないように注意して下さい。

■　改行

　<br>タグを使います。
　（反対に言うと、こう打ち込まないとenterしていても改行しません）

■　画像を表示する

　<img>タグを使います。 　の様に使用します。

　srcには画像のパス（ヤプログでは絶対パス）、altでは代替テキストを指定します。
　widthとheightはできるだけ記述した方が良いようです。

　画像の表示位置を調整したい場合には以下のように書き足します。
　（ヤプログさんの画像表示位置指定に沿った表現を使用　、　alt、weidth、heightは省略）

　左寄せ　回り込み 　挿入 　右寄せ　回り込み 　左寄せ 　中央寄せ 　右寄せ

※　画像のアップロード方法については、スキンカスタマイズ18をご覧下さい。

※　<div>タグを使う場合は、終了タグ（</div>）を忘れないように注意して下さい。

■　画像の周りの線を消したい

　画像をリンクさせた場合、まわりに線（IEだと紫色）が出てしまいます。 　これを消す為には 　のようにします。 　あるいは、HTML/CSS編集可能なスキンの場合は、 　スタイルシートの1番上の行（というか、他のクラスの中でなければどこでも良いけど）に、 　と一言書いておけば、全ての画像の枠線が消えます。

■　リンクする

　<a>タグを使います。
　<a href="○○">リンク</a>の様に使用します。

　herfには、リンク先のアドレス（ヤプログでは絶対パス）をいれます。

　画像をリンクする場合は 　のようにします。

　新しいウインドウを開いてリンク先を表示したい場合は、target="_blank"を書き足します。

※　リンク時のスタイルについては、スキンカスタマイズ9をご覧下さい。

※　<a>タグを使う場合は、終了タグ（</a>）を忘れないように注意して下さい。

■　数値文字参照・文字実体参照

　こう言うと、とても難しそうですが。
　右図のような記号を出すときにも使えます。

　他の場合だと・・・。
　どうしてもHTMLで記述したい記事の中で、<tr></tr><td></td>などのテーブルに関するタグを表示したいとします。
　そのまま書いたりすると・・・レイアウトが大変なことになってしまいます。
　そんな時に、 < を &lt; とか、 > を &gt; と書くことで回避できるのです。
　まぁ・・・あえてHTMLで書く記事も少ないと思われるのですが・・・。

　※　「HTMLで書く」にチェックを入れていない場合は、 &lt; と入力しても < にはなりません。

　ばけらの HTML リファレンスさま（→おまけ - 文字参照一覧）がわかりやすいです。

　※　で、コレを見ると半角カナがはいっているのですね・・・でも半角カナは機種依存文字では？
　　　・・・ということで、「使える筈の文字だけど、うまく表示できないこともあり得るので使わない方が良い」と私は受け取っています（あってる？？）。

【ヤプログ：スキンカスタマイズ3】

幅指定箇所

L○○　というのは、初期スキンでの行数です。
目安にしてください。

初期の750pxより大きくする場合には、こんなに触らなくても大丈夫です。
しかし小さくするときには、以下のような数値を修正します。

最下部 「ブログ＋ヤプース！＝ヤプログ！ 」 あたりのtableを忘れてしまうことが、結構あるようです。

---

■スタイルシート（width関係以外の場所は省略しています；）

.entry { margin: 10px;　width: 380px; }
　→　ブログ本文を囲むtable。　entryのmarginが10pxのため更に外のtable-td幅（400px）から20pxひく。

.entry_layer{ width: 360px; }
　→　ブログ本文のテキストがのるdiv。　entry_textのpadding（左右）が8pxのため、entry幅（380px）から16pxひく・・・と思いきや、20pxひくらしい。　要再確認。

.comment_layer { width: 300px; }
　→　entry_layerと同じ幅にしてpaddingで左右に幅を取った方が良さそう。

.side_left { width: 175px; }
　→　左サイドバーのdiv幅。

.side_right { width: 175px; }
　→　右サイドバーのdiv幅。

.side { width: 175px; }
　→　左右サイドバー中で、機能ごとを囲むtable。

---

■メインテンプレート（width関係以外の場所は省略しています；）

L10　<table class="range" width="750">
　→　ブログ全体を囲むtable幅。

L15　<table width="750">
　→　ブログ全体を囲むtable幅。別に左右ぴったりまで付けないなら、違う数値でも良い。

L20　<table width="750">
　→　ブログ本文・サイドバーを囲むtable幅。

L22　<td width="175">
　→　左サイドバーのtd幅。

L27　<td width="400">
　→　ブログ本文のtd幅。

L30　<table width="400" class="entry">
　→　ブログ本文を囲むtable。　entry同様、380pxになる。
　　　　7/8～では何故か400px（実際は380px）。

L50　<td width="175">
　→　右サイドバーのtd幅。

L68-74
<table width="780"><tr>
　　<td width="435"><img src="http://～" alt="～"></td>
　　<td width="330" class="footer_jp"><a href="#">▲</a></td>
　　<td width="15"><img src="space.gif"></td>
</tr>　</table>
　→　フッターのtable・td幅。　ブログとは別tableなので、あまり気にしない。　まぁ、同じくらいが好ましい。　td幅の合計がtable幅になるようにする。
L73　<table width="755">
　→　フッターのtable・td幅。　ブログとは別tableなので、あまり気にしない。　まぁ、同じくらいが好ましい。

---

■アーカイブ・1記事テンプレート

メインテンプレートと同様に（行は変わってしまいますが；）。

追加は<!-- archive navigation -->部分
L29　<table width="400">
　→　アーカイブナビゲーションを囲むtable。　entryと揃えれば良いかと。

---

■1記事テンプレートは更に

L58　L68　L94
　<table width="400" class="entry" >
　→　この記事のURL・トラックバック・コメントする　を囲むtable。
　　　他の記事部分と同様に380px。
　　　　7/8～は何故か400px。でも実際は380pxである。

【ヤプログ：スキンカスタマイズ2】

構成とスタイルシートのclass名（サイドバーとブログ本文）

※　スタイルシートの順番とは異なっています。
　　ブログ全体の構成については前の記事をどぞ。

---

■　ブログ　本文 　(table)
.entry { }

■　ブログ　本文　タイトル　(td)
.entry_title { }

■　ブログ　本文　日付　(span)
.date { }

■　ブログ　本文　テキスト　(td)
.entry_text { }

■　ブログ　本文　幅と挙動　(div)
.entry_layer { }

■　１記事のみ ブログへのコメントの、プレビュー　(div)
.comment_layer { }

■　投稿時間・カテゴリetc　(div)
.posted { }

---

■　サイド　左　(div)
.side_left { }

■　サイド　右　(div)
.side_right { }

■　両サイド　(td)
.side { }

■　サイド　タイトル　(td)
.side_title { }

■　サイド　本文　(div)
.side_text { }

■　サイド　カレンダー　(div)
.calendar { }

---

※　入力支援機能のアイコンのとこですが・・・実際には320pxではないような。
　　とにかく、この幅+20pxが、おそらく最小のentry幅なのではないかと。

【ヤプログ：スキンカスタマイズ1】

構成とスタイルシートのclass名（ブログ全体）

※　スタイルシートの順番とは異なっています。
　　サイドバーとブログ本文については次の記事をどぞ。

■見出し
　　h1 ブログタイトル
　　h2　説明文
　　h3　（新しい辺りのスキンでは記事のタイトル）

■水平線
　　hr コメントやトラバの仕切り線

■ブログ全体を囲む枠　(table)
　　.range { }

■ブログ名　(div)
　　.blog_title { }

■説明文　(td)
　　.blog_description { }

■ブログ　本文　(table)
　　.entry { }

■下部（前へ／次へ）　(div)
　　.page { }

■アーカイブ・１記事のみ　ブログ上部 の＜＜　Main　＞＞　(td)
　　.prevew { }

■フッター　(td)
　　.footer { }
　　.footer_jp { }

---