うーん、困った。コメント部分を調整したいのに
 いくらやってもトラックバックとコメントが切り替わらない…
 仕方がないからコメントは向こうでやることにします。

 サイドバーを左に持ってきます。
 この作業は「コンテンツ」ページで。
 スタイルシートの#linksを#links-leftに書き換えるのを失念し
 画面横幅いっぱいにサイドバーが広がっていたのは秘密。

 全体像を見るために背景色を消します。
 白い……

 いや、今回夏に向けての改装なのにピンク系の画像を使ったので
 サイト全体を白っぽくデザインしているのですが……うーん……

 背景に色を付けると努力が台無しなので
 全体を1px幅の点線で囲ってみます。

 まだ何となく寝ぼけた感じなので
 画像の下とサイドバー部分の右側に同じボーダー指定。

 そしてずっと気になっていたバグ誘発指定に着手。
 先にやれよって感じです。
 枠組みでwidthとpaddingを同時に指定すると余り良くないとか…
 で、枠組みがこんな具合になっていたのですが
/* -----------枠組------------ */
#container{
margin:0px auto;
width:760px;
color:#9d8e87;
text-align:left;
}
#banner{
padding : 0 30px;
text-align : right;
height:180px;
background : url(http://mimawaka.up.seesaa.net/image/diary.jpg) no-repeat;
border-bottom:dotted 1px #9d8e87;
}

#links-left {
font-weight:normal;
float:left;
width:200px;
padding-top:10px;
padding-bottom:10px;
margin: 20px 5px 0 0;
}
#content {
margin:20px 10px 0 5px;
float:left;
width:520px;
}
#footer{
clear:left;
text-align:center;
margin:0px 30px;
}

 パディングもなー、特にこだわりもないし、見づらかったら
 下位要素でチマチマ修正するか、と思い切って↓
/* -----------枠組------------ */
#container{
margin:0px auto;
width:760px;
color:#9d8e87;
text-align:left;
border:dotted 1px #9d8e87;
}
#banner{
text-align : right;
height:180px;
background : url(http://mimawaka.up.seesaa.net/image/diary.jpg) no-repeat;
border-bottom:dotted 1px #9d8e87;
}
#links-left {
font-weight:normal;
float:left;
width:200px;
border-right:dotted 1px #9d8e87;
}
#content {
float:left;
width:520px;
}
#footer{
clear:left;
text-align:center;
}

 うん!全てが右上に寄った!私のお弁当みたいだ!
 息が詰まるのでカレンダー上と記事タイトル上に
 それぞれ20pxずつパディングを上乗せ。

 サイドタイトル部分がグチャーっとしているけれど
 できるだけ白っぽさを維持したいので太字は却下。
 そのかわり下線のみだったタイトル部分修飾を上下線に。
 微妙に中心を外しているので文字下パディングを3px⇒10px⇒8pxと
 試行錯誤。

 記事部分に余裕が出ているので本当は余白をたくさん入れたいが
 因縁すら感じるほどの長文書きのため、改行対策に横を広げる。
 記事部分を520pxから550pxへ。いじましい努力である。

 よくよく見るとサイドバーと記事の間にひいたボーダーが
 途中で立ち消えている。
 きっとどっちが長いかと言えば記事のはずなので
 サイドバーの右側のボーダー指定を記事部分の左指定に。
 同時にフッタ部分上部にもボーダーをひいて線をつなげる。

 よし、これでブラウザチェック。
 今Sleipnirで編集しているのでIEとFirefoxとOperaとネスケ。
 どれも特にものすごいことにはなっていない。よっしゃ!

 というわけでこんな具合になりました。
 このテンプレはSEOに最高に弱いので
 ここのブログはすぐに替えます;
 記念撮影(笑)
 ブログカスタマイズ
 さっきの記事をアップした途端にカラム落ちしてしまった。
 カレンダーの横幅をギリギリまで広げたのがまずかったか…と
 width : 100%;の指定を97%に。あれ、まだか?95%…90%…およ?
 再び100%に戻してちょっと悩んでみる。

 そしてああと気付いたのがblockquote。
 要するに引用文を囲んでいる部分。
 CSSやらHTMLを地の文と区別するために使ったこれがきっと犯人。
 だって2つほどあからさまに横幅長いヤツが。

 なんだそれならblockquoteにwidth指定掛ければいいじゃん
 …と、460pxに指定してみる。
 しかし他のものはともかく、例の2つだけは幅が縮まらない。
 blockquoteって折り返しを無視するような性質だったっけ?

 いやいやそんなわけはない。
 よくblockquoteの説明に漱石やら鴎外やらの小説が使われている。
 あいつらがそんなにコンパクトな文章を書くものか。

 もういっそバグということにしてやりすごしてしまおうか。
 しかしブログカスタマイズの話題を書いているのにカラム落ちって
 お前がオンラインから落ちろよとか言われそうだ。

 というわけで強硬手段に出てみる。
 改行指定をつけてしまおうと…(==)
 しかしながら引用部分にスクロールバーが表示されているのなど
 さすがに見たことはない。
 ボックス的な解決方法は適用できるかどうか以前にカッコ悪い。

 不意に思い立ったのが

 blockquoteにbreak-wordって使えるんだろうか…

 っていうかこの時点で気付けよって感じなんですがね。
 もう気付いている人もいますよね(笑)
 このようなことになりました。
blockquote{
padding:5px;
margin:10px;
border:dotted 1px #9d8e87;
word-wrap: break-word;
}

 結果としては使えます。word-wrap。

 使えてこれ見てようやく気付いた。
13<
/td>

 引用部分が横に伸びたのは
 ただ単にタグの収まり具合が悪かっただけだったと…。

 やったらやったでものすごくマヌケ。
 カラム落ちとどっこいどっこい。
 しかしまあ、本気で切羽詰ったらこういう技もあるのだという
 おぼえ書き代わりにこのまんま使ってみます。
 カレンダー部分の元のCSS記述
#calendar {

width:201px;
margin:0px;
padding-bottom:10px;
}
#calendar table {
width:100%;
padding-bottom:10px;
}
#calendar th {
font-weight:normal;
text-align:center;
}
.calendarhead {
padding:10px 0px 15px 0px;
font-weight:normal;

color:#9d8e87;
}
.calendarhead a{
color:#9d8e87;
}
.calendarhead .calendarday a{
color:#9d8e87;
text-decoration:none;
font-weight:normal;
}
.calendarday {
padding:3px;
font-size:10px;

color:#9d8e87;
text-align:center;
}
.calendarday a {
font-weight:normal;
color:#9d8e87;
text-decoration:underline;
}

 このブログではカレンダーを使っていなかったので
 一時的に表示してみます。
 ぬお!何だこのソースは!
