さて、久しぶりの更新です。

今回は記事タイトルを見てみましょう。
テンプレートによって結構違うんですが、書き込み日付が記事タイトルになってる場合があります。
こんな感じですね。



これって、せっかくの記事タイトルが目立たなくてイマイチですよね。
と言うことで、記事タイトルを目立つように改造してみましょう。
まず、「オリジナルデザインの登録」の画面で「トップページ」を見て下さい。
そして、ずーっと下へスクロールさせて行くと、「<IndexEntrysLoop>」ってところがあると思います。
この「<IndexEntrysLoop>」から「</IndexEntrysLoop>」の間が記事の繰り返し表示を司っている部分です。
と言うことは、その括りの間の最初の方に記事タイトルと書き込み日時があるはずですね。
以下のような部分を探してください。

<IndexEntrysLoop>

　　<%TrackBackAutoDiscovery%>
　　<IfDateChanged><h2 class="date"><%EntryDate%></h2></IfDateChanged>

　　<div class="blogbody">
　　<a name="<%EntryId%>"></a>
　　<h3 class="title"><%EntryTitle%></h3>
　　<div class="main">

「<h2 class="date"><%EntryDate%></h2>」の部分が記事タイトルの日付を指定している部分です。
「<%EntryDate%>」ってなんでしょう？
この記事でHTMLの置き換えタグを見てください。
書き込み日付を求めるタグですね。
ではこの部分を記事タイトルを求めるタグ「<%EntryTitle%>」に置き換えましょう

<IndexEntrysLoop>

　　<%TrackBackAutoDiscovery%>
　　<IfDateChanged><h2 class="date"><%EntryTitle%></h2></IfDateChanged>

　　<div class="blogbody">
　　<a name="<%EntryId%>"></a>
　　<h3 class="title"><%EntryTitle%></h3>
　　<div class="main">

はい、上手く表示されました。
でもタイトルが記事部分にもあるし、書き込み日付も消えちゃいましたね。
記事タイトル部分にタイトルと日付を２段に表示してみましょう。
ついでに記事部分のタイトルも消しちゃいましょう。

<IndexEntrysLoop>

　　<%TrackBackAutoDiscovery%>
　　<IfDateChanged>
　　<h2 class="title"><%EntryTitle%></h2>
　　<h2 class="date"><a class="aposted" href="<%EntryPermalink%>"><%EntryDate%> <%EntryTime%></a></h2>
　　</IfDateChanged>

　　<div class="blogbody">
　　<a name="<%EntryId%>"></a>
　　<h3 class="title"><%EntryTitle%></h3>
　　<div class="main">

だんだん良い感じになってきました。
「<%EntryDate%>」の前後にある「a」タグと「<%EntryPermalink%>」の置き換えタグは記事日付をクリックする事で個別記事へ飛べるようにしてあります。
興味がある人は調べてみてくださいね。

次は記事タイトルの背景を書き込み日付と同じようにしましょう。
装飾をいじるので、次は「オリジナルデザインの登録」の「スタイルシート」になります。
上で改造した部分を見ればわかりますが、記事タイトルは「title」で括られ、書き込み日付は「date」で括られていますね。
ということは、「title」のスタイルを「date」と同じものにすれば良いって事です。
（ちょっと乱暴ですが）
以下の部分を探してください。

.title{
　　color:#000;
　　font-size:12px;
　　font-weight:bold;
　　height:10px;
}

そして「date」からコピーペーストします。

.title{
　　border-top:1px solid #000066;
　　border-left:1px solid #000066;
　　border-right:1px solid #000066;
　　border-bottom:1px solid #000066;
　　background:#0072D3 url(/_img/simple_blue/obj.gif);
　　background-position:1px 1px;
　　color:#fff;
　　font-size:12px;
　　letter-spacing:2px;
　　padding:5px 0px 5px 5px;
}

はい、だいぶ出来てきました。
次は記事タイトルと書き込み日付の間にある線を消しましょう。
「date」の上の線と「title」の下の線が重なってるので線があるように見えちゃってるのが原因なので、それを消せばいいだけです。

.date{
　　border-top:1px solid #000066;
　　border-left:1px solid #000066;
　　border-right:1px solid #000066;
　　border-bottom:1px solid #000066;
　　background:#0072D3 url(/_img/simple_blue/obj.gif);
　　background-position:1px 1px;
　　color:#fff;
　　font-size:12px;
　　letter-spacing:2px;
　　padding:5px 0px 5px 5px;
}

.title{
　　border-top:1px solid #000066;
　　border-left:1px solid #000066;
　　border-right:1px solid #000066;
　　border-bottom:1px solid #000066;
　　background:#0072D3 url(/_img/simple_blue/obj.gif);
　　background-position:1px 1px;
　　color:#fff;
　　font-size:12px;
　　letter-spacing:2px;
　　padding:5px 0px 5px 5px;
}

黒い線は消えましたが、白い線が残ってますね。
これは記事タイトルと書き込み日付のそれぞれに同じ背景が指定されてるのが原因です。
日付の背景に白い線の無い画像を指定すれば良いのですが、画像を２枚用意しないといけないので面倒です。
今回は上の方にずらして線を隠しちゃいましょう。
ついでに日付の文字サイズを小さくして右に寄せます。
記事タイトルの文字はもう少し大きくしましょう。

.date{
　　border-left:1px solid #000066;
　　border-right:1px solid #000066;
　　border-bottom:1px solid #000066;
　　background:#0072D3 url(/_img/simple_blue/obj.gif);
　　background-position:1px -1px;
　　color:#fff;
　　font-size:8px;
　　letter-spacing:2px;
　　padding:5px 0px 5px 5px;
　　text-align: right;
}

.title{
　　border-top:1px solid #000066;
　　border-left:1px solid #000066;
　　border-right:1px solid #000066;
　　background:#0072D3 url(/_img/simple_blue/obj.gif);
　　background-position:1px 1px;
　　color:#fff;
　　font-size:16px;
　　letter-spacing:2px;
　　padding:5px 0px 5px 5px;
}

完璧です。
paddingとかをいじって文字位置の調整なんかすると良いかもしれませんね。

あとは「個別記事」と「アーカイブ」も同じようにいじっておきます。

[個別記事]

<div id="content">
　　<div class="blog">
　　<%TrackBackAutoDiscovery%>
　　<h2 class="date"><%EntryDate%></h2>

　　　　<div class="blogbody">
　　　　<h3 class="title"><%EntryTitle%></h3>
　　　　<div class="main"><%EntryBody%><br clear="all" /></div>

以下のように変更。

<div id="content">
　　<div class="blog">
　　　　<%TrackBackAutoDiscovery%>
　　　　<h2 class="title"><%EntryTitle%></h2>
　　　　<h2 class="date"><a class="aposted" href="<%EntryPermalink%>"><%EntryDate%> <%EntryTime%></a></h2>

