昨日に引き続きIEかPCか私の頭にバグ連発です。
 全部かもしれません…

 今日はフレームです。
 こういうページを作ったのですが
 フレームページ
 どういうわけか左側に見えるスクロールバー、
 ネスケだと表示されないのです。
 どういじくっても直らないので、仕方なく
 ネスケ専用メニューを作り、フレームページを開いたとき
 一番最初に表示されるページからリンクを貼ったのです。

 …あ、すみません、上のページはそのネスケページでした。

 ↓そしたら何かもうすごいことになってしまって。
 フレーム怪奇現象

 背景の画像が繰り返しというより
 断片化された画面が繰り返されています。
 おまけに前、さらにその前に表示されていた画面が消えずに残り
 重なって表示されています。
 一枚目のキャプチャを見ればわかると思いますが
 背景に黒なんて指定していないです。スタイルシートまで暴走。

 どうしたものかと思いつつ、全く何も思いつかないので
 仕方なくググって見るとこのページに漂着。

 TAG index BBS Q.インラインフレーム内の表示がおかしくなる

 今回私はインラインフレームじゃないんですが
 症状が似ているのでアドバイスを参考にして
 lintのチェッカーに掛けてみる。
 …色々細かいケチはつけられているけれど、一応100点満点。
 じゃあ、なんで…!?

 さらに別の方のアドバイス
 ・インラインフレーム側のファイルを互換モードにする
 ・インラインフレーム側の背景設定をbody要素からhtml要素に変更

 html要素がいじれず昨日から苦労している私にとって
 残された手段はDOCTYPE宣言のみ…!!
 しかしながらフレームのベースになっているHTML文書は
 最初っから互換モードにしてあったりするのです…

 どうしよう、とりあえず子ページの2つのファイルのDOCTYPE宣言を
 いじくってみる??
 祈るような気持ちで互換モードに変更してみる。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">

 ↑これを
 ↓これへ
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">


 結果はあっさりと問題解決でした。
 多少文字がでかくなったのはCSSで修正。
 フレームの土台が互換モードで子ページが標準だったのが
 いけなかったのだろうか…
 あまりにあっさり解決してしまったので真相は闇の中です。
 ありがとう、親切な回答者さん…
 突然ですがテキストやらボックスやらあれやらこれやら
 とにかくブツを画面の真ん中に寄せる命令は

 
text-align : center;


 です。
 ちなみに上の文字を中央に寄せるためにこう記述してます。

 <div style="text-align:center;">text-align : center;</div>

 書けば書くほど混乱に陥れそうです。
 左寄せはtext-align : left;(デフォルト)
 
右寄せはtext-align : right;


 しかしいくら頑張っても右寄せにしたい部分が左から動かず
 なんでやねん!なんでやねん!と10分ほど悩んで発覚しました。

 text-align : fight;

 根性では右には寄ってくれません。
 バグじゃなかった……orz

 ↑IEやらOperaやらバグが多過ぎて
  まずブラウザのせいにする癖がついた人

 IEのバグといえば、頭を悩ませるのが
 iframeの横スクロールバーですよね…
 いくら余裕を持たせてセットしても何故か出てくるアレ。

 ウチのサイト(このブログじゃないです)も
 小説メニュー部分にインラインフレームを使用しており
 これまではメニューページのスタイルシートに
html {
overflow-x : hidden;
overflow-y : auto;
}

 を指定してしのいでいたわけです。

 しかし、サイトがでかくなると
 外部スタイルシートだけでも10個近くとか
 わけのわからない状況になり
 先日リニューアルした際にそのひとつが行方不明になったことから
 ついに重い腰を上げてスタイルシートを統一することにしたのです。

 …最近また引きこもってるのこういうわけです。
 ウチのお客さんいたらすみません…

 スタイルシートを統一するに当たって、困ったのはhtml要素。
 フレームページには上の指定をしたいのですが
 他のページのスクロールバーが消えると厄介です。

 ×case1
 id指定をしてみる作戦