<th abbr="Sunday" align="center" class="calendarday">日</th>
<th abbr="Monday" align="center" class="calendarday">月</th>
<th abbr="Tuesday" align="center" class="calendarday">火</th>
<th abbr="Wednesday" align="center" class="calendarday">水</th>
<th abbr="Thursday" align="center" class="calendarday">木</th>
<th abbr="Friday" align="center" class="calendarday">金</th>
<th abbr="Saturday" align="center" class="calendarday">土</th>
</tr>
<tr>
<td align="center" class="calendarday">&nbsp;</td>
<td align="center" class="calendarday">&nbsp;</td>
<td align="center" class="calendarday">1</td>
<td align="center" class="calendarday">2</td>
<td align="center" class="calendarday">3</td>
<td align="center" class="calendarday">4</td>
<td align="center" class="calendarday">5</td>

 ただでさえ重いtableを使っているというのに
 セルひとつひとつに中央寄せ指定付き。
 もしかしてCSS指定ではalignが反映されないブラウザとかが
 あるのでしょうか……?
 いいです。ウチの閲覧者の90%はIEです。CSSで指定します!
 …っていうか想像していたよりIE率が低かった…
 2008年に入ってからの私の二次創作サイトのブラウザ解析
 解析

 <table border="0" cellspacing="0" cellpadding="0" summary="Calendar">
 ↓
 [HTML]
 <table summary="Calendar">
 [CSS]
 table指定に
 border-collapse: collapse; を追加
 THとTDにもtext-align:center;を追加

 <th abbr="○○day" align="center" class="calendarday">
 ↓
 [HTML]
 abbrタグはどうしようかなーと思ったものの日本語表記でないので残しました
 <th abbr="○○day">
 [CSS]
 #calendar thに.calendardayの指定を追加
 ▼こんな具合で。
#calendar th {
font-weight:normal;
text-align:center;
}
.calendarday {
padding:3px;
font-size:10px;
color:#9d8e87;
text-align:center;

}

#calendar th {
font-weight:normal;
text-align:center;
padding:3px;
font-size:10px;
color:#9d8e87;
}
.calendarday {
padding:3px;
font-size:10px;
color:#9d8e87;
text-align:center;
}
 後はtd class="calendarday"を
 calendar tdにまとめてしまうなどして文字数を減らしてみる。
 ソース
修正前
<div id="calendar">
<table border="0" cellspacing="0" cellpadding="0" summary="Calendar">

<caption class="calendarhead"><span class="calendarday"><a href="http://mimawaka.seesaa.net/archives/200803-1.html">&lt;&lt;</a></span> <a href="http://mimawaka.seesaa.net/archives/200804-1.html">2008年04月</a> <span class="calendarday">&gt;&gt;</span></caption>
<tr>
<th abbr="Sunday" align="center" class="calendarday">日</th>
<th abbr="Monday" align="center" class="calendarday">月</th>
<th abbr="Tuesday" align="center" class="calendarday">火</th>
<th abbr="Wednesday" align="center" class="calendarday">水</th>
<th abbr="Thursday" align="center" class="calendarday">木</th>
<th abbr="Friday" align="center" class="calendarday">金</th>
<th abbr="Saturday" align="center" class="calendarday">土</th>
</tr>
<tr>
<td align="center" class="calendarday">&nbsp;</td>
<td align="center" class="calendarday">&nbsp;</td>
<td align="center" class="calendarday">1</td>
<td align="center" class="calendarday">2</td>
<td align="center" class="calendarday">3</td>
<td align="center" class="calendarday">4</td>
<td align="center" class="calendarday">5</td>

</tr>
<tr>
<td align="center" class="calendarday">6</td>
<td align="center" class="calendarday">7</td>
<td align="center" class="calendarday">8</td>
<td align="center" class="calendarday">9</td>
<td align="center" class="calendarday">10</td>
<td align="center" class="calendarday">11</td>
<td align="center" class="calendarday">12</td>

</tr>
<tr>
<td align="center" class="calendarday calendarday-a"><a href="http://mimawaka.seesaa.net/archives/20080413.html">13</a></td>
<td align="center" class="calendarday calendarday-a"><a href="http://mimawaka.seesaa.net/archives/20080414.html">14</a></td>
<td align="center" class="calendarday">15</td>
<td align="center" class="calendarday calendarday-a"><a href="http://mimawaka.seesaa.net/archives/20080416.html">16</a></td>
<td align="center" class="calendarday">17</td>
<td align="center" class="calendarday">18</td>
<td align="center" class="calendarday">19</td>

</tr>
<tr>
<td align="center" class="calendarday">20</td>
<td align="center" class="calendarday">21</td>
<td align="center" class="calendarday">22</td>
<td align="center" class="calendarday">23</td>
<td align="center" class="calendarday">24</td>
<td align="center" class="calendarday">25</td>
<td align="center" class="calendarday">26</td>

</tr>
<tr>
<td align="center" class="calendarday">27</td>
<td align="center" class="calendarday">28</td>
<td align="center" class="calendarday">29</td>
<td align="center" class="calendarday">30</td>
<td align="center" class="calendarday">&nbsp;</td>
<td align="center" class="calendarday">&nbsp;</td>
<td align="center" class="calendarday">&nbsp;</td>

</tr>
</table>
</div>


修正後
<div id="calendar">
<table summary="Calendar">

<caption><a href="http://mimawaka.seesaa.net/archives/200803-1.html">&lt;&lt;</a> <a href="http://mimawaka.seesaa.net/archives/200804-1.html">2008/04</a> &gt;&gt;</caption>
<tr>
<th abbr="Sunday">dim</th>
<th abbr="Monday">lun</th>
<th abbr="Tuesday">mar</th>
<th abbr="Wednesday">mer</th>
<th abbr="Thursday">jeu</th>
<th abbr="Friday">ven</th>
<th abbr="Saturday">sam</th>
</tr>

<tr>
<td>*&nbsp;</td>
<td>*&nbsp;</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>

<tr>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>

<tr>
<td><a href="http://mimawaka.seesaa.net/archives/20080413.html">13</a></td>
<td><a href="http://mimawaka.seesaa.net/archives/20080414.html">14</a></td>
<td>15</td>
<td><a href="http://mimawaka.seesaa.net/archives/20080416.html">16</a></td>
<td>17</td>
<td>18</td>
<td>19</td>
</tr>

<tr>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
</tr>

<tr>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td>*&nbsp;</td>
<td>*&nbsp;</td>
<td>*&nbsp;</td>
</tr>
</table>
</div>
ちったぁ軽くなったと信じたい。
CSS。
#calendar {
font-family:Georgia,"Courier New",sans-serif;
padding-bottom:20px;
}
#calendar table {
width:100%;
border-collapse: collapse;
text-align : center;
font-size:10px;
color:#9d8e87;
background-color : #fff;
}
#calendar caption{
padding:10px 0px 15px 0px;
font-size : 12px;
}
#calendar th{
font-weight:normal;
padding:3px;
}
#calendar td {
padding:3px;
}
 サイドバーの物凄い指定
.sidetitle {
color:#9d8e87;
padding:10px 0px 3px 10px;
border-bottom:solid 1px #9d8e87;
text-align:left;
font-weight:normal;
}

.side {
line-height:2em;
padding:5px 0px 10px 10px;
margin-bottom:10px;
font-size:10px;
text-align:left;
margin-bottom:10px;

}
.side a{

}

 萎えます。色々考えるのが面倒くさくなってきます。
 マージン指定2回したって倍にはなりませんorz

 飛んでいる行は一括置換で消えたと考えられるので
 きっと文字色か文字サイズの指定が入っていたのでしょう…

 記事タイトル同様、サイトデザインに合わせて下線を点線に。

 サイドバーのリンクに下線があるとごちゃごちゃする気もするので
 それも消してみる。

 もうほとんど機械的にこんな感じに修正。