　　　　<div class="blogbody">
　　　　<h3 class="title"><%EntryTitle%></h3>
　　　　<div class="main"><%EntryBody%><br clear="all" /></div>

[アーカイブ]

<EntrysLoop>
<%TrackBackAutoDiscovery%>
<IfDateChanged><h2 class="date"><%EntryDate%></h2><a name="<%EntryDateTag%>"></a></IfDateChanged>
<div class="blogbody">
<a name="<%EntryId%>"></a>
<h3 class="title"><%EntryTitle%></h3>
<div class="main">

以下のように変更。

<EntrysLoop>
<%TrackBackAutoDiscovery%>
<IfDateChanged>
　　<h2 class="title"><%EntryTitle%></h2>
　　<h2 class="date"><a class="aposted" href="<%EntryPermalink%>"><%EntryDate%> <%EntryTime%></a></h2>
<a name="<%EntryDateTag%>"></a></IfDateChanged>
<div class="blogbody">
<a name="<%EntryId%>"></a>
<h3 class="title"><%EntryTitle%></h3>
<div class="main">

最後に動作確認してOKなら完成です。
「個別記事」や「アーカイブ」の違いはこの記事を参考にしてくださいね。  

サイドバーのタイトルって味気ないですよね。
この記事で色は変えてみましたけどやっぱり味気ないですよね。
ということで、今回はサイドバーのタイトルをかっこいい画像にしてみましょう！

これはスタイルシートの設定になります。
「オリジナルデザインの登録」の画面で「スタイルシート」を見てみましょう。
スタイルシートの「.sidetitle」の括りがサイドバーのタイトル部分を司っています。

.sidetitle{
　　border-top:1px solid #000066;
　　border-left:1px solid #000066;
　　border-right:1px solid #000066;
　　border-bottom:1px solid #000066;
　　background:#0072D3 url(/_img/simple_blue/obj.gif) top left;
　　background-position:1px 1px;
　　color:#fff;
　　font-size:12px;
　　letter-spacing:2px;
　　padding:5px 5px 5px 5px;
　　width:148px;
}

では、「.sidetitle」の括りの意味を上から説明しましょう。

・「border-top、border-left、border-right、border-bottom」の４行。
　　これはタイトルの「上、左、右、下」の枠線の設定です。
　　太さが「1px」の「silid」線を「#000066(暗い青)」の色で引くって設定になってます。
・「background」
　　背景の設定です。
　　背景色が「#0072D3」で画像「/_img/simple_blue/obj.gif」を「左上」にセット。
・「background-position」
　　背景をどれだけずらすか設定しています。
　　現在は「上と左」からそれぞれ「1px」づつずらしてます。
・「color」
　　文字色です。
　　「#fff(白)」が設定されてます。
・「font-size」
　　文字の大きさです。
・「letter-spacing」
　　これは文字の間隔です。
・「padding」
　　文字を外枠からどれだけ空けるかの設定です。
　　「上、右、下、左」からそれぞれ「5px」離してます。
・「width」
　　文字表示領域の幅です。

とまあ、簡単に説明するとこんな感じです。

ではタイトルに入れる画像を作ります。
画像の高さは自由でよいのですが、幅はスタイルシートに合わせないといけません。
では現在のサイドバーの幅はいくつなのでしょうか。
「width」が「148px」だから148ピクセルの画像で良さそうに思いますが違います。
この画像を見てください。

paddingで周囲に5pxづつなので左右それぞれ5px。
widthが148px。
border-left(左枠線)、border-right(右枠線)で1px取ってるので…
５＋５＋１４８＋１＋１＝１６０って事で160pxとなります。

と言うことで、今回は幅160px*高さ45pxの絵を作ってみました。
（高さはお好きなサイズでOKです）


では、画像をアップロードして、画像に外枠の線も付けましたのでスタイルシートから線を消します。

.sidetitle{
　　border-top:1px solid #000066;
　　border-left:1px solid #000066;
　　border-right:1px solid #000066;
　　border-bottom:1px solid #000066;
　　background:#0072D3 url(http://www.mie1.net/usr/csstest/side.jpg) top left;
　　background-position:1px 1px;
　　color:#fff;
　　font-size:12px;
　　letter-spacing:2px;
　　padding:5px 5px 5px 5px;
　　width:148px;
}

そして確認すると･･･

一応変わりましたね。
でも高さとか全然だめです。
まず、上に出てる横線から消しましょう。
background-positionで1pxずらしてるので画像の一番下の1pxが上に回りこんでるのが原因です。
今回はいっぱいいっぱいの画像を作ったので、background-positionの指定は必要ありません。
それから、ややこしいのでpaddingを全部ゼロにしましょう。
widthは画像サイズ(160px)に合わせます。
それから、いままでタイトルの高さは文字サイズに合わせて自動調整になってましたが、今回は画像の高さに合わせます。heightを指定しましょう。

.sidetitle{
　　background:#0072D3 url(http://www.mie1.net/usr/csstest/side.jpg) top left;
　　background-position:1px 1px;
　　color:#fff;
　　font-size:12px;
　　letter-spacing:2px;
　　padding:0px 0px 0px 0px;
　　width:160px;
　　height:45px;
}

そして確認。



うーん、画像はちゃんと表示されましたね。

では文字位置を調整しましょう。
ここでタイトルがおかしくなりますが、画像のどの位置に文字を起きたいかpaddingで調整します。
私の用意した画像は上から27px、左から60pxの位置から文字を表示すると青い枠内に収まりました。

.sidetitle{
　　background:#0072D3 url(http://www.mie1.net/usr/csstest/side.jpg) top left;
　　color:#fff;
　　font-size:12px;
　　letter-spacing:2px;
　　padding:27px 0px 0px 60px;
　　width:160px;
　　height:45px;
}

再び確認します。



では最後に画像の調整を行います。
まず、幅と高さを画像のサイズに合わせたのになぜおかしくなったのでしょう。
一番上のほうでタイトルの幅を計算したのを思い出してください。
線＋padding＋widthで求めましたよね。
ということは、今回その逆算が必要になります。
画像の幅(160px)－左からのpadding(60px)－線(0px)＝100px
画像の高さ(45px)－上からのpadding(27)－線(0px)＝18px

.sidetitle{
　　background:#0072D3 url(http://www.mie1.net/usr/csstest/side.jpg) top left;
　　color:#fff;
　　font-size:12px;
　　letter-spacing:2px;
　　padding:27px 0px 0px 60px;
　　width:100px;
　　height:18px;
}

どうでしょう。



はい完成です＾＾

  

タイトルバーの色を変えてみましょう。

はっきり言ってサイドバーの色を変えたのと同じです。



現在こんな感じですので、サイドバーと同じ茶色にしてみます。
「オリジナルデザインの登録」の画面で「スタイルシート」を見てみましょう。

