『C+EのB』(exkydeさん)の [ ジャンル：Doblog-CSS ]は、
exkydeさんDoblog卒業につき、『どぶさぽちゃんv』で引き継ぐことになりました。
記事内容についての疑問・質問などは、『どぶさぽちゃんv』へどうぞ(^^*
(お答えできる限りがんばります！難しいときはいろいろ調べます!!)

『C+EのB』(exkydeさん)の [ ジャンル：Doblog-CSS ]　　　　　　　　　　　　　[ 更新確認日：'05.05.31 ]
　：：　シンプルで洗練された感じのテンプレートを作り上げていく様子を丁寧に記録してあります。

　* とりあえず色々表示しておく
　　：記事作成時に使えるタグと絵文字をとりあえず試してあります。

　* ヘッダを変えてみる
　　：Blogの一番上にあるタイトルやポータル系のリンク等の部分をカスタマイズする過程です。

　* 色を落としてみる
　　：Blogのコンセプトカラーを決めて全体の色を統一していく過程です。

　* ボタンもちょいいじってみる
　　：「検索」「ログイン(アウト)」ボタンを立体的から平面的に変更されています。

　* エントリーフッターもいじってみる
　　：個別記事のデータ部分を記事本体と区別しやすいように変更されています。

　* 引用をはっきりと表現する
　　："I（斜体）タグ"を引用に使えるようカスタマイズをされています。
　　　…　Doblogは、引用文と意味付けをするタグ(quote系のタグ)が使えないので、
　　　　　「やむなく」許可されているタグの１つを変形させていますが、
　　　　　「そもそもBlogとは」を考えるとquote系タグ利用を許可すべきでは？という問題提起もされています。

先日放置したボタンですが、これだけデフォルトの表示だと妙に立体的です（winの場合。macはどうだったかな…）
ですので、これもフラットな表示にしてみようと思います。

本当はOSのデフォルトからあまり変えてしまうと、それまでユーザーがOSの操作を通して学習してきた「これはボタンだ」という認識を白紙に戻す（自分のBlog用の学習を強いる）ので、ユーザビリティの観点からは好ましくない場合もあります。
が、今回は突っ走ります。深く考えません。

ということで、フォーム系をいじるために以下のセレクタを追加します。

input {
border-style: double;
border-width:3px;
border-color: #333333;
background-color:#ffffff;
padding-top:2px;
}

これによって「ログアウト」「検索」ボタンと検索用の窓のスタイルを変えます。
小さなパーツの変更ですがだいぶフラットな見た目になると思います。paddingは、なぜか上余白が少ない気がしたので追加しました。

Doblogはquote系のタグ…つまり文章に「これは引用文ですよ」という意味付けをするタグが使えません。
正直、Blogというのはクロスリンクやトラックバックと並んで引用の多いジャンルだと思うので、この仕様はいただけないのですが、せめて（視覚系ブラウザを使って）閲覧される方々には、その文章がBlogオーナーによるものなのか、あるいはどこか他の場所からの引用なのかを明示的に表現できるようにしてみます。

その為に、Doblogで許可されているタグのうち一つを使います。
今回はI（斜体）タグ。

通常Iタグというのはインライン要素といって文字列の中の一部分にのみ適用することが可能です。装飾を施した場所がインラインレベルで反映されますが、この動きを「他の文章とある程度離して独立した塊（ブロック）として表示させるように」変えてしまいます。

この辺、渦さんの「文字にワクをつける方法」というエントリが参考になると思います。
キモは「display: block」というプロパティです。これにより本来インライン要素であるIタグを強制的にブロック要素にしてしまいます。

他にデザイン的に考えたのは…
○実線で枠をつけて薄く地に色を引く
○本来Iタグでは斜体がかかるのでこれは解除
○右下あたりに引用を意味する背景画像を配置（今回エントリでアップロード）

ということで、Iタグのスタイルを設定する記述はこんな感じになりました。

i{
width:480px;
margin:5px;
padding:5px;
padding-bottom:15px;
border:1px solid #666666;
font-style:normal;
text-decoration:none;
background-color:#fcfcff;
background-image:url(http://www.doblog.com/img/u6870/FI421560_0E.gif);
background-repeat: no-repeat;
background-position: right bottom;
}

これをスタイルシートに加える（多分デフォルトではIセレクタに関する記述は無いはずです）ことで設定できます。

上で考えたこと以外にやったことは、一行目で「width:480px」を記述して、引用部分の幅をエントリ幅よりやや狭くしたことです。いろいろな部分で微妙に本文と差をつけることで、視覚的に本文とは違う性質の文章であることをより示すためです。
background-image:urlは今回も下書きで先に画像を上げてアドレスをゲットしています。

これで引用部分はエントリを書くときに「斜体」を選ぶことで視覚的には表現できるようにしてみました。
以後、引用する機会があったらこれを使います。

一応サンプルです
ちなみに、今回の措置は「やむなく」行っています。
僕が引用を用いるかは不明ですが、せっかくある引用系のタグを通さないのは残念極まりないことです。
他のサービスなどではこれが利用できるものもあります。

確かに、デフォルトでは引用部分に斜体が用いられるブラウザもあります。
けれど、「引用部分が斜体に見えること」と「斜体を引用の代わりに使う」のでは、情報をマークアップしていくという観点ではまったく次元が違います。
デフォルトの見た目が同じだからいいのでは？という考え方は「Webは視覚的に情報を得、判断するもの」という先入観にとらわれている考え方なのです。
この話は、先にあげたエントリで軽く触れた「苦言」かつ「アクセシビリティ」などを下地とした話に続く予定です。

デザイン変更に当たってコンセプトカラーのようなものも変えようかと思いまして。
まずはモノトーンにしていこうと方々の色を落としてみます。

日付に設定されているのがblog-dateクラスで、今まではここに緑系の色を流していました。
まずはこれをものとーん！（魔法？）

.blog-date {
font-family: sans-serif;
font-size: 1em;
line-height: 1.3em;
text-indent: 5px;
padding-top: 2px;
padding-bottom: 2px;
margin-top: 10px;
border-style: solid;
border-width: 1px;
border-color: #2E8B57;
background-color: #F0FFF0;
clear: both;
}
colorプロパティを追加して、他の色関係（境界線と背景）もモノトーンに統一します。

.blog-date {
font-family: sans-serif;
font-size: 1em;
line-height: 1.3em;
text-indent: 5px;
padding-top: 2px;
padding-bottom: 2px;
margin-top: 10px;
border-style: solid;
border-width: 1px;
border-color: #333333;
color:#333333;
background-color: #eeeeee;
clear: both;
}


他に目立つのはmenu-headerとblog-title-titleの地の色に青を引いている部分ですかね。
ここもものとーん！

menu-headerとblog-title-titleとblog-titleを書き換えます。
メニューの背景は#333333（#333）、エントリのタイトルの背景は#666666（#666）に設定。
僕はblog-title-title:first-letterも設定している（エントリのタイトルの先頭文字にのみ適用されます）ので、ここの色も#111111に変更。

さらに、エントリ群を囲んでいる大本のタイトル（↑のblogって表示されている部分）と周りの枠線もモノトーン化します。blog-headerの背景をmenu-headerにそろえて#333333にblogクラスとmenuクラスの枠線も同じく#333333に変更。
最後にbodyの背景を白に変更。なんだか眠い画面になりましたが減色作業終了。

ちなみにリンク部分は#3366ffを基調とした装飾になっていますが、ここをモノトーンにするかはまだ考え中です。
リンクは基本的に青に下線にしておいたほうが戸惑わないのではないか、という見地からです。
あっさり変更するかもしれませんが、今のところは保留にしておきます。

<<追記>>
と、思ったけどあまりにも青が強すぎるので#333366あたりに変更。

Doblogの構造は、ざっと見るとCSSの中の３箇所でblogの幅を決定している模様です。

.mydoblog-position form table
.mydoblog-header
.mydoblog-contents
うちではこれに対してwidth: 700pxを設定してblogの幅を700ピクセルにしています。
デフォルトの大きさ（776ピクセルかな）では横800ピクセルのモニタで最大化したブラウザでもお気に入りの窓などを出していると横スクロールが発生するかと思いましたので。

で、そのまま放置しているので一番上の画像が中途半端に切れてしまっています。
そこで一念発起、ちょっといじります。というか、エントリがあがった頃には変更済みのはずです。


いじる前のスタイルシート
.mydoblog-position form table {
width: 700px;
}
.mydoblog-header {
font-family: sans-serif;
font-size: 1.5em;
font-weight: bold;
color: #6A5ACD;
background-color: #F0F6FF;
width: 700px;
text-align: left;
text-indent: 5px;
padding-top: 3px;
padding-bottom: 3px;
margin-top: 3px;
margin-bottom: 5px;
border-style: solid;
border-color: #666666;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
/* display:none;　*/
}
.mydoblog-contents {
width : 700px ;
text-align : left ;
}

mydoblog-headerセレクタでdisplay:noneをコメントアウトしているのは何かの実験の名残だと思われます（覚えていない）。
border-widthを上下左右別々に指定しているし、何かデザインをいじっていて途中で飽きた臭がします。

とりあえず、Blogの背景自体を白にすることを考えて、上の切れた画像の上に表示させる画像を作ります。高さは少しゆとりを持たせてデフォルトの40ピクセルから80ピクセルに変更。
さらに、「MyDoblogトップ」など上に並んでいる文字のスタイルが外部CSSの後に再設定されているので文字色変更ができないから画像でもメニューの地の部分が黒くなるように作成してアップ。


上の工程で一度エントリを下書きでアップし、アップした画像のURIを確認。
mydoblog-position form tableセレクタを以下のように書き換える。

.mydoblog-position form table {
width: 700px;
height:80px;
padding-left:40px;
background-image:url(http://www.doblog.com/img/u6870/FI371080_1E.gif);
}

これで最上段の領域を「height:80px」によって拡張して、そこにBlogタイトルも盛り込んだ（画像を配置した）ので、今までその下に表示していた「C+EのB」というタイトルを非表示にします。先段少し触れたdisplay：noneを有効にします。
mydoblog-headerを以下のとおりに変更します。

.mydoblog-header {
display:none;
}

バッサリスッキリ。mydoblog-header…表示しません！の一行のみです。

これで上の部分いじりの大まかな部分を完了します（飽きてきた）。
ただ、ログアウトボタンがちょっとしゃしゃり出て着すぎているので、この辺を今後どうにかしようと思います。
今回はその下のメニューを黒い部分に乗せたかったのでざっくりpaddingとりました。

ログアウトボタンをいじった結果、この辺をもう少しきちんと修正するかもしれませんが。

あと、なんか左のメニューが一部間延びしている気がしますが、それも後日考えることにします。
<<追記>>
…と思ったらメニュー変化ナシでした。何回もプレビューしたのに。

エントリーとは個別の記事のことです。
で、フッターとは、ここでいえば更新日時や各種ＵＲＩなどを表示している領域です。
ここに少しスペースを空けて背景に文字を入れます。（本当は必要な文字情報をこのように挿入するのは、テキストブラウザやリーダーに優しくないのでよろしくないですが）

ということで、このフッター領域を確保しているブロック（ＤＩＶタグ）のクラスblog-entry-footerを以下のように設定します。

.blog-entry-footer {
padding-top:15px;
padding-bottom:10px;
padding-left:5px;
padding-right:5px;
background-image:url(http://www.doblog.com/img/u6870/FI383840_0E.gif);
background-repeat: no-repeat;
background-position: 0% 0%;
}

今後は背景に置いた画像を調整するだけでエントリの本文と区別しやすくなるかもです。もしかしたらこの領域だけcolorプロパティも調節して視認性を若干下げるかもしれません。
エントリの本文があっての付帯情報なので、ぱっと見にプライオリティ（優先度）が低いことを表現したいので。

：：：：：この記事は、
　　Doblog卒業なさった exkydeさんからの置き土産です(^^*
　　　　　ありがとうございます♪
　　　　　疑問・質問は『どぶさぽちゃんv』へどうぞ。：：：：：

ソースを見るために～

太字　…　＜b＞
車体…もとい斜体　…　＜ｉ＞
下線　…　＜ｕ＞

リンク

絵文字は適当に

『まったり茶屋』(のんちぃ さん)の [ ジャンル：Doblogスタイルシート ]は、
のんちぃさんDoblog卒業につき、『どぶさぽちゃんv』で引き継ぐことになりました。
記事内容についての疑問・質問などは、『どぶさぽちゃんv』へどうぞ(^^*
(お答えできる限りがんばります！難しいときはいろいろ調べます!!)

* ライン、気になりませんか？
　　：カレンダー内のライン(今月分と月毎分の境界線)をイメージに合わせてカスタマイズする方法。

* このズレ、気になりませんか？
　　：Doblogテンプレートでのメニュータイトルの微妙なズレを解消する方法。

* これは気になりませんか？ -この記事のURL編-
　　：「この記事のURL」と「トラックバックURL」の文字サイズ等を調整する方法。

* 記事の画像のフチ、気になりませんか？
　　：画像のフチ(リンクと同じ色の枠がありますよね？)を消す方法。

* 背景画像を設置しよう ： ３パターンを紹介。併せて、素材を別サイトからもらうときの心得も。
　　：(1) 記事中のシーンごとに背景設定
　　 (2) １記事全体の背景設定
　　 (3) Blog全体の背景画像設定

* リンクの下線をなくすには
　　：(1) リンクの設定場所とその意味
　　 (2) 下線をなくす方法
　　 (3) 下線の色や形状(点線 等)にする方法
　　 (4) onマウスで白抜き文字表示する方法

* カレンダーを装飾してみよう　：カレンダーのカスタマイズ。
　　　(1) 上下の隙間
　　　(2) 記事のある日に背景色(or画像)
　　　(3) リンクの装飾（文字色・ライン）変更

* 色指定はめんどくさい？
　　色の名前と色コードの一覧表を公開。
　　色指定は、#・・・・・・と英数字で指定する方法と色の名前で指定する方法があります。

* 見やすい文字サイズ
　　スタイルシートをカスタマイズするときに指定する文字サイズ(font-size)で見やすい大きさは？
　　問題提起です。

：：：：：この記事は、
　　Doblog卒業なさった のんちぃさんからの置き土産です(^^*
　　　　　ありがとうございます♪
　　　　　疑問・質問は『どぶさぽちゃんv』へどうぞ。：：：：：

機能の追加によって、カレンダーの下にラインが入るようになりましたが、
これ、気になりませんか？
初期値なので、Windows版IEだとグレーになっています。
みなさんのDoblogのイメージに合わせて変えたいですよね。
その方法を伝授させていただきます。

デザイン変更で、以下の４行を追加することで、
ラインに関する設定ができます。

hr {
color : #3366ff ;
height: 1px ;
}

ここで、ラインだからと言って　height　ではなく　border-height　を使うと、
２枚目の図のように意図しない太さで表示されています。

色と高さの変更はうまくいきましたが、
今度は左側に隙間ができてしまいました。
これは、.menu-contents　の中の　
padding-left　の設定が　5px　になってしまっているからなのです。

隙間をなくすために.menu-contents　の　padding-left　を0pxにすると、
画像のように、
ジャンルやメニューの文字や、検索のところのボタンなどが
左端にくっついてしまいます。

そこで、隙間が不自然にならないように、ラインを破線にしてみました。
hr　の設定で、
border-style : dashed ;
の１行を追加すればOKです。
スタイルだけは　border　の設定が反映されるのが不思議です。

：：：：：この記事は、
　　Doblog卒業なさった のんちぃさんからの置き土産です(^^*
　　　　　ありがとうございます♪
　　　　　疑問・質問は『どぶさぽちゃんv』へどうぞ。：：：：：

Doblog公式テンプレートにおいて
「ベーシック」だと、メニュータイトルの右に微妙に隙間が空いています。

　
「陽だまり」だと
右側が上のタイトルのラインより出っ張ってしまっています。

デザイン設定の、

.menu table {
width : 100% ;
}

を

.menu table {
}

にすると、崩れがなくなります。

「ベーシック」はこんな感じに。

「陽だまり」はこんなふうに。

おためしあれ！

補足：
テンプレートはすでに治っているようです。
かなり以前にデザインを設定し、現在ずれている人は、
もう一度管理メニューの『デザインテンプレート』から
テンプレートを選択しなおせば治りますのでお試しください。