.sidetitle {
padding:10px 0px 3px 10px;
border-bottom:dotted 1px #9d8e87;
}
.side {
line-height:2em;
padding:5px 0px 20px 10px;
font-size:10px;
}
.side a{
text-decoration: none;
}
 後は全体像を見ながら微調整することにします。
 ついでにサイドバー内の記事検索も修正。
input{
max-width:200px;
border:1px solid #666;
}
.input-submit{
background-color:#fff;
color:#666;

}

 max-width:200px;って広すぎやしませんかい?
 …と思いつつもう面倒くさいのでそのまま放置。
 色だけ文字色と同じに修正。
input{
max-width:200px;
border:1px solid #9d8e87;
}
.input-submit{
background-color:#fff;
color:#9d8e87;
}

 おっけー。次行きます。
 気になるのは
.blog {
padding:0px 0px 0px 0px;
text-align:left;
}
.blogbody {
font-weight:normal;
margin-bottom:10px;
padding:0px 20px 0px 20px;
}

 と二重に記事部分をDIVで囲っていること。
 .blogと.blogbodyを統一したらいかんのだろーか。
 とりあえず無駄な記述を削除してみる。

 ベースにtext-align : leftを
 フッタにtext-align : centerを指定して
 .blogとサイドバーのtext-align : leftを削除。

 しかしわざわざblogクラスを作っている意味があるかもしれないので とりあえずHTMLのblogは残して様子見。
 .blogの背景を黒にしてみる。チラチラ見えるのが不気味。

 どうでもいいけどサイドバー部分に
text-align : left;
text-align : right;
 と並べて書いてあった。カオス。

.blog{
}
.blogbody {
padding:0px 20px;
}
.text{
padding-top : 10px;
line-height:1.8em;
}

 こんな具合にダイエット。

 その他、記事部分に残っている指定にもテコ入れ。
.date{
font-size:14px;
border-bottom:solid 1px #9d8e87;
}

 恐らく公式テンプレの名残と思われる。
 seesaaは記事タイトル部分に日付が来るため。
 こういうの残さないで下さい私よ。削除。
.navi {
text-align:center;
}

 どうにもナビゲーションが不親切なために
 自分で勝手につけたパンくずナビ。
 よくよく考えると余白がないのでこれは逆に記述を増やす。
.navi {
text-align:center;
padding : 2px;
}

 しかし特にこだわりはないらしい(笑)
.posted{
text-align: left;
margin-bottom:5px;
padding:35px 0px 40px 0px;
font-size:10px;
}
.posted a{
font-weight:normal;
text-decoration:underline;
}

 記事下の日付やらコメント画面へのリンク部分。
.posted{
padding:30px 0px;
font-size:10px;
}

 これでいいじゃん。

 少々気になる部分はあるけれど
 大枠ができたら修正することにして今は忘れる。
 記事部分終了。
 記事タイトルの下に下線が表示されているのでこれを消します。
 ついでに左が空き過ぎているのでこれも修正。

 スタイルシートも不思議な記述になっていました。
h2 {
margin:10px 0px 5px 0px;
padding: 0px 0px 5px 20px;
text-align:left;
}
.title{
clear:left;
font-size:14px;
border-bottom:solid 1px #9d8e87;
}
.title a{
border:none;
}

 ツッコミどころが多過ぎて途方に暮れます。

 このテンプレートではH2は記事タイトルでしか使っていないので
 クラスを指定する意味はないのです。
 ついでに前回と同様の理由でHタグも排除したい。

 排除したいがまあ待てその前にこれ何とかしろ。
margin:10px 0px 5px 0px;
padding: 0px 0px 5px 20px;

 白背景で画像も凝った装飾もないのに
 なぜマージンとパディングを分けるのだ。
 微妙に空き過ぎな部分があるので調整しつつまずはH2のダイエット。
padding: 10px 0px 5px 10px;
text-align:left;

 どうでもいいけどクラス名がtitleだと
 ブログタイトルなのか記事タイトルなのか自分で混乱するので
 記事タイトルクラス名をptitleに変更してH2と合体。
.ptitle{
padding: 10px 0px 5px 10px;
text-align:left;
clear:left;
font-size:14px;
border-bottom:solid 1px #9d8e87;
}
.ptitle a{
border:none;
}

 待て待て待て!
 ベースで指定しているのでtext-align:left;は不要!
 ついでにそのclear:left;はどこから出てきた!?削除。
 H2でなくなったのでフォントを太字に。
 それよりなにより

 aタグの下線を消すのにborder:none;ってネタですか!?

 text-decoration: none;に書き直し。
 今まで使えていたのがすごい。神様ありがとう。
 修正してみた↓
.ptitle{
padding: 10px 0px 5px 10px;
font-size:14px;
border-bottom:dotted 1px #9d8e87;
font-weight: bolder;
}
.ptitle a{
text-decoration: none;
}

 サイトデザインにあわせて下線は点線に。
 忘れてはいけないのがHTMLの修正。
<h2 class="title"><a href="<% article.page_url %>" class="title"><% article.subject %></a></h2>

<div class="ptitle"><a href="<% article.page_url %>" class="title"><% article.subject %></a></div>

 やましいことしていないサイトならH2に全て入れ込むのが理想。
 私はいかがわしい女なのでこのような記述になった次第。
 何故か同じフォントサイズへの指定があちこちでしてあったので
 bodyに一括でぶち込んでそれぞれを削除。
 ちょっとスッキリ。

 さて、さっきから何をしようとしていたかというと
 タイトル画像のお花にブログタイトルが重なっていたので
 白い部分に持ってきたかっただけなのです。
 ようやく手を付け……ようと思ったけど何じゃこりゃー!
#banner{
margin:0px;
padding-left:30px;
padding-right:30px;
text-align:left;
height:150px;
background-image:url(http://mimawaka.up.seesaa.net/image/diary.jpg);
background-repeat:no-repeat;
background-position:top right;
}

 よっぽど前回急いでいたと思われます。
 どう考えても私好みの記述でない……
 タイトル文字の位置を動かしつつ好みに変えていきます。
 要するに文字を減らす。でないと頭が混乱します。
#banner{
padding : 0 30px;
text-align : right;
height:180px;
background : url(http://mimawaka.up.seesaa.net/image/diary.jpg) no-repeat;
}

 ちょっと落ち着かないのでブログ名とブログ説明を入れ替えます。
 こいつは「デザイン」⇒「コンテンツ」のブログ上部の部分の
 ブロックをドラッグして移動するだけです。楽ちん!

 しかしこれはどうよと思ったのがこれ。