.date{
　　border-top:1px solid #000066;
　　border-left:1px solid #000066;
　　border-right:1px solid #000066;
　　border-bottom:1px solid #000066;
　　background:#0072D3 url(/_img/simple_blue/obj.gif);
　　background-position:1px 1px;
　　color:#fff;
　　font-size:12px;
　　letter-spacing:2px;
　　padding:5px 0px 5px 5px;
}

サイドバーの時と同じ背景画像を指定しているのは「.date」の括りだけなので、ここで間違いないでしょうね。
同じく、「background」の「url」以降を消して、背景色を指定しましょう。

.date{
　　border-top:1px solid #000066;
　　border-left:1px solid #000066;
　　border-right:1px solid #000066;
　　border-bottom:1px solid #000066;
　　background:#AA6600;
　　background-position:1px 1px;
　　color:#fff;
　　font-size:12px;
　　letter-spacing:2px;
　　padding:5px 0px 5px 5px;
}

確認してみます。



はい、出来ましたね。＾＾
え？これだけ？
はい、これだけです。
いやー簡単簡単。  

サイドバーのタイトルの色を変えてみましょう。

さて、現在こんな感じで青くなってます。



実はこれ、画像が設定されています。
テンプレートによって見た目は違いますが、基本的には同じはずです。
ではどこで指定されているのでしょうか。
「オリジナルデザインの登録」の画面で「スタイルシート」を見てみましょう。

.sidetitle{
　　border-top:1px solid #000066;
　　border-left:1px solid #000066;
　　border-right:1px solid #000066;
　　border-bottom:1px solid #000066;
　　background:#0072D3 url(/_img/simple_blue/obj.gif) top left;
　　background-position:1px 1px;
　　color:#fff;
　　font-size:12px;
　　letter-spacing:2px;
　　padding:5px 5px 5px 5px;
　　width:148px;
}

スタイルシートの「.sidetitle」がサイドバーのタイトル部分を司っています。
背景は「background」ですので、「url」以降の部分が背景画像のようですね。
これを無くしちゃいましょう。

.sidetitle{
　　border-top:1px solid #000066;
　　border-left:1px solid #000066;
　　border-right:1px solid #000066;
　　border-bottom:1px solid #000066;
　　background:#0072D3;
　　background-position:1px 1px;
　　color:#fff;
　　font-size:12px;
　　letter-spacing:2px;
　　padding:5px 5px 5px 5px;
　　width:148px;
}

そして確認してみます。



はい、よくわかりませんね。＾＾；
一応画像は外れました。
ではなぜ見た目が変わらないかと言うと、画像と同じ色の背景色が指定されているからです。
ということで、背景色を変えましょう。
「.sidetitle」の「background」の後ろにある色指定文字列がそれにあたります。
そこを任意の文字列に変えましょう。（色の表現方法はこちら）

.sidetitle{
　　border-top:1px solid #000066;
　　border-left:1px solid #000066;
　　border-right:1px solid #000066;
　　border-bottom:1px solid #000066;
　　background:#AA6600;
　　background-position:1px 1px;
　　color:#fff;
　　font-size:12px;
　　letter-spacing:2px;
　　padding:5px 5px 5px 5px;
　　width:148px;
}

そして確認。



変わりましたが、カレンダーの色が変わってませんね。
かっこ悪いのでカレンダーも変えちゃいましょう。
カレンダーの曜日部分の設定は…
スタイルシートの「.calendarwd」がそれっぽいです。
そして同じく「background」の所ですね。
同じように背景画像を消して、背景色を変えます。

　　.calendarwd{
　　/*　　border-left: 1px solid #000066;
　　　　border-right: 1px solid #000066;*/
　　　　background:#0072D3 url(/_img/simple_blue/obj.gif);
　　　　background-position:-2px 0px;
　　　　color:#fff;
　　　　font-size:10px;
　　　　font-weight:bold;
　　　　letter-spacing: 2px;
　　　　padding:2px 0px 2px 5px;
　　}

　↓

　　.calendarwd{
　　/*　　border-left: 1px solid #000066;
　　　　border-right: 1px solid #000066;*/
　　　　background:#AA6600;
　　　　background-position:-2px 0px;
　　　　color:#fff;
　　　　font-size:10px;
　　　　font-weight:bold;
　　　　letter-spacing: 2px;
　　　　padding:2px 0px 2px 5px;
　　}

そして確認すると…



はい、完成です。＾＾  

記事の内容が濃くなってくると、初期設定のままでは横幅が足りなくなってきません？
はっきり言って記事欄が狭いんですよね。



今回は記事欄の幅を広げてみましょう。
これは簡単です。

「オリジナルデザインの登録」の画面で「スタイルシート」を見てください。
「#content」と「.blog」と言う部分が記事部分の括りになります。

#content{
　　width:390px;
　　float:right;
　　background-color:#ffffff;
　　padding:10px 5px 20px 5px;
}
　　・
　　・
　　・
.blog{
　　width:390px;
　　margin:0px 0px 0px 0px;
}

ここのwidthが幅の定義に当たりますので広げましょう。
とりあえず60ピクセルほど広げてみます。

#content{
　　width:450px;
　　float:right;
　　background-color:#ffffff;
　　padding:10px 5px 20px 5px;
}
　　・
　　・
　　・
.blog{
　　width:450px;
　　margin:0px 0px 0px 0px;
}

そして確認してみます。



あら！記事欄は広がったけど左のサイドバーが消えちゃいました。
スクロールしてみると、広がった記事欄に下のほうへ押しやられているのが分かります。
これは記事欄は広がったけど、ブログ全体の幅が変わってないからです。
ブログ全体の幅を指定している所を探しましょう。
「スタイルシート」の「#container」がブログ全体の幅を決めているようです。

#container{
　　font-size:12px;
　　width:740px;
　　background-color:#ffffff;
　　margin:0px auto;
　　text-align:left;
}

先ほど、記事欄を60ピクセル増やしたので、ブログの幅も60ピクセル増やしましょう。

#container{
　　font-size:12px;
　　width:800px;
　　background-color:#ffffff;
　　margin:0px auto;
　　text-align:left;
}

はい、簡単でしたね。
タイトル画像が740ピクセルに合わせた画像だったので、長さが足りずおかしくなっています。
タイトル画像も800ピクセルに合わせた画像に入れ換えておきましょう。

  

さて、タイトルの背景に写真を入れました。
でもブログタイトルが見えにくくなったので文字の色を変えました。
それでもイマイチだったので文字の位置を変えました。



これでなんとか一件落着。
いやーやれやれ、季節も変わったし背景の写真変えてみるかな～って事で変えてみました。