[html]
<body id="flame">〜〜〜〜〜〜〜〜〜〜
[CSS]
html#flame{
overflow-x : hidden;
overflow-y : auto;
}

 笑わないでくださいって。真剣なんですって。
 当然ですが完全無視されました。

 ×case2
 overflow-y : auto;をoverflow : auto;として神に祈る作戦
 ⇒変化なし。これができてたらみんな悩みませんやね。次。

 ○case3
 overflow-x : hidden;
 強行作戦。
 でもこれを指定しちゃうと他のページが不安だし
 どうせ縦が出ちゃうならもう開き直って↓

 ○case4
 overflow-y: scroll;
 縦スクロールバーを出せの命令。
 これ、結構使われる手ですけれど、改めて考えると変なの…。
 まあ一番変なのはバグ出してるIEですから目には目ということか。
 これで行こう!

 …と、このブログにアップするキャプチャ画像を撮ろうとしたら
 謎の事態が。
 何も指定していない状態のキャプチャが欲しいから
 一旦html要素をさっくり削除すると
 縦も横も不要なスクロールバーが出てこない!?
 overflow-x : hidden;を指定しているときと同じ状態に。
 試しに更新してみたりキャッシュの削除までしてみるけれど
 やっぱり出てこない。何故…?

 この状態からoverflow : auto;を指定してみる。
 おお!アイフレームどころかページ自体に出ていた
 不要の縦スクロールもスッキリ!

 …しかし、なぜ…
 最初にこの指定をしたときは完全無視されたのに。
 でもこれなら他のブラウザでも不自由なく見られます。
 何が起こっているかわからない状態で使ってしまうか
 それとも手堅くoverflow-y: scroll;を使うべきか…

 悩みながら最初の指定をしてみる。
html {
overflow-x: hidden;
overflow-y: auto;
}
 やはりoverflow : auto;と同じ状態のまま。
 もうわけわからんです。
 すべてがうまく行ってしまうと気持ちが悪いのです。
 IEバグっていうよりこのPCか私がバグっているとしか思えません。
 怖いので一旦html要素そのものを削除。
 ページ全体の縦スクロールバーのみ出現。
 iflameはバグなし。
 そもそも何のために悩んでいたかもわからなくなる…

 …というか横スクロールが出てくれないと落ち着かない!!!

 しかしその後も横スクロールのバグは出現せず
 一番無難なこの指定に落ち着きました。
html {
overflow: auto;
}

 もういいや、アップしてバグが出たら何とかしよう。
 別に横スクロールすると魔界につながるってわけでもなし。

 IEユーザのくせに今ひとつこのブラウザはわかりません。
 もしやこの順番で行くとバグが消えるとかいうおまじないでしょうか。
 ポイントはoverflow-y: scroll;を一旦指定してから
 上書きでoverflow: auto;を指定すること!みたいな。

 …すみません、冗談です。

 でも誰か超ヒマだったら試してみてください(笑)

 あ、私が最後に指定したヤツはバグ必至ですので
 お使いになるなら
html {
overflow-x: hidden;
overflow-y: auto;
}
 がよろしいかと思われます。
 しかし小さい画面では切れる可能性があるデザインなら
html {
overflow-y: scroll;
}
 が安全だと思います。

 ++ 追記 ++

 ふと思ったのですが、外部スタイルシートでなく
 ページ内指定で
 overflow-x: hidden;
 を使えばいーじゃんと気付いたメモ。
 うーん、困った。コメント部分を調整したいのに
 いくらやってもトラックバックとコメントが切り替わらない…
 仕方がないからコメントは向こうでやることにします。

 サイドバーを左に持ってきます。
 この作業は「コンテンツ」ページで。
 スタイルシートの#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年以上新しい記事の投稿がないブログに表示されております。