h1 {
margin:0px;
padding-top:20px 0 10px 0;
font-size:24px;
}
h1 a{
color:#9d8e87;
text-decoration: none;
font-weight:normal;
}

 いや、普通のブログならいいのです。
 しかし私のサイトは検索避けをかけているアングラサイトです。
 ……うん、確かにアングラだ(--;
 そんなサイトの日記にHタグとかロボットに媚売るタグは使えません。
 DIVとクラス指定で代用しつつ記述もスッキリさせます。
.btitle{
font-size:30px;
padding:0 18px 10px 0;
}
.btitle a{
text-decoration: none;
}

 しかし何ですかねぇ。どうしてブログの公式テンプレってのは
 こう無駄な記述が多いのでしょうねぇ。
 スタイルシートの指定を置き換えたのでHTMLも変更。
 これはやはり「コンテンツ」のブログタイトルの中にあるHTMLです。
<h1><a href="<% blog.page_url %>" accesskey="1"><% blog.title %></a></h1>

 これを以下の通りに書き換え。
<div class="btitle"><a href="<% blog.page_url %>" accesskey="1"><% blog.title %></a></div>

 ブログ説明も調整します。
 このブログはブログ説明を日本語で書いてありましたが
 あっちのブログはロボット混乱作戦のために
 フランス語を羅列しています(笑)
 とりあえずこっちでもアルファベットを並べてテストしています。
.description {
font-weight:normal;
padding:0px;
color:#9d8e87;
}

 このCSS記述を
.description {
padding:0px;
}

 ↑本当に0pxでいいならもちろんサクッと削ります。
 とりあえず0pxにしてプレビューを見ながら調整するつもりで。

 ……が!
 なぜか10pxにしても50pxにしてもパディングが反映されない!!
 何故?何故?綴り間違ってます私??
 としばらく考え、HTMLを見てマジ切れしそうになりました。
<span class="description"><% content.blog_desc.text | nl2br | __or__ | blog.description | nl2br %></span>

 何でこんなところにspan使っとんねん!!
 そりゃあパディングもマージンも無視されますわいな。
 divに書き換え!!
<div class="description"><% content.blog_desc.text | nl2br | __or__ | blog.description | nl2br %></div>

 という感じでいい加減に熱くなりながらこんな感じになりました。
/* -----------head------------ */

.btitle{
font-size:30px;
padding:0 18px 10px 0;
}
.btitle a{
text-decoration: none;
}

.description {
padding:40px 20px 10px 0;
}

 ブログカスタマイズ
 背景はまだ変な色w
 でももう眠いから寝ます。お休みなさい…
 フォントを変更します。
 今まで丸っこいCentury Gothicを使っていましたが
 ちょっとチリチリした感じにしようと思います。
 フォントファミリーの指定を書き換え。
font-family:"Courier New",Georgia,sans-serif;

 しまった。Courier Newにはもしかして太字が存在しないのか?
 どーしよーかなー、どーしよーかなー。
 サイトはうっかりこれで統一してしまったので諦めます。

 さあ、そしてそろそろ目をそむけてばかりではだめです。
 レイアウトがきっと面白いことになっているはず。
 勇気を出してそれぞれのパーツに仮の背景色をつけて並びをチェック。

 ブログカスタマイズ
 やはり…。タイトル画像の隣に隙間発生。
 CSSをチェックするとやっぱり全体幅800pxで組んでいます。
 画像は760pxなのでぴったりに合わせると
 今度はナイスカラム落ち。
 もともとのスタイルシートには1px単位の微妙な数字が…
#container{
margin:0px auto;
width:760px;
color:#9d8e87;
font-size:12px;
text-align:center;
}
#content {
margin:23px 10px 10px 10px;
float:left;
width:530px;
}
#links {
font-weight:normal;
float:left;
width:201px;
padding-top:10px;
padding-bottom:10px;
margin: 20px 5px 0px 10px;
text-align:left;
font-size:12px;
text-align:right;
}

 我ながら信じられないような記述を発見したのですが
 ここでそれを暴露していると作業が停滞するのでまたもやスルー。
 プレビューを見ながら微調整します。
#container{
margin:0px auto;
width:760px;
color:#9d8e87;
font-size:12px;
text-align:center;
background-color:#ffccff;
}

#content {
margin:20px 10px 0 5px;
float:left;
width:520px;
background-color:#ccccff;
}

#links {
font-weight:normal;
float:left;
width:200px;
padding-top:10px;
padding-bottom:10px;
margin: 20px 5px 0 0;
text-align:left;
font-size:12px;
text-align:right;
background-color:#ccffff;
}

 一番に突っ込みたい場所はまだそのままですが我慢。
 ちなみにbackground-color指定は確認用の仮の指定で
 実際には全て白になる予定です。

 そろそろ飽きてきたー!
 ちまちまと細かいところに手を入れていきます。
 とりあえずスクロールバーの色を変えてみます。
 CSSにこの記述を追加。
*{
scrollbar-arrow-color : #c5b69e;
scrollbar-3dlight-color : #c5b69e;
scrollbar-base-color : #fff;
scrollbar-shadow-color : #fff;
scrollbar-face-color : #fff;
scrollbar-highlight-color : #fff;
scrollbar-darkshadow-color : #c5b69e;
scrollbar-track-color : #fff;
}

 うぬ!上下の▲▼しか表示されていない!?
 何事ですかい。
 仕方がないので以下のように書き直し。
