■HTML／スタイルシート

　＜div class="wback"＞
　　＜div class="wback1_tr"＞
　　　　＜b＞記事タイトル＜/b＞
　　　　　　Posted by ブログ名 at 2004/10/20 23:48＜br＞
　　　　　　＜div style="margin-left:30px"＞
　　　　　　　トラックバック記事本文＜br＞
　　　　　　＜/div＞
　　＜/div＞

　　＜div class="wback1"＞
　＜b＞コメントタイトル＜/b＞
　　　　　Posted by 投稿者 at 2004/10/20 23:50＜br＞
　　　　　＜div style="margin-left:30px"＞
　　　　　　コメント本文＜br＞
　　　　　＜/div＞
　　＜/div＞
　＜/div＞

こんなんなので、該当する class に宣言を追加するなりします。
めぐ味屋はこんなんにしてみました。

　．wback ｛
　　　margin:5px 33% 0px 1%;
　　　…略…
　｝

　．wback1_tr ｛
　　　margin:5px 1% 0px 1%;
　　　padding:5px;
　　　border-width:1px 2px 2px 1px;
　　　border-style:solid;
　　　border-color:gray;
　　　…略…
　｝

「wback1」も「wback1_tr」とおんなじ感じです。また、コメントフォームは

　．wback2
　．wback2 table,tr,td
　．wback2 form,input,textarea

を定義してみました。

2004年10月20日(Wed)▲ページの先頭へ

のブログスタイルシート…サイドバー編 #2

今度は、サイドバーの各ブロックのとこ。まず、新着エントリ。。。

ヘッダを目立つようにして、後、記事の下にアンダーラインがつくようにしてみました。
ヘッダは orig.css にないので、作るデス。

　．heading_entry ｛
　　　background-color:#aaaa99;
　　　text-align:center;
　　　padding:0.2em 0px;
　　　border:2px ridge #aaaa99;
　　　…略…
　｝

記事一覧はこんな感じ。

　．recententry ｛
　　　margin:0px 1em;
　　　padding:0.3em 0px;
　　　border-width:0px 0px 1px 0px;
　　　border-style:dashed;
　　　border-color:#aaaa99;
　　　…略…
　｝

後、新着コメントのヘッダは、

　．heading_coms

を作って、内容は、「heading_entry」と同じにしました。コメント一覧は、「newcoms 」です。これも記事一覧と同じようにアンダーラインを引いてみたかったのですが、htmlの構造上、無理っぽいのでやめました。。。

後は、

アーカイブヘッダ：
heading_archive
年：
archive_year
月：
archive_month
カウンターヘッダ：
heading_counter
カウンター各要素：
count2

ないものは、作るデスね。。。

のブログスタイルシート…サイドバー編

うんと。。。

では、次にサイドバーをいじってみます。
サイドバーは大囲いがあるんですよね…これ。。。

　div．guidance ｛
　　　position:absolute;
　　　left:69%;
　　　width:30%;
　　　top:5px;
　　　padding-left:5px;
　　　padding-right:5px;
　　　padding-top:5px;
　　　padding-bottom:5px;
　　　…略…
　｝

これも width をとってこんな風にしてみました。

　　　position:absolute;
　　　left:69%;
　　　top:5px;
　　　padding:5px;
　　　margin:0px 0.1% 0px 0px;
　　　…略…

のブログスタイルシート…タイトル部編 #2

夢でお告げがありました…。

前回「のブログスタイルシート…日付部編」と「のブログスタイルシート…ブログタイトル部編」で、それぞれ、

タイトル部：

　．line1 ｛
　　　width:68%;
　　　…略
　｝

日付部：

　．date ｛
　　　width:68%;
　　　…略
　｝

とかにしてみたんですけど、「のブログスタイルシート…エントリ部編」と同じやり方をすれば、IE でも、もじらでも同じように見えるわけですよね…。

で、こんな風にしてみました。

　．line1 ｛
　　　margin: 0px 32% 0px 0.1%;
　　　…略…
　｝

　．line2 {
　　　margin:0px 32% 10px 0.1%;
　　　padding:6px 1em 3px 1em;
　　　…略…
　｝

　．date ｛
　　　margin:0px 32% 10px 0.1%;
　　　…略…
　｝

2004年10月19日(Tue)▲ページの先頭へ

のブログスタイルシート…エントリ部編

うーんと。次は、エントリボディのとこ。。。なんですけど。
やっぱり大囲いがないと、デザインしづらいにょん…。

記事の囲い、デフォルト：

　．article ｛
　　　width:64%;
　　　margin-left:20px;
　　　margin-top:5px;
　　　padding:5px;
　　　…略…
　}

こんな風にして width 取ってみました。。。

　　margin:5px 33% 0px 1%;
　　padding:12px 0.5% 5px 0.5%;
　　border-width:2px;
　　border-style:ridge;
　　border-color:#aaaa99;
　　…略…