工工エエェ(´Д｀）ェエエ工工
また文字が見えにくい！
しかもブログ概要なんて完全に見えません。
そうなんです、画像の色によって見えにくくなっちゃうんです。
また調整のやり直し面倒くさいですよね。
いっそのことタイトル画像の外に出しちゃったら良いんじゃないでしょうか。

と言う事でやってみましょう。

まず、「オリジナルデザインの登録」の画面で「トップページ」を見て下さい。
で、次のような場所を探してください。

<div id="banner">
<h1 class="blogtitle"><a href="<%BlogUrl%>" accesskey="1"><%BlogTitle%></a></h1>
<div class="description"><%BlogDescription%></div>
</div>

青文字の<div id="banner">から</div>がタイトル画像の括りです。
その括りの中の「BlogTitle」と「description」がブログタイトルとブログ概要の文字を司っています。
要するにタイトル画像の中に表示されてるって事です。
と言う事は、この括りの外に出してしまえば良いって事ですね。

<div id="banner">
</div>
<h1 class="blogtitle"><a href="<%BlogUrl%>" accesskey="1"><%BlogTitle%></a></h1>
<div class="description"><%BlogDescription%></div>

こんな感じです。
これで一旦保存してブログを表示してみましょう。



はい、タイトル画像の下に出ましたね。
でもレイアウトが滅茶苦茶です。
もうちょっと文字の隙間を詰めましょう。
これは文字の位置を変えた時の手順と同じです。
「オリジナルデザインの登録」の画面で「スタイルシート」を見て下さい。

.blogtitle{
　　font-size:30px;
　　font-weight:bold;
　　padding:90px 0px 0px 10px;
　　text-align:left;
　　letter-spacing:2px;
}

.description{
　　color:#000000;
　　font-size:12px;
　　padding:40px 0px 0px 50px;
　　text-align:left;
　　letter-spacing:2px;
}

この部分ですね。
前回はタイトル文字はブログのトップからの隙間を指定しましたが、タイトル画像の下へ出したので、タイトル画像の底面からの隙間を指定する事になります。
ついでに左からの位置も調整して…

.blogtitle{
　　font-size:30px;
　　font-weight:bold;
　　padding:10px 0px 0px 30px;
　　text-align:left;
　　letter-spacing:2px;
}

.description{
　　color:#000000;
　　font-size:12px;
　　padding:10px 0px 10px 50px;
　　text-align:left;
　　letter-spacing:2px;
}

こんな感じですね。
保存して確認します。



おお～だいぶマシになりました。
でも背景が白のままじゃ面白くありませんね。
タイトル文字の背景色も指定してみましょう。
これはちょっと面倒ですよ。
まず、「blogtitle」と「description」を括るクラスを新たに作る必要があります。
とりあえず「#titledesc」とか言う名前にしましょう。
そしてこれを「オリジナルデザインの登録」画面の「スタイルシート」の一番下に追加します。

#titledesc{
　　background-color:#0072D3;
　　margin:0px 0px 0px 0px;
　　padding:0px 0px 0px 0px;
}

こんな感じです。
一応背景色だけ指定して、margin、paddingは隙間無しとしておきます。

次に、「オリジナルデザインの登録」画面の「トップページ」で最初に指定した部分、

<div id="banner">
</div>
<h1 class="blogtitle"><a href="<%BlogUrl%>" accesskey="1"><%BlogTitle%></a></h1>
<div class="description"><%BlogDescription%></div>

「banner」クラスの外に出した部分を、新たに追加した「titledesc」クラスで括ります。

<div id="banner">
</div>
<div id="titledesc">
<h1 class="blogtitle"><a href="<%BlogUrl%>" accesskey="1"><%BlogTitle%></a></h1>
<div class="description"><%BlogDescription%></div>
</div>

はい、また保存して確認します。



かっこよくなりましたね。
でもよく見てください。
タイトル文字ってこの時に赤にしたはずですよね。
それもそのはず、今回、タイトル文字を「banner」クラスの括りから外に出してしまったらです。
と言う事は、新たに括った「titledesc」クラスで文字色を指定すれば良いだけです。
ついでに文字色も白（FFFFFF）にしちゃいましょう。

#titledesc a{color:#FFFFFF;text-decoration:none;}
#titledesc a:link{color:#FFFFFF;text-decoration:none;}
#titledesc a:visited{color:#FFFFFF;text-decoration:none;}
#titledesc a:active{color:#FFFFFF;text-decoration:underline;}
#titledesc a:hover{color:#FFFFFF;text-decoration:underline;}

またこれを「オリジナルデザインの登録」画面の「スタイルシート」の一番下に追加してください。



はいOKです。
これでどんなタイトル画像にしても怖くありません。

さて、ここでサイドバーのカレンダーの日付を押してみてください。
すると、残念ながら変更前の状態になっちゃいましたよね。
ここで、「オリジナルデザインの登録」画面の説明です。
「スタイルシート」「トップページ」「個別記事」「アーカイブ」と４つの入力欄があると思います。
それぞれの役目を簡単に説明します。

●スタイルシート
　　　　　文字色など装飾の管理
●トップページ
　　　　　ブログを開いた時の画面のレイアウトを管理
●個別記事
　　　　　コメントの記入時など、１記事のみ表示される画面のレイアウトを管理
●アーカイブ
　　　　　カレンダーのクリック時、カテゴリのクリック時の画面レイアウトを管理

要するに「スタイルシート」以外の３つは兄弟みたいなもんです。
なので「個別記事」と「アーカイブ」にも「トップページ」に加えたのと同じ変更を加えます。

個別記事

　　<div id="banner">
　　　　<h1 class="blogtitle"><a href="<%BlogUrl%>" accesskey="1"><%BlogTitle%></a></h1>
　　　　<div class="description"><%BlogDescription%></div>
　　</div>

　　↓

　　<div id="banner">
　　</div>
　　<div id="titledesc">
　　　　<h1 class="blogtitle"><a href="<%BlogUrl%>" accesskey="1"><%BlogTitle%></a></h1>
　　　　<div class="description"><%BlogDescription%></div>
　　</div>

アーカイブ

<div id="banner">
<h1 class="blogtitle"><a href="<%BlogUrl%>" accesskey="1"><%BlogTitle%></a></h1>
<div class="description"><%BlogDescription%></div>
</div>

　　↓

<div id="banner">
</div>
<div id="titledesc">
<h1 class="blogtitle"><a href="<%BlogUrl%>" accesskey="1"><%BlogTitle%></a></h1>
<div class="description"><%BlogDescription%></div>
</div>

以上です。
一応、カレンダークリックしての確認と、コメントクリックしての確認をしておいてくださいね。



・オマケ
「スタイルシート」の以下の部分を触ると記事と今回追加した部分の隙間を調整できます。

#content{
　　width:390px;
　　float:right;
　　background-color:#ffffff;
　　padding:20px 5px 20px 5px;
}