*{
scrollbar-arrow-color : #c5b69e;
scrollbar-3dlight-color : #c5b69e;
scrollbar-base-color : #fff;
scrollbar-shadow-color : #c5b69e;
scrollbar-face-color : #fff;
scrollbar-highlight-color : #c5b69e;
scrollbar-darkshadow-color : #c5b69e;
scrollbar-track-color : #fff;
}

 お、今度はいけた。一体何が起こったのでしょう。
 調べているのも面倒くさいのでひとまず忘れます。

 ちなみにこの設定が反映されるのはIEだけです。
 別にスクロールバーなんてどうでもいいかなーとも思うんですが(笑)
 一回やっちゃうとどうも落ち着かんものですやね。

 サイトの日記のテンプレートを試しにここで改装中です。
 サイト全体のデザインに合わせるため
 まずは文字色を変更していきます。

 でも面倒くさいから置換を使います。
 とりあえずブログのCSSをコピーしてメモ帳にペーストし
 メモ帳の置換を起動します。
 メモ帳の「編集」⇒「置換」で出てきます。
 メモ帳置換

 今までの文字色が#666666でしたので
 サイト全体の文字色に合わせて#9d8e87に。

 続いてリンク色#C3AA39を#9d8e87に。
 ……と思ったら、しまったぁぁ!#9d8e87って文字色と一緒ー!!

 時既に遅し。置換後。
 どうでもいいのですが、置換してしまうとCtrl+Zや
 「編集」⇒「元に戻す」では元通りに出来ません。
 私のような悲鳴を上げたくない人はこまめにバックアップしましょう。
 くそう!!

 これではリンクと普通のテキストの区別が自分でも付きません。
 とりあえずCSSの中のリンク設定から
 text-decoration:none;(「文字に飾りをつけない」という命令)
 を削除してリンク文字の下線を表示させます。
 うーん、ブログでこれはちょっと煩わしいなと思いつつ
 とりあえず全体像が見たいのでこのまま放置。

 ついでにサイトの日記にはこんな場所に広告がないので
 とりあえず記事下に場所移動。
 ランキングタグも色が煩いのでやはり下に移動。
 検索のYahooの赤字も気に食わないので移動。
 こうなるとあし@が非常に邪魔である。

 ふむ。とりあえず一番印象を変えると思われる画像をアップ。
 写真素材は毎度お馴染みのミントBlue様。
 愛してます。いつもありがとうございます。
 ※ご利用になる方は利用規約をしっかりご覧下さい

 外枠はこんなもんですかね。
 ついでに日記のタイトルがアルファベットなので
 このブログも開設当初の名前に一時的に戻っています。
 SEOには激しく弱い名前です。あーあー。

 diary03
 突然にデザインが変わっていますが、別サイトの日記のテンプレートを
 そのままこのブログに突っ込んでいます。
 あちらの方の改装をしたいなーと思ってちょっとHTMLをいじったら
 華麗にエラーページが表示されてしまい、あまりに危険なので
 閲覧者の少ないこちらでおっ始めようという魂胆です。
 見ている方いらっしゃったらホントごめんなさい。

 ついでに何やったかリアルタイムにメモしていきます。
 現在のこのブログのスクリーンショットがこんな感じ。
 ブログテンプレート

 こいつを右カラムから左カラムにしようかなどと思っています。
 えーっと、まず何しようかな。
 ブログタイトルの写真と文字色でも変えてみよ……おおおと思ったら
 ダンナ帰ってきたのでご飯の支度に旅立ちます。
 できるだけ早く変えたいんですけどねぇ。


 
 ………………帰ってきました。えらいぞ私!
 でも今ブログ見たらこのテンプレのゴールドと
 広告のくすんだブルーの組み合わせが
 ちょっと気に入って困ってます(笑)
 うーん、サイトの雰囲気とは全然違うからなぁ。

 今からスタイルシートやHTMLタグをいじくり始めますので
 しくじって表示できないこともあると思いますが
 怒らないでやってくださいませ。
 ブログ自体が初心者向けに作られていますので
 カスタマイズなんてコピペで結構何とかなってしまうものです。
 が、知識があればさらに自分好みに、そして安全にできるものですから
 ウェブサイトの基本の基本をちょっと見てみましょう。
 1分でウェブサイトページを作ります。

 あ、その前に左下のスタートボタンをクリックし
 コントロールパネル→フォルダオプションを開いてください。
 「表示」タブをクリック。
 下の方にスクロールすると「登録されている拡張子は表示しない」
 という項目が出てきますのでチェックを外します。
 で、適用、OK。
 フォルダオプション
 この画像はWindowsXPのものです。
 バージョンによって表示は違いますが
 とにかく「拡張子を表示しない」のチェックを外せばOKです。
 これで拡張子が表示されるようになりました。
 拡張子とは「このファイルは○○で作られていますよ」という
 区分をあらわすもので、ファイルの後ろに「.○○」と付きます。
 メモ帳だったら「○○.txt」とか。

 さて、では晴れてメモ帳を開きます。
 メモ帳がどこにあるかわからない人は再びスタートボタン→
 すべてのプログラム→アクセサリのなかに入っています。

 開いたら以下をコピー&ペースト。
<html>
<head></head>
<body></body>
</html>

 やり方わかりますか?
 コピーした部分をマウスカーソルを使って反転させ
 「右クリック→コピー」もしくは「Ctrl」キー+「C」キー。
 今度はその部分を貼り付けたいところで
 「右クリック→ペースト」か「Ctrl」キー+「V」キー。
 「コピペ」と言われたらこの作業です。
 
 <head>ここの部分</head>はページのタイトルです。
 適当に○○のホームページとでも入れてみましょうか。
 <body>ここの部分</body>はページに表示される部分。
 何か好きな文章でも入れてみてください。

 はい、ではメモ帳の左上「ファイル」→「名前を付けて保存」
 ダイアログボックスが開くので下の部分の「ファイル名」に
 「*.txt」などと入っていると思いますが
 「index.htm」と書き直し。
 保存ダイアログ
 indexの部分は何でもいいです。半角英数で書くようにします。
 ただし頭文字は数字や記号よりアルファベットが無難。
 今はただの実験なので本当に何でもいいんですが;
 保存する場所はとりあえず「デスクトップ」で。

 さて、できたら保存ボタンをクリックして右上の×ボタンで
 メモ帳を閉じちゃいましょう。
 するとデスクトップにインターネットエクスプローラと
 同じ形をしたアイコンができていると思います。
 ダブルクリックで開いてください。

 何とも味気ないですが、<body></body>の部分に
 入れた文字が表示されていると思います。
 これが一番単純なHTMLファイルです。
 色々なサイトがウェブ上には存在しますが
 すべてのファイルの骨組みは
 <html><head></head><body></body></html>です。
 とりあえず、初めてタグを組んだかた、おめでとう!(笑)
タグ:HTML
 ユーザビリティ(閲覧者の使いやすさ)を考えると
 リンクというものは
 文字色は青、文字にはアンダーライン
 というのが一番よろしいとのことです。
 要するに初期設定そのまんまが一番いいと。
 
 いや、それは確かにそうなんですが
 デザインを考えるとやっぱりそれはちょっと辛いなんてことも
 あるかもしれません。
 
 今日はスタイルシートを使って
 リンク文字のスタイルを変えてみたいと思います。
 体系的にスタイルシートをご存じない方でも
 コピペで乗り切ってください(笑)
 というか、スタイルシートを基礎から理解している人なんて
 ほとんどいないと思う・・・
 
 色についてですが
 スタイルシート内で
a{
color:#******;
}
 と記述されている箇所を突き止め、その文字コードを変える
 もしくはリンク色を変更したいところに上記のように入力する
 という方法は、前回までにご説明してあります。
 
 今日の本題はリンク文字の形態です。
 
 http://mimawakana.blog60.fc2.com/
 
 文字色はいじってあるのですが、
 リンクには初期設定だと↑このようにアンダーラインが入ります。
 
 記事中などではできるだけアンダーラインは残したままの方がいいです。
 でないと閲覧者さんがリンクだと気付いてくれないことがあるから。
 特にアフィリエイトなんてなさっている方は致命傷ですよねぇ。
 
 ですがブログタイトルですとかメニューなんかに
 いちいち下線が出ていると格好悪かったりもします。
 カッコ悪い〜!なんてリンクを外しちゃダメですよ〜。
 閲覧者さん、迷子になっちゃいますから。
 
 では、まずスタイルシートを開きます。
 そこから変更したい部分を探します。
 探し方についてはこちらの記事でご説明してあります。
 
 余計な文字がついていることの方が多いのですが
 基本的には
 
a{
〜〜〜〜
}
 の形になっています。
 
 ここに text-decoration: という文字があれば
 それをいじります。
 もしa{}の中に入っていなければ、これを書き加えます。
 
 *下線を消したい場合
 
 a{}内の 
  text-decoration: none;
 
 この文字列を付け足します。
 
 *下線を付け加えたい場合
 
 a{}内の 
 text-decoration: none;
 
 を削除します。
 スタイルシートで全体指定してあると削除できません。
 その場合は
 text-decoration: underline;
 を書き加えます。
 
 *下線を装飾したい場合
 
 まず、 a{}内に
 text-decoration: none;
 を書き込みます。
 その下に
 border-bottom: (太さ 色 線の形態) ;
 を書き込みます。
 
 border-bottom:の値ですが
 太さ・・・pxなど線の太さの指定
 色・・・#******などカラーコード
 線の形態・・・
 
 直線:solid
 二重線:double
 点線:dotted
 大き目の点線:dashed
 
 などがあります。
 
 これらを半角スペースで区切って入力します。
 
 実際の記述↓
 