記事本文は orig.css にないみたいなので作るデス。

　．article_main ｛
　　　margin:0px;
　　　padding:0px 1em 1em 1em;
　　　background-color:#ffffee;
　　　border-top:2px solid #aaaa99;
　　　border-bottom:2px solid #aaaa99;
　　　line-height:1.7em;
　　　…略…
　｝

記事フッタ：

　．footer ｛
　　padding:0.2em 1em;
　　…略…
}

こんなんかなあ。。。どうなんでしょ…。

　# 中途半端なんですけど。。。今日はおしまいでするるる #

のブログスタイルシート…日付部編

うーんと。。。おなかすいた…笑…。
でも、今、食前の漢方を飲んだばかりなので、後１時間は、食べられにゃいん。。。ということで、もうちょっといじるにゃんんん。

次は日付だにゃ。ていうか、にゃんで今日はずっとにゃん語にゃのだろう…。
…良いけど…。

日付のところ、デフォルト：

　．date ｛
　　width:69%;
　　margin-top:5px;
　　padding:5px;
　　background-color:#DEDFDE;
　｝

はばをちょっと狭くして、枠で囲ってみました。こんなんです。文字はセンタリング。

　　width:68%;
　　border:2px ridge #aaaa99;
　　text-align:center;
　　…略…

のブログスタイルシート…ブログタイトル部編

うーんと。。。
ヘッダーの大囲いがにゃいのよねん。。。
それがあるといじるのに都合がよいんですけど。。。
あ、その辺のところを、きっと有料版ではいじれるのですね。。。と勝手に想像してみる…。

そいでは、タイトルの部分をいじってみます。

デフォルト：

　．line1 ｛
　　　width:68%;
　｝

line1 をこんな風にして、背景にねこ画像を張り込んでみました。ちょっとは可愛いでしょうか。。。

　．line1 ｛
　　　width:68%;
　　　…略
　　　background-image: url(画像のパス);
　　　background-position:top;
　　　background-repeat:repeat-x;
　　　…略
　｝

後、タイトル文字は、「html」の方を眺めると、こんな風になっているんですが、

　＜div class="line1"＞
　　＜h1 class=line1_hx＞ブログタイトル＜/h1＞
　＜/div＞

orig.css の方に「line1_hx」というクラスがないので、作ることにしました。こんなんです。

　．line1_hx ｛
　　　text-align:center;
　　　color: #330000;
　　　margin:0px;
　　　padding:2.4em 0em 0px 0em;
　　　font-size:22px;
　｝

のブログスタイルシート… body 編

うーんと、次に、body に関する定義なんですけど。
背景色と背景画像を変えてみようかにゃ。。。

デフォルト：

　body ｛
　　…略
　　background:#F7F3F7;
　　…略
　｝

こんな風にしてみました。

　　background-color:#FFFFE3;
　　background-image:url("画像へのパス");
　　background-attachment:scroll;
　　background-repeat:repeat;

後、デフォルトで

　　font-family:sans-serif;

が、定義されているんですけど、にゃんだかうちの化石マシン（笑…）で見た時、文字化けするというか、文字がちゃんと出てくれないので、こんな風に追加してみました。

　　font-family: Osaka, "Trebuchet MS", Verdana, Arial, sans-serif;

　# にゃってる…？ #

のぶろぐスタイルシート…リンク編

うーんと、まず、リンク関係ですけど。。。
デフォルトでは、

　a:link ｛
　　color:#0000FF;
　　text-decoration:none;
　｝

　a:visited ｛
　　color:#9601FF;
　　text-decoration:none;
　｝

　a:hover ｛
　　color:#0000FF;
　　background-color:#C0FFFF;
　　text-decoration:underline;
　｝

なんですけど、これだけだと、もじらで見た時、「visited」の「text-decoraton:none」だけが有効になって、未読のリンクのアンダーラインは見えているので、以下を「a:link」の上に追加してみます。

　a ｛
　　color:#0000FF;
　　text-decoration:none;
　｝

できたかにょ…？
後、hover の時もアンダーラインが出ないように、hover の「text-decoration:underline」を「text-decoration:none」にしてみました。

うーんと。。。ついでにcssの最上段におまじないを入れておこうかな…。
これ。

「＠charset "Shift_JIS"；」

　# えへへ。もじらで懺悔は役に立ってるかにゃ～ #

＊便宜上スタイルシートの一部を全角で記述していますが、実際は全部半角にするデスね。

2004年10月16日(Sat)▲ページの先頭へ

もじらで懺悔…#7 background-attachment 編

あう～。

前回の懺悔で内心、もう完璧だね。あはははは…と思っていたのですが、実際、そ～んなわけはないのであります。。。

ということで、今日の懺悔は、

　●background-attachment:fixed の恐怖！

です。。。