#links{
　　width:160px;
　　float:left;
　　text-align:left;
　　margin:0px 0px 0px 0px;
　　padding:20px 5px 20px 5px;
　　background-color:#ffffff;
　　overflow:hidden;
}

#links2{
　　width:160px;
　　float:right;
　　text-align:left;
　　margin:0px 0px 0px 0px;
　　padding:20px 5px 20px 5px;
　　background-color:#ffffff;
　　overflow:hidden;
}

　　↓

#content{
　　width:390px;
　　float:right;
　　background-color:#ffffff;
　　padding:10px 5px 20px 5px;
}

#links{
　　width:160px;
　　float:left;
　　text-align:left;
　　margin:0px 0px 0px 0px;
　　padding:10px 5px 20px 5px;
　　background-color:#ffffff;
　　overflow:hidden;
}

#links2{
　　width:160px;
　　float:right;
　　text-align:left;
　　margin:0px 0px 0px 0px;
　　padding:10px 5px 20px 5px;
　　background-color:#ffffff;
　　overflow:hidden;
}

  

カスタムプラグイン機能、結構使ってる人いますよね？
色んなサイトで提供されてるブログパーツをサイドバー等に表示する機能です。

一応手順を説明しますと、

１．自分のブログにログインする。
２．管理画面より「設定」をクリック。
３．「カスタムプラグインの登録」欄の「カスタムプラグイン【1】～【３】」にブログパーツのコードを記入。

サイドバーのどの位置に表示するかは、

１．自分のブログにログインする。
２．管理画面より「サイドバー」をクリック。
３．登録したカスタムプラグインの番号を好きな位置に移動。

って感じです。

試しにYahoo天気予報のブログパーツを導入してみました。
（↓Yahooのブログパーツはこちらで公開されてます。）
http://public.news.yahoo.co.jp/blogparts/
そして右のサイドバーの上の方に持っていきます。
すると、簡単に表示されました。



簡単ですね。＾＾
でも良く見ると…

他のサイドバーのような枠がありません。
これって結構格好悪いですよね。＾＾；

ということで、カスタムプラグインにサイドバーの枠をつけてみましょう。

実は枠つけるのって結構簡単でして、オリジナルデザインの設定とか必要ありません。
どこから変更するかというと、「カスタムプラグインの登録」欄からです。
ブログパーツのコードの前後に次のような記述を入れましょう。

<div class="sidetitle">サイドバーのタイトル</div>
<div class="side">
<div class="sidebody">
ブログパーツのコード
</div>
</div>

はい、これだけです。
試しにサイドバーのタイトルのところに「天気予報」、ブログパーツのコードのところにYahoo天気予報のコードを入れて、管理画面のカスタムプラグインに貼り付けてみました。

すると…




はい、簡単でした。

ちょっと詳しく書きますね。

最初の<div class="sidetitle">から</div>の部分が、頭の青いタイトル部分の指定になります。
divで始まったら/divで閉めるまでその影響が続きます。
sidetitleクラスで背景の青い部分やタイトルの高さなどを指定しています。

続きの
<div class="side">
<div class="sidebody">
から
</div>　　（←<div class="sidebody">の閉め）
</div>　　（←<div class="side">の閉め）
までがタイトルの下の内容の部分になります。
sideクラスで枠線や枠線の色などを指定しています。
実はsidebodyの括りは意味が無いんですが、他のサイドバーがみんな付いてるので付けておきましょう。

さて、勘の良い人は気づくかもしれません。
じつはこのdivの枠組みを続けて書けば一つのカスタムプラグインの入力欄であたかも複数のプラグインを指定したかのように表示する事ができるんです。
ちょっと適当ですが、こんな感じです。

<div class=sidetitle>あいうえお</div>
<div class=side>
<div class=sidebody>
あいうえおあいうえお
</div>
</div>

<div class=sidetitle>かきくけこ</div>
<div class=side>
<div class=sidebody>
かきくけこかきくけこ
</div>
</div>

<div class=sidetitle>天気予報</div>
<div class=side>
<div class=sidebody>
yahoo天気予報のプラグイン
</div>
</div>

これを「カスタムプラグイン【1】」に貼り付けてみると…



まるで３つのプラグインを入れたかのように見えますね。
カスタムプラグインは【１】～【３】までの３つしか入力欄がありませんが、これでもっとたくさんのプラグインを見やすく配置する事が出来るようになります。  

タイトルの画像を変更した場合、画像とタイトル文字の色が近いと、タイトルが見えにくくなっちゃいます。
じゃ、タイトルの文字色を変えよう！と思って色々やってみても背景が写真だと色んな色が使われてて、あまり効果なかったりしますよね。
それなら背景の色が単純な部分に文字を移動してみましょう。



この写真だと下の方が単純な色になってますのでタイトルと概要を下の方へずらしてみる事にします。

「オリジナルデザインの登録」の画面で「スタイルシート」を見てみましょう。
まず、ブログタイトルと概要の位置を設定している部分を探します。
ずーっと見ていくと「.blogtitle」と「.description」と言う部分が出てきます。

.blogtitle{
　　font-size:30px;
　　font-weight:bold;
　　padding:20px 0px 0px 10px;
　　text-align:left;
　　letter-spacing:2px;
}

.description{
　　color:#000000;
　　font-size:12px;
　　padding:4px 0px 0px 35px;
　　text-align:left;
　　letter-spacing:2px;
}

ここがタイトルと概要の文字のレイアウトを設定している部分です。
そして、文字の位置を指定しているのが「padding」になります。
paddingでは表示した文字の周囲にどれだけ隙間を空けるかという設定をしています。
paddingの後ろに数値が４つ指定してありますね。
これは上・右・下・左の順で、隙間の大きさを指定しています。

まだ良く分かりませんね。
ではこの画像を見てみましょう。



タイトル文字の上と左に隙間がありますね。
これは上から20、左から10空けてあります。
そして、概要の部分もタイトルとの間に4、左から35あけてあります。
これはそれぞれ「.blogtitle」と「.description」の「padding」で指定してある通りですね。

ということでここを触ればいいだけです。
簡単ですね。
では、タイトルをもう少し下げてみます。
概要もタイトルと少し離しましょう。あと、少し右に寄せようかな。

.blogtitle{
　　font-size:30px;
　　font-weight:bold;
　　padding:90px 0px 0px 10px;
　　text-align:left;
　　letter-spacing:2px;
}

.description{
　　color:#000000;
　　font-size:12px;
　　padding:40px 0px 0px 50px;
　　text-align:left;
　　letter-spacing:2px;
}

そして「登録」ボタンを押して確認。



はい、上手くできました。＾＾

隙間の数値とかどんな値を入れればいいか分からないですよね。
これはもういろいろ変えながら調整するしかありません。
一応、ブログ全体の幅とタイトル画像の高さは意識してくださいね。
じゃないと外に飛び出しちゃいます。