a{
text-decoration: none;
border-bottom: (red 2px dashed) ;
}
 
 
こんな感じに表示されます。  
 もちろんborder-bottom(下線)だけでなく
 border-top(上線)border-right(右線)border-left(左線)も
 それぞれに指定できます。
 
a{
text-decoration: none;
border-top:(1px #0000ff solid);
border-bottom: (1px #0000ff solid) ;
}
 
 
こんな感じに表示されます。
 
 「border」だけで指定すると四方囲まれます。
 左右線だけ、などはリンクとはわかりづらいですので
 なるべく下線は削除しないようにした方がいいと思います。 
 
 
 また、ポインタがリンク上に来た時に形態を変えることもできます。
 
 a{
text-decoration: none;
}
の下に
a:hover{
text-decoration: underline;
}
 を書き加えると、
 マウスが乗ったときだけアンダーラインが出るリンクが作れます。
 
 逆に、aとa:hoverの中身を入れ替えると
 オンマウスで下線が消えるリンクになります。
 
 中身を入れ替える際、a→a:hoverの並び順は変えてはいけません。 
 
 もちろん先ほどのように
 text-decoration: none;とborder-●●:(太さ 色 線の形態) ;
 を使ってスタイルを変えられます。
 
 
 また、リンクの背景色を変えることもできます。
 
a{
background-color:#94C569;
}
 
こんな感じに表示されます。
 
 オンマウス時だけ背景色を出す場合は、先ほどと同様に
 
a:hover{
background-color:#94C569;
}
 
 とa{}の下に書き加えます。
 
 ちなみに記述の順番は
 
  1. a(:link) ・・・通常時
  2. a:visited ・・・訪問後
  3. a:hovor ・・・オンマウス
  4. a:active ・・・ページが切り替わっている最中

 いらない指定は省略できますが、順番は必ずこの通りにします。
 
 
 リンク文字、色々遊んでみてください・・・と言いたい所ですが
 やはりリンクの基本は青文字下線
 このことを意識した上で、「あ、これはリンクだ」と
 すぐにわかる形のリンク作りを目指してください。
 画像でリンクを作ることも出来ます。

 画像を呼び出すタグは

<img src="画像アドレス" />

 ですので
 先ほどリンク文字を挿入した部分にこのタグを挿入します。

 <a href="(リンクアドレス)"><img src="(画像アドレス)" /></a>

 この画像アドレスですが、必ず自分の画像ファイルに
 アップしたものを使います。
 絶対に他のサイトやブログのアドレスを書いてはいけません。
 (直リンといいます)

 記事入力欄の下にある「ファイル」か
 テキストエディタ右端の「ファイルマネージャ」から
 使いたい画像を選んでアップします。
 ここに出てこない画像は使ってはいけません。

 実際に画像リンクを作ってみます。

 

 ソース
 <a href="http://mimawakana.blog60.fc2.com/"><img src="http://mimawaka.up.seesaa.net/image/banner.gif" border="0" /></a>

 border="0"は枠線を消すタグです。

 ファイルマネージャを使って画像を呼び出すとき
 「ファイル貼付」の「元画」「サムネイル」をクリックすると
 画像が直接記事にはりついてしまいます。
 画像タイトルをクリックし
 「元ファイル」のアドレスを書き込みます。


 取り敢えずはブログで使いそうなリンクタグ色々でした。
 次回はリンクのスタイルについてお話しようと思います。
 前回リンク文字の色についてご説明しました。
 せっかくなのでこの機会にリンクのタグについて書こうと思います。

 Seesaaでは設定をいじらなければ、記事内等で
 アドレスを書けば自動的にリンクになります↓
 http://mimawakana.blog60.fc2.com/ ・・・A

 また、リッチテキストエディタ内の
 「リンクの挿入/編集」を使えば(右から5番目の鎖のアイコン)
 リンクのスタイル、オンマウス時のタイトル表示、
 窓の開き方の指定が出来ます↓

 http://mimawakana.blog60.fc2.com/ ・・・B

 ではSimplism ・・・C
 のような、テキストリンクの作り方。

 リンクの基本は
 <a href="(リンクアドレス)">(リンク文字)</a>

 最後の</a>を忘れると、その後の文字が
 全てリンクになってしまいますので気をつけましょう。

 つまり、Aのリンクをタグに直すと
 
 <a href="http://mimawakana.blog60.fc2.com/">http://mimawakana.blog60.fc2.com/</a> 

と書いたことになり、Cのリンクは

 <a href="http://mimawakana.blog60.fc2.com/">Simplism</a>

 と書いています。


 リンクは別窓で開く設定が付けられます。
 これを指定するタグは

 target="_blank"

 Bのリンクはこのタグが書き加えられているので別窓で開きます。
 指定しないと同窓で開かれます。

 また、Bのリンクですが、こちらはリンク文字の上に
 カーソルを合わせると「Simplism」という文字が出ます。

 このリンクにタイトルをつけるタグは

 title="(リンクタイトル)"

 これをaタグに書き込みます。

 <a title="Simplism" href="http://mimawakana.blog60.fc2.com/">Simplism</a>

 SEO対策上でも特に画像リンクへのtitle挿入は大切です。
 SEO対策についてはまたいつかお話しようと思います。


 他にも色々と指定方法はありますが
 とりあえずはブログ向けのものだけ。


 ちなみに、別窓で開くリンクは非推奨です。
 できるだけ同窓にするほうが望ましい、というのが最近の傾向。
 確かにあんまりぱかぱか開くと頭にきます・・・

 最近は↑このような風潮がありますので
 同窓リンクが多くなっています。

 別窓で開きたいときは「Shift」キーを押しながらリンクをクリック
 もしくは右クリックして「新しいウィンドウで開く」を選択します。

 画像リンクの作り方を説明しようとしたら何故か記事が切れるので
 次の回でお話します。

タグ:リンク タグ

 「色の変更方法」の回で、カラーコードは

 ■■{
 ▲▲:#●●;
}

 

の形で書かれているというようなことをお話しました。

 

今日はこの■やら▲の部分から
 何の色が変わるのかを簡単にご説明します。

 

CSS(カスケードスタイルシート)では

 ■■{  の■■部分はセレクタと呼び
 ▲▲:  ▲▲の部分はプロパティと呼びます。

 プロパティ(▲▲:)がbackground(もしくはbackground-color)

 これは背景色の設定です。
 背景の色を変えたいときはここにカラーコードを入れます。

 セレクタ(■■})が「a{」で、プロパティ(▲▲:)がcolor:

 これはリンク文字色の設定です。

 検索で探すのは大変なんですが(^^;
 とりあえず「color」で検索してセレクタがaかどうか確認した方が早いかも。
 ※検索の仕方

 リンク文字は、通常の状態やマウスを合わせた状態
 リンククリック中の状態、訪問済の状態で色を変えられます。

閲覧者が何もしていない、通常の文字色を指定する
a:link{color: ●●}

すでにクリックされた(訪問済)のリンクの色
a:visited{color: ●●}

リンクの上にカーソルを合わせた状態の色
a:hover{color: ●●}

リンクをクリックしている最中の色
a:active{color: ●●}

 

テンプレにこれらのセレクタがなかったとしても
 上記のようにセレクタを書き加えれば変更できます。
 気をつけなければいけないのは、上からこの順番で書くことです。

 プロパティ(▲▲:)に 「border」が含まれる

 これは枠線の色の設定です。
 枠線は上下左右別々に色を設定できます。

 border-left-color:#RED;なら
 枠線の左側の色は赤ですよ、という意味。

 ですが大抵、枠線の設定は太さや線の太さまで
 ひとまとめに行われますので

 border-left:5px solid red;

 のような形になっていると思います。
 これは、枠線の左側は5ピクセル幅の赤い直線ですよという意味。
 ここで値の意味を覚える必要はありません。

 border-top:●●; → 枠線上部
 border-right:●●; → 枠線右部
 border-bottom:●●; → 枠線下部
 border-left:●●; → 枠線左部

 border:●●; のように特に方向の指定が無い場合は
 四方全ての設定をまとめて行います。

 プロパティ(▲▲:)が「color」

 これはリンク以外の文字の色です。

 前回までに、文字色は変更しています。
 その際に、標準状態(閲覧者が何もしていない状態)のリンク文字も
 同色に変更しています。

 ※前回までの作業一覧
   →http://mimawaka.seesaa.net/category/2181293-1.html
 
 が、実際にはリンク文字は青だったり紫だったりします。
 
 これは、もともとのスタイルシートでリンク文字色の設定がされていなかったためです。
 
 ・・・ですが、初心者だったら
 いったいどこが指定していないリンクか
 いやそもそもいったいどれがリンクになっているんだ!
 という状態になってしまうでしょう・・・
 
 まず、「サイトの確認」をクリックし、自分のブログを開きます。
 リンク全てに設定がされていない場合、青や紫の文字があるはずです。
 その指定がどこでされているかを調べていきます。
 
 
 ブログページで右クリックするとメニューが開きます。
s-st8.jpg
 ここで「ソースの表示」を選択。
 すると、メモ帳形式の文書が開きます。
 
 <head>〜</head>内は飛ばし、<body>〜</body>内を探します。
 その中から、文字色がおかしくなっていた文字列を探すのです。
 
 例えばブログタイトルの文字色がおかしければ
 <body>の中でタイトルが書かれている部分を探すのです。
 編集→検索 で探せば早いです。
 ※検索の使い方→http://mimawaka.seesaa.net/article/27113851.html
 探すのは<body>内の文字だということに気をつけましょう。
 
 文字列は<〜〜〜>●●<〜〜〜>のように書かれています。
 <〜〜〜>が複数連なっていることもあります。
 今回探すのは<■■id="★">
 または<■■class="★">
 または 
 と書かれた部分です。
 
 先ほどブログタイトルを例に出しましたが
 ブログタイトルはほとんどの場合
 <h1></h1>に挟まれていると思います。
 
 記事タイトルでしたら、私の場合は
 <h2 class="title"></h2>と
 <a class="title"></a>に挟まれています。
 あまり多くないと思いますが
 classの代わりにidを使っていることもあります。
 ★の部分はそれぞれid名・クラス名といいます。
 
 ★部分があったらそれを覚え、スタイルシートに戻ります。
 スタイルシートページで検索を掛けるなりして
 こちらで★を探します。
 
 もし★部分が class="★"だったら
 スタイルシートでは「.★」
 id="★"だったら
 スタイルシートでは「#★」と表記されています。
 「h★」はそのまま「h★」です。
 
 スタイルシートでその★を見つけられたら
 リンクの設定を書き加えていきます。
 

.★ a{
border:none;
}

 
 のような、色に関する記述がないなら
 
.★ a{
color:#●●●●●●;
border:none;
} 
 の形で、カラーコードを挿入します。
 「:」や「;」を忘れたり、順番を間違えないでください。
 
 
 また、リンクは状態によって色が変えられます。
 スタイルシートで設定されてはいないけれど
 変更したいと言う場合は、次のように書き加えます。
 
a:link{
color:#○●●●●●;
}
a:visited{
color:#●○●●●●;
}
a:hover{
color:#●●○●●●;
}
a:active{
color:#●●●○●●;
}
 
 上から順に
 
 通常の状態
 訪問済リンク
 リンクにカーソルを合わせた状態
 リンクをクリックしてページが切り替わっている最中
 
 の設定になります。
 
 どれかを飛ばしても構いませんが
 記述の順番は必ずこの通りに書きます。
 また、指定を飛ばした場合は
 a:linkで指定した色になります。
 
 状態別に色をわけない場合はa:link{でなく
 a{ で大丈夫です。
 
 idの指定がしてある先のリンクでは
 #★ a:link{〜
 classの指定がしてある先のリンクでは
 .★ a:link{〜
 のように、半角スペースで区切って記述します。
 

 ところで前回、(→色の変更
 黒字部分を茶色に変えたのですが
 黒だと思っていた文字が実は濃い灰色だったという
 ナイス落とし穴がありました。

 

 で、ブラウザの検索を使って変更する方法をご説明しましたが
 私のように「気に入らない色」があって
 それを全て変更したいときは、もっと早い方法があります。
 Windows付属のメモ帳を使います
 

 スタイルシートの画面、入力欄上で一回どこかクリックし
 「Ctrl」+「A」(もしくはブラウザの「編集」→「全て選択」)で
 全ての文字を選択します。

 次に 「Ctrl」+「C」(もしくは「編集」→「コピー」)でコピー。
   メモ帳を起動し

s-c6.jpg

 「Ctlr」+「V」(もしくは「編集」→「貼り付け」)で
 メモ帳にスタイルシートの文字を貼り付けます。

s-c4.jpg
 

 そうしたら今度はメモ帳の「編集」→「置換」。
 入力窓が出ます。

 s-c5.jpg  

 「検索する文字列」に
 ブログで使っている変えたい色コード
 「置換後の文字列」に
 新しく変えたい色コードを入力。 

 *色コードhttp://mimawaka.seesaa.net/article/27110251.html
 *色コードの調べ方http://mimawaka.seesaa.net/article/27113851.html 

 検索するだけ、とか、置換して次に、とか、一気に置換とか
 色々と選択肢がありますのでお好みで・・・

 

 いちいちスタイルシート上で変換していくよりよっぽど早いです。
 たまに検索使うと固まるしね(==)

 置換が終わったらまた
 メモ帳の文字を全て選択→コピー→スタイルシート入力欄に貼り付けしてください。
 スタイルシートにそれまで書いてあった文字は全て消してから貼り付けてくださいね。

 ブログカスタマイズ、まずは文字色をいじっています。
 カラーコードについては前回の記事をどうぞ。
 色の変更方法

 前回、カラーコードは

■■{ 
 ▲▲:#●●;
}

 の形で書かれているというようなことをお話しました。
 

 どれが背景で、どれが文字か。
 それを見るのは■■}や▲▲:の部分です。

 

 で、この■■}や▲▲:の部分ですが
 慣れていないと探すのが面倒くさいです。
 ・・・ので、参考までに・・・

 

 ページの上部、つまりブラウザの部分ですが
 「ファイル(F) 編集(E) 表示(V)・・・」などと言う文字が並んでいますね。
 この「編集(E)」の部分をクリックします。
 するとメニューが開き「このページの検索」という項目が出てきます。
 これをクリックすると検索窓が開きます。

s-c1.jpg
 ここに■■}部分の文字(セレクタといいます)や
 ▲▲:部分の文字(プロパティと言います)を
 入力して検索すれば、簡単に見つかります。

  ・・・・ちょっと待て・・・・ 
 

 これね、作業は簡単ですが
 すんごくいっぱいあるはずなので
 正直どれがどれかを探すのは
 慣れている人でも結構大変です。

 ちゃんと探すには、「スタイルシート」右隣の「HTML」を
 確認しながら変えていかなければなりません。

 激しく大変な作業ですので
 とりあえず文字の色でトーンを変えたいときの方法です。

 スタイルシートのページの右上に緑色のタブが並んでいますね。
 その下に「サイトの確認」というリンク文字があります。
 これをクリックすると別ページで自分のブログが開きます。

 

 ブログをじっくり見て
 「この色が気に入らん!」という部分を探し出しましょう。

 

 例えばタイトル色が気に入らないなら、

h1 a{
color:#●●;

 を書き直せばいいわけです・・・が、これは
 ある程度スタイルシートやHTMLがわかる人でないと無理です。

 で、前回ご紹介したパワースポイト。
 これを使っての変更方法。  

 まずパワースポイトを起動します。

s-c2.jpg
 すると小窓が開いて、マウスを動かすと
 カーソルがあたっている部分のカラーコードが出てくるはずです。

 

 これを憎き文字色に合わせ、スペースキーを押します。
 すると、HTML色欄に#******とカラーコードが決定されます。
 これをコピーします。

 

 次に、スタイルシートのページで、前回ご説明したとおり
 編集→検索を開きます。
 そこにカラーコードを入力し、検索していくと
 その色を使っている部分を簡単につきとめられます。

 もしも#FF00FFなど、
 1桁目と2桁目、3桁目と4桁目、5桁目と6桁目が
 同じ文字が連続して入るコードが出た場合
 スタイルシートには#F0Fと3桁で記述されていることがあります。
 その際には検索文字を変えてください。
 #FFFFFF→#FFF
 #1100CC→#10C などのように・・・

 

 私はとにかく黒文字を変えたいです!!
 ・・・ので、実際にやってみます。

 スタイルシートを開き、入力欄の一番左上にポイントをあわせます。
s-c3.jpg
 これをやっておかないと、検索に漏れが出ます。

 

 パワースポイトを使う方なら、黒文字部分にカーソルを合わせると
 #000000と出るはずです。

 これが黒のコードです。

 私のテンプレは#000と書かれているので
 検索窓には#000と入力し、検索する方向を「下」にして検索。

 #000が出てくるたびに、新たなコード#996666に書き換え。

 あらかじめ#996666をコピーして
 「Ctrl」+「V」でペーストしていくと楽ちん♪
 もちろん右クリックでも「貼りつけ」できますよ。

 ここで気をつけなければいけないのは
 (プロパティ):(●●←「値」といいます);
 : や ; は決して消さないこと。
 半角スペースが入るのは問題ありません。 

 

 とりあえず文字が茶色くなって
 微妙に・力が和らぎました(笑)

 ああ、やっと楽しいところに来た!
 タグ打ち大好き美馬若菜。

 気合入れてやってるとサイトの更新が完全停止になるので
 少しずーつ手を入れていこうと思います。

 「デザイン」→「スタイルシート」に入ります。
 すると、今使っているテンプレート名が出てきますので
 (右の「適用」が黒くなっているものです)
 それをクリック!

 これでテンプレートのスタイルシートが開きます。
 タグに詳しくない方は何が何やらという文字列だと思います・・・
 いちいち説明しているとカスタマイズどころではなくなるし
 放っておいても書くことなくなったら熱く語りそうですので(笑)
 取り敢えずは対処方法のみで行きます。


 で、このブログですが、いっそここまで来ると潔い!
 というくらいの無愛想っぷりです;
 まるでサイト作成の練習ページのよう・・・
 全てが全てHTMLのデフォルトですなぁ。

 とりあえず寒々しいので、文字の色を変えてみようと思います。

 スタイルシートの中に「#FFF」とか「#0093E2」とか
 「#●●」の形で書かれているものがありますよね。
 それがカラーコードです。
 もしかしたら「RED」とか英語の色名で書かれているテンプレも
 あるかもしれません。

 このカラーコード
■■{
 ▲▲:#●●;
}
 の形で書かれていると思います。
 前や後に別の文字が入っていることもあります。

 このカラーコードを変更することによって
 背景や文字の色が変えられます。

 で、本当はこの回で一気に文字色を変えられたら気分爽快なんですが
 スタイルシート初心者・・・いや、タグ打ち初心者の方は
 本気でワケがわからなくなります。

 のでね、とりあえずそれは次回に持ち越して
 カラーコードのお話をします。



 色指定といえば、簡単なのは
 ○○-color : black;
 とか、そのものずばり色名(カラーネーム)を入れちゃう方法です。

 が、最近これあんまり推奨されてないらしいんです。
 カラーネームだとブラウザによっては正しく表示されないものも
 あるとかないとか・・・

 それに、微妙なニュアンスを出したいときに、やっぱり便利なのが
 #○○○○○○の形のカラーコード。


 コードの意味?指定?は
 #■■■■■■

 #の後の2桁が赤色要素
 その後の2桁が緑色要素
 最後の2桁が青色要素を指定します。

 光の三原色ですね〜。
 緑が黄色だと色の三原色。ううむ。

 それぞれの2桁ずつに16進数を入力します。
 00が一番弱くてffが一番強い!

 だから、赤くしたいときは、 #ff0000
 緑なら #00ff00 
 青なら #0000ff

 今、三原色がどうのといいましたが、
 絵の具の赤と黄色と青を混ぜたら黒になりますけれど
 光の三原色なので、全部混ぜると白になります。

 よって、白は#ffffff 最強!
 黒は#000000 最弱・・・

 まあ、いちいちこんなこと考えながら色を作る人は珍しいと
 思いますけれどもね・・・ちなみに私はサイトの方でやりました。
 ああ、そうさ、暇人さ!

 あの、ついでに言うと、↑こういう行為はハッキリ言ってムダに
 なりがちです。
 ブラウザによってはちゃんと表示されない色を作り出す可能性の方が
 高いので・・・・

 webセーフカラーという有難い存在がありまして、こいつなら
 どんな気難しいブラウザでも正しく表示してくれます。

 216色もありますので、そこから選んだほうがいいでしょうねぇ・・・
 web216⇒http://www.colordic.org/web216/ 

 あともうひとつ、デザインにとことんこだわる方へのお助けツール。
 パワースポイト1.31
 ⇒http://www.vector.co.jp/soft/dl/win95/art/se187189.html

これは気に入った色をカラーコードに変換してくれるツールです。
 使い方は次回に書こうと思います。

×

この広告は1年以上新しい記事の投稿がないブログに表示されております。