あと、「padding」で右と下の隙間は指定しなくていいの？って思われる方もあるでしょう。
シンプルテンプレートシリーズは、タイトルと概要の文字は左上に寄せるよう設定されています。
なので上と左の隙間を設定すれば右と下の隙間は自動的に調整されます。
他のテンプレートではタイトルを右上に寄せてあるものもあったりします。
その場合は右と上の隙間を設定すればＯＫです。  

タイトルの画像を変えてみたけど、ブログタイトルと概要が見づらくなった！って事は良くあります。こんな感じ↓

と言う事で、ブログタイトルとブログ概要の文字色を変えてみましょう。

では、「オリジナルデザインの登録」の画面で「スタイルシート」を見てみましょう。
まず、ブログタイトルの色を設定している部分を探します。
リファレンスカテゴリに「スタイルシートのセレクター」の一覧を上げておきましたのでそこから探してみるのも良いでしょう。

ずーっと見ていくと「.blogtitle」と言う部分が出てきます。
普通に考えるとこれなんですが、じつは違います。
ブログタイトルの部分はクリックするとブログのTOPへ飛ぶように出来ています。
これはHTMLで言う、aタグなんですね。（詳しい話は飛ばします。＾＾；）
なので、「#banner a」の記述がそれに当たります。

#banner a{color:#fff;text-decoration:none;}
#banner a:link{color:#fff;text-decoration:none;}
#banner a:visited{color:#fff;text-decoration:none;}
#banner a:active{color:#fff;text-decoration:underline;}
#banner a:hover{color:#fff;text-decoration:underline;}

この部分になるわけですが、５つありますね。
この５つにはそれぞれ役割があります。
・linkは通常の状態の文字色
・visitedはリンク先に訪問済みの場合の文字色
・activeは選択状態の場合の文字色
・hoverはマウスカーソルが上にきた状態の文字色
となります。
何も無しのaは何でしょう？
めんどくさいので試しません。＾＾；
色々やってみてください。

まずタイトル文字を赤にしてみます。
ついでにマウスカーソルが上にきたら文字の背景を薄い赤色にする記述を追加してみます。

#banner a{color:#FF0000;text-decoration:none;}
#banner a:link{color:#FF0000;text-decoration:none;}
#banner a:visited{color:#FF0000;text-decoration:none;}
#banner a:active{color:#FF0000;text-decoration:underline;}
#banner a:hover{color:#FF0000;background:#FFCCCC;text-decoration:underline;}

FF0000とか指定している部分が色の表現になります。
色の表現方法についてもリファレンスカテゴリに「色の表現方法」が上げてありますので参考にしてみてください。

さて、これでタイトルの文字色は指定できました。
次は概要の文字色を変えましょう。
これは簡単です。
「.description」が概要の設定部分に当たります。

.description{
　　color:#fff;
　　font-size:12px;
　　padding:4px 0px 0px 35px;
　　text-align:left;
　　letter-spacing:2px;
}

この部分の「color」って所がそうですね。
ここを黒にしてみます。

.description{
　　color:#000000;
　　font-size:12px;
　　padding:4px 0px 0px 35px;
　　text-align:left;
　　letter-spacing:2px;
}

たったこれだけです。
「登録」ボタンを押して確認しましょう。



上手くできましたね。＾＾

でもこれでも見えにくいですね。
タイトルと概要を画像の下の方へ持ってくれば良さそうな気がします。
次は表示位置の変更方法を書いてみます。  

ブログって過去の記事を探すには向いてません。
なのでブログって嫌いなんですが…
とりあえず、目的別に探すにはサイトマップを見ていただければ良いかと思います。
記事が増えてきたら分かりやすい目次も作りたいと思ってます。

サイドバーの左上に、「目的別の目次」があると思いますので、そこからやりたい事を探してください。
ジャンルとしては、全体の改造、タイトルの改造、サイドバーの改造、記事の改造、リファレンスとなってます。

●全体の改造
　ブログ全体に影響する改造です。

●タイトルの改造
　ブログのタイトル部分に影響する改造です。

●サイドバーの改造
　サイドバー部分に影響する改造です。

●記事の改造
　記事部分に影響する改造です。

●リファレンス
　資料的なものです。
　理解が進んでくると結構役立つと思います。

タイトル、サイドバー、記事の各部位に付いては下図を参照してください。

  

コンピュータやテレビの画面に表示されている画像っていろんな色が表示されてますよね。
でも実は赤・緑・青の３つの色の組み合わせだけで表示されてるって知ってました？
パソコンのモニターには赤・緑・青の３つが一組になった小さなランプが数十万～数百万個並んでいるんです。
たとえば、1024×768の解像度のモニターだと、1024×768＝786432個の赤・緑・青が並んでいるんです。
ま、それは置いといて、コンピュータで表現される色について書いてみます。

コンピュータで表示される色は、赤Ｒ・緑Ｇ・青Ｂの光の三原色で表現されています。
なんじゃそら？って思いますよね。
たとえば、印刷物は色の三原色の青・赤・黄で表現されてます。
これは子供の頃、絵の具を混ぜて色んな色を作って遊んだ人にはわかると思います。
赤と青を混ぜると紫とか、黄色と青で緑とか、赤と黄色でオレンジとか…
色の三原色は青・赤・黄を混ぜる事で黒に近づくのに対して、光の三原色は赤・緑・青を混ぜる事で白に近づきます。

なんの事やらわからないですよね。＾＾；

とりあえず、下の図を見てください。

赤Ｒと緑Ｇが重なると黄色に、緑Ｇと青Ｂが重なると水色に、青Ｂと赤Ｒが重なると紫になってます。
そして赤Ｒ、緑Ｇ、青Ｂが重なると白になります。
この赤Ｒ、緑Ｇ、青Ｂの混ぜ具合で色を調整する事ができるのです。

ブログではこの色の調整をシャープ＋６桁の英数字で行ないます。
黒だと＃００００００
白だと＃ＦＦＦＦＦＦ
赤だと＃ＦＦ００００
緑だと＃００ＦＦ００
青だと＃００００ＦＦ
と言った感じです。

０とかＦとかなんじゃい？って感じですよね。＾＾；
これは１６進数と呼ばれる表記です。
人間が一般的に使ってるのは１０進数で、0,1,2,3,4,5,6,7,8,9と来たら一桁上がって10となります。
１６進数は、0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,Fと来て10と一桁あがります。
ようするに１６になったら一桁上がるので１６進数ってわけです。
なので16進の10は１０進の16で、１６進のＦＦは１０進の255となります。少ない桁で大きな値を表現できるわけですね。
まあ、色の指定のときは数値が大きいか小さいかが分かればよいです。

さて、色の指定に戻ります。
６桁の英数部分の１・２桁が赤Ｒの割合、３・４桁が緑Ｇの割合、５・６桁が青Ｂの割合になってます。
００が発光がゼロで、FFに近づくほど発光が増します。
なのでこんな感じになります。

・濃い赤を作りたいとき
　　１、まず普通の赤は
　　　　#FF0000　■
　　２、これを濃くしたいんだから発光を弱めればいいのかな？
　　　　#CC0000　■
　　３、もうちょっと暗くしたいなあ
　　　　#880000　■

・緑っぽい水色を作りたいとき
　　１、水色は緑と青だから
　　　　#00FFFF　■
　　２、緑っぽくしたいんだから青の発光を弱めればいいのかな？
　　　　#00FFAA　■
　　３、もうちょっと緑に寄せてみよう
　　　　#00FF88　■

・薄い青を作りたいとき
　　１、まず青色だから
　　　　#0000FF　■
　　２、薄くするって事は白に近づけるんだから全ての色を発色させなきゃ
　　　　#5555FF　■
　　３、いい感じ、もっと薄くしよう
　　　　#AAAAFF　■

と言った感じです。
なかなか楽しいですよね。
各色ごとに００～FF（０～255）まで256段階の調整が可能です。
という事は、256の3乗で16777216色の表現が可能なわけです。

調整がめんどくさい！って人は、このブログのサイドバーのお気に入りにも入れてある、「カラーマップ」のサイトを利用するのも良いでしょう。  

ブログのレイアウトが一気に違って見えるのは、やっぱりブログの一番上にあるブログタイトルを表示している部分じゃ無いでしょうか。



ということで、ブログタイトルの画像を変更してみましょう。

まず、「オリジナルデザインの登録」の画面で「スタイルシート」を見てみましょう。
今回は説明しませんが、「スタイルシート」は、ブログのデザインを設定している部分です。ブログタイトルの文字や画像などもここで指定しています。

ま、とりあえず上から見ていきましょう。
すると次のような部分が出てくると思います。

#banner,#subbanner{
　　background:#0072D3 url(/_img/simple_blue/head.gif) left bottom;
　　padding:0px 10px 10px 10px;}

ここがブログタイトルの背景を設定している部分です。
url()の中が画像ファイルの指定をしてる場所みたいですね。
ためしに自分のブログアドレスの後ろにアドレスをつなげて表示してみましょう。
http://css.mie1.net/_img/simple_blue/head.gif
なんか縦に細長い青い線が出ましたね。
この画像を並べて青い背景にしてるんだな～と想像できます。
じゃ、ここを自分の好きな画像ファイルに変えればタイトルの画像が変わるって事ですね。

次は画像を用意しないといけません。
タイトルに使う画像はデジカメで撮影した写真などを使えば良いのですが、タイトルの大きさに収まるようにしないといけません。
無料で使える画像編集ソフト「JTrim」を使ってみましょう。
ダウンロードはこちらから。

まず必要な情報として、「3カラム　シンプルブルー」のテンプレートの横幅は740ピクセルです。
なので横幅が740ピクセルの画像を作らなくてはいけません。
また、一番上のタイトル部分ですので高さがありすぎてもおかしいですので、なるべく横長の画像にしましょう。
では、その手順を簡単に書いてみます。

１、JTrimを起動してタイトルに使いたい画像を開きます。
２、開いた画像の上でマウスをドラッグして切り抜きたい範囲を選択
３、メニューの[イメージ]-[切り抜き]
４、メニューの[イメージ]-[リサイズ]-[サイズで指定する]-[横に740入力]
（この場合元々の値が740より小さい場合、タイトルに使うには小さすぎる画像と言う事ですのでもう少し大きい画像を用意して下さい）
５、[縦]の値を憶えておく。
６、[OK]
７、メニューの[ファイル]-[名前を付けて保存]でJPG形式で保存する。

さて、タイトル画像ができましたので、ブログにアップロードしましょう。
「画像・動画の登録、一覧、削除」から画像をアップロードして、その画像のアドレスを参照します。
参照方法は下の図を見てください。



すると画像のアドレスはhttp://www.mie1.net/usr/csstest/title.jpgとわかりました。（このアドレスは利用する人によって変わります）
では先ほどの「スタイルシート」の画面に戻りましょう。

画像を指定してた部分を変更します。

#banner,#subbanner{
　　background:#0072D3 url(http://www.mie1.net/usr/csstest/title.jpg) left bottom;
　　padding:0px 10px 10px 10px;}

あとは「登録」ボタンを押して確認しましょう。



おー！変わった！　　けど…あれ？
なんか画像が切れてますよね。
これはタイトル画像の部分の高さを指定していないからです。
もう一度、「オリジナルデザインの登録」の画面で「スタイルシート」を開きましょう。
そして画像の高さを指定するおまじないは「height」ですので、そこに先ほど作った画像の高さをピクセルで指定しましょう。
私の場合は、横740ピクセル×縦240ピクセルだったので、「height: 240px;」を指定します。
あと、paddingで余計な隙間が指定してあるので全部ゼロにしましょう。
それと、ぎりぎりいっぱいの画像を使っているので left bottom も消してしまって問題無いです。まあ、これは残して置いても悪さしませんが…

#banner,#subbanner{
　　background:#0072D3 url(http://www.mie1.net/usr/csstest/title.jpg);
　　height: 240px;
　　padding:0px 0px 0px 0px;}

そしてもう一度「登録」ボタンを押して確認しましょう。



上手く出来ましたね＾＾

でも良く見ると画像の白い部分とブログタイトルがかぶって見えにくくなっています。
次はブログタイトルとブログ概要の文字色や表示位置の変更についてやってみたいと思います。

今回あまり深く書かなかった内容で、スタイルシートの「padding、backgroundのleft bottom」がありました。
興味ある人は、このブログの「お気に入り」サイドバーにある「HTMLクイックリファレンス」で調べてみてくださいね。  

ちょっと記述を間違っただけでブログのデザインは簡単にめちゃくちゃになります。
元に戻せるように作業の前にはバックアップ（保存）しておきましょう。

デザイン情報の画面への移動方法は以下とおりです。

１．自分のブログにログインする。
２．管理画面より「デザイン」をクリック。
３．左側の「デザインカテゴリ」から「オリジナルデザインの登録」をクリック。

すると「スタイルシート」「トップページ」「個別記事」「アーカイブ」と４つの入力欄のある画面が出てきたと思います。
この４つの内容でブログのデザインは構成されています。
今後、デザインを改造する時もこの画面で行いますので憶えておきましょう。

さて、デザインの保存方法なのですが、この「スタイルシート」「トップページ」「個別記事」「アーカイブ」の４つの内容をメモ帳などに貼り付けてファイルに保存しておけば良いだけです。

私は以下のような手順で保存しています。

１．「スタイルシート」の入力欄をクリック。
２．入力内容を全て選択する。
　　1文字でも漏れると大変ですのでキーボードの「Ctrl」と「Ａ」を押すと良いです。
　　（または、右クリックして「全て選択」）
３．右クリックして「コピー」。
４．Windowsの「スタートメニュー」-「アクセサリ」より「メモ帳」を開く。
５．３でコピーした内容をメモ帳に「貼り付け」。
６．メモ帳の「ファイル」メニューから「名前を付けて保存」。
　　（私は「スタイルシート.txt」としています）

これで完了です。
「トップページ」「個別記事」「アーカイブ」も同じように保存しましょう。
デザインをいじる前には毎回必ずこの作業を行いましょう。
もし作業しててブログのデザインがおかしくなったら、今の作業とは逆に、保存したファイルからブログの管理画面へ貼り付ければ壊れる前の状態に戻ります。  

まず、この講座では、改造する元となるデザインに「シンプルテンプレート 3カラム」の「3カラム　シンプルブルー」を利用する事にします。
基本的には、どのテンプレートを使ってもやる事は同じですが、シンプルテンプレートシリーズのコードが一番綺麗に書かれてるので分かりやすいと思います。

レイアウトの変更手順は以下のとおりです。

１．自分のブログにログインする。
２．管理画面より「デザイン」をクリック。
３．左側の「デザインカテゴリ」から「シンプルテンプレート 3カラム」をクリック。
４．「3カラム　シンプルブルー」を選択する。  

ブログって日記的な物を書くには便利で楽しいですよね。
私自身はブログってあまり好きな仕組みじゃ無いんですが、今までのホームページと違って専門知識が無くても簡単に参加できるし、おかげでネット上に公開される情報も増えてこれはこれで大変良いものと思います。
さて、ブログへの記事投稿にも慣れて来て読者も増えてくると、段々気になって来るのがブログのデザインですよね。
用意されたレイアウトだけじゃ嫌だ！自分だけのデザインにしてみたい！と言うブロガーさんも多いんじゃないでしょうか。
そんなブロガーさんの為に、なるべくお手軽で簡単なレイアウト改造方法を公開していきたいと思います。
勘の良い人だと少し読めばどんどん自分で出来るようになると思います。
こんな事したいんだけどどうやればいいの？ってお問合せもお待ちしております。
m(_ _)m

一応お約束ですが、記述漏れなどで失敗するとブログレイアウトが簡単に崩れちゃいます。
記事が消えるとかそんな事は無いと思いますが、ブログのレイアウト改造は自己責任でお願いします。

それでは、自分だけのブログデザイン目指して頑張ってみましょう。  

スタイルシートのセレクター一覧です。

セレクター	説明
ul.rss	RSSのセレクター
ul.rss li	RSSの並び方のセレクター
ul.rss a:link	標準のリンクセレクター
ul.rss a:visited	訪問済みリンクセレクター
ul.rss a:active	選択状態のリンクセレクター
ul.rss a:hover	マウスカーソルが上にきた時のリンクセレクター
#container	コンテナ部分のセレクター
#banner,#subbanner	トップバナーのセレクター
#banner a	トップバナー部分のアンカーセレクター
#banner a:link	トップバナー部分の標準のリンクセレクター
#banner a:visited	トップバナー部分の訪問済みリンクセレクター
#banner a:active	トップバナー部分の選択状態のリンクセレクター
#banner a:hover	トップバナー部分のマウスカーソルが上にきた時のリンクセレクター
#subbanner a	サブバナーのアンカーセレクター
#subbanner a:link	サブバナーの標準のリンクセレクター
#subbanner a:visited	サブバナーの訪問済みリンクセレクター
#subbanner a:active	サブバナーの選択状態のリンクセレクター
#subbanner a:hover	サブバナーのマウスカーソルが上にきた時のリンクセレクター
h1,h2,h3	h1,h2,h3のセレクター
.blogtitle	ブログタイトルのセレクター
.description	概要のセレクター
#content	記事外枠部分のセレクター
#links	左サイドバーのセレクター
#links2	右サイドバーのセレクター
#footer	フッタのセレクター
#copyright	コピーライトのセレクター
.blog	プログ部分のセレクター
.date	日付のセレクター
.blogbody	プログボディのセレクター
.title	記事タイトルのセレクター
.main	記事部分のセレクター
.main-continues	続きを読むのセレクター
.posted	posted部分のセレクター
.menu	記事下部メニェーのセレクターでず。
.comments-head	コメントヘッダーのセレクター
.comments-body	コメントポディのセレクター
.comments-post	コメント投稿者のセレクター
.trackback-url	トラックバックURLのセレクター
.trackback-body	トラックバックボディのセレクター
.trackback-post	トラックバック元リンク等のセレクター
#author	ニックネーム部分のセレクター
#email	e-mail部分のセレクター
#url	URL部分のセレクター
#text	テキスト部分のセレクター
.pagetop	このページの上へ▲のセレクター
.calendarhead	カレンダーヘッダー部分のセレクター
.calendartable	カレンダーテーブル部分のセレクター
.calendarweek	カレンダー曜日部分のセレクター
.calendarwd	カレンダー内枠のセレクター
.calendard	カレンダーテキストの位置セレクター
.calender	カレンダーのセレクター
.sidetitle	サイドバータイトルのセレクター
.side	サイド文字部分のセレクター
.side .text	入力部分の横幅のセレクター
.photo	サイドバーイメージのセレクター
.nickname	プロフィールニックネーム部分のセレクター
.message	プロフィールメッセージ部分のセレクター

  

HTMLの置換タグ一覧です。

タグ	機能
<%CSSUrl%>	スタイルシートURLのタグ
<%RDFUrl%>	RSS URLのタグ
<%RSDUrl%>	XML URLのタグ
<%SiteMapUrl%>	サイトマップURLのタグ
<%BlogTitle%>	ブログタイトルを表示させるタグ
<%BlogDescription%>	ブログ概要を表示させるタグ
<%BlogUrl%>	ブログURLのタグ
<%PluginListRight%>	右メニューを表示させるタグ
<%TrackBackAutoDiscovery%>	トラックバックURLを自動的に検出するためのタグ
<%EntryDate%>	記事日付のタグ
<%EntryId%>	記事番号のタグ
<%EntryTitle%>	記事タイトルのタグ
<%EntryBody%>	記事内容のタグ
<%EntryPermalink%>	個別記事画面へのリンク
<%EntryAuthor%>	ハンドルネームを表示させるタグ
<%EntryTime%>	記事投稿時間を表示するタグ
<%EntryCommentCount%>	コメント数を表示するタグ
<%EntryPingCount%>	トラックバック数を表示するタグ
<%EntryCategoryUrl%>	カテゴリーページへのリンク
<%EntryCategory%>	カテゴリーのタグ
<%PrevPage%>	前の記事へのリンク
<%NextPage%>	次の記事へのリンク
<%PluginListLeft%>	左メニューを表示させるタグ
<%Year%>	西暦を表示させるタグ