preタグに背景色を設定した

先日ブログのテーマを色々と試していたら、元に戻せなくなってしまい現在のものに落ち着いた。
コマンドラインでの操作などは"pre"タグで記述しているが、背景色があったほうが読みやすく感じたので設定を行った。

■スタイルシートの変更
Seesaaブログのヘルプを参考に、「デザイン」->「デザイン一覧」->「利用しているテーマ」をクリックして編集画面で、以下を追記した。

pre {
overflow: auto;
white-space: normal;
white-space: pre-wrap;       /* css-3 */
white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
white-space: -pre-wrap;      /* Opera 4-6 */
white-space: -o-pre-wrap;    /* Opera 7 */
word-wrap: break-word;       /* Internet Explorer 5.5+ */
border:1px solid #ccc;
padding:5px;
margin:10px;
background-color:#e7ebff;
}

当初は、「Seesaaブログにコードを貼り付けるための設定」などを参考に"pre"タグの中に"code"タグを入れて、"code"タグに設定を試みたが、各行に対して枠線などがついてしまったのでやめた。
「改行を<br />タグに変換しない」に設定を変更すればいけるのかもしれない。しかし、他の部分で手で改行を入れるのは面倒だ。
ちなみにborderやpaddingは、このテーマのblockquoteにあわせている。また折り返し設定は以前も設定なども念のために入れた。

記事検索のHTMLを変更

seesaaブログの記事検索が使いにくくなっていたので変更。
テキストボックスに文字を入れて検索してもキーワードが空で検索されている模様。

Yahoo→Googleにして、ブログ内検索だけにした。

「デザイン」→「コンテンツ」
「記事検索」→「コンテンツHTML編集」

------------------------------------------------
<div class="sidetitle"><% content.title %></div>
<div class="side">
<% content.header -%>
<form method="get" action="http://www.google.co.jp/search" style="margin:0;padding:0;">
<input value="" name="q" type="text" size="20" />
<input type=hidden name="sitesearch" value="animemo.seesaa.net">
<input value="検索" type="submit" name="btnG" class="input-submit"  /><br>
<div align="left" style="padding-top:2px;">
<div style="clear:left;"></div>
</div>
</div>
</form>
------------------------------------------------

参考ページ
●Google「リンク、検索機能を追加」
●Web検索!メタサーチ 「Google を利用したサイト内検索窓 設置方法」



ちなみにHTMLタグをそのまま表示させるには"<pre>"だけではだめで、"<",">"をそれぞれ"&lt;","&gt;"にしないとダメらしい。
"<pre>"の中では折り返されないのでここのCSSをもらってきて設定。

------------------------------------------------
pre {
 white-space: pre-wrap;       /* css-3 */
 white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
 white-space: -pre-wrap;      /* Opera 4-6 */
 white-space: -o-pre-wrap;    /* Opera 7 */
 word-wrap: break-word;       /* Internet Explorer 5.5+ */
}
------------------------------------------------

参考ページ
●jmblog.jp「ソースコードを表示させるのに使うべきHTMLタグは？」

Firefox の文字の大きさの設定

Internet ExplorerとFirefoxではCSSでフォントサイズをsmallなどとしたときに、デフォルトで表示する大きさが違う。

どうしたものかとWebを漁っていたが、ブラウザごとにCSSファイルを用意するぐらいしか見つけられなかった。


それとは別にFirefoxで文字が小さいときの対策を見つけたのでメモ

　Firefoxまとめサイト
　IEより文字が小さくてページが見にくい
　http://firefox.geckodev.org/?FAQ#l67772fa

幸いMozilla・Mozilla Firefoxには最小フォントサイズ設定があって、それ以下のサイズには小さくならないように設定できるようになっていまして、ツール→設定→全般→フォントとページ配色→最小フォントサイズから設定できます。

Ctrlと＋で文字の拡大、Ctrlと−で文字の縮小とか、
Ctrlとマウスホイールで文字の拡大縮小とかは知ってたけど
デフォルトに戻すのが Ctrlと0（数字のゼロ）は不覚にも知らなかった。これは便利だなあ。

　Mozilla Firefox
　目の疲れからあなたを解放します。文字サイズを簡単に拡大!
　http://www.mozilla-japan.org/products/firefox/text-zoom.html

IEのボックス幅を広げるバグ

当ブログをInternet Explorerで見ると、本文の幅がまちまちで、右側のナビゲーションの位置が影響を受けている。
長いURLなどがあると幅が膨らんでいるみたい。

原因を調べると、IE6のバグだという話があった。

　Internet Explorer (Windows) CSSバグリスト
　長い半角英数字の文字列に合わせてボックスの幅が強制的に修正される(IE6)
　http://cssbug.at.infoseek.co.jp/detail/winie/b078.html

やれやれ、どうしたものやら。
URLを途中で改行しちゃう？リンク切れると不便だしなあ。
見栄えの問題だけなので、対策がみつかるまで放置。


ちなみにFirefoxのほうでもボックスで折り返さないバグがあるらしい。
まだこっちの方がましかも。

　Firefoxまとめサイト
　URLっぽい文字列が右端で折り返されずレイアウトが乱れます
　http://firefox.geckodev.org/?FAQ#l67772fa

ブログのフォントサイズを固定から変更

このブログのフォントサイズがpx単位の決めうちになっていたのを修正したら、あんのじょうレイアウトが崩れた。

IEは、フォントサイズ固定だと文字を大きくできないので、変えなきゃダメダメなのはわかってたんだけど。Firefoxだと問題なく文字の表示サイズを変えられるんだけどなあ。
みんなIE捨ててくれると嬉しいんだけど、それまで放置するのもなんだし。


文字サイズの指定も難しいなあ。Firefoxではちょうどよくても、IEだとでかすぎ。


あれ？IEで見ると、右のナビゲーションの位置がずれてる。知らなかった。
URLが長いとその分、本文のボックスが右に張り出すらしい。
場合によっては、右のナビゲーションが下に落ちているし。


デザイン修正をする前に、
今回のCSSの変更点をメモしておく。
-----

フォントサイズ関連
h1 {
	font-ize:24px;　→　x-large;
h2 {
	font-size:14px;　→　medium;
h3 {
	font-size:14px;　→　medium;
.description {
	font-size:14px;　→　medium;
.navi {
	font-size:12px;　→　small;
.blogbody {
	font-size:100%;　→　変更なし
.date{
	font-size:14px;　→　medium;
.title a{
	font-size:14px;　→　medium;
.text{
	font-size:12px;　→　small;
.posted{ 
	font-size:10px;　→　x-small;
.calendarhead {
	font-size:12px;　→　small;
.calendarday {
	font-size:12px;　→　small;
.calendarday a{
	font-size:12px;　→　small;
.sidetitle {
	font-size:12px;　→　small;
.side {
	font-size:12px;　→　small;
.syndicate {
	font-size:12px;　→　small;
.comments-head{ 
	font-size:12px;　→　small;
.comments-body {
	font-size:12px;　→　small;
.comments-post {
	font-size:10px;　→　x-small;
#trackback {
	font-size:12px;　→　small;
.trackback-url {
	font-size:100%;　→　変更なし
.trackback-body {
	font-size:100%;　→　変更なし
.trackback-post {
	font-size:x-small;　→　変更なし
.copyright{
	font-size:80%;　→　変更なし


ゴミがまじってたので以下削除-----
#diet-container{
    border:1px solid #999;
    padding:5px;
    margin-bottom:5px;
}

.diet-title{
    background-color:#333333;
    padding:2px 10px 2px 5px;
    font-size:12px;
    color:#FFFFFF;
    background-image:url(http://blog.seesaa.jp/img/diet/right_bt.gif);
    background-position:right;
    background-repeat:no-repeat;
    width:90px;
    margin-top:5px;
}

.diet-content{
    padding-left:10px;font-size:12px;
}

#diet-foods{
    padding-left:10px;
    font-size:12px;
}

.food-title{
    width:20%;
    clear:left;
    float:left;
}

.food-content{
    width:75%;
    padding-top:10px;
}

ここまで削除----------------

ブログのデザインが見苦しかったのを修正

このブログで使っているテンプレートは、元々左にメニューがあるタイプ。
それを設定画面で右メニューに変更して使っている。

左のほうにメニューの背景画像だけ残って見苦しい状態になっていた。
スタイルシートがおかしかったので修正した。


float:left;　なんてはじめて知った。昔ながらのテーブルでのレイアウトから考えたらすばらしく簡潔に書けていい。
これはこれで、ブラウザの互換性を考えたらはまるんだろうけど。



変更点
左メニューのときは #links-left が使われているのだろうが、
Web画面で変更したときに #links が使われるようになっていた。
#links-left の設定値を #links へ移す。

初期値

#links-left {
font-weight:normal;
width:220px;
float:left;
margin-top:0px;
background-image:url(http://blog.seesaa.jp/img/bg/cyber/links_bg.gif);
}
#links {
}

変更後

#links {
margin-top:0px;
width:220px;
float:left;
background-image:url(http://blog.seesaa.jp/img/bg/cyber/links_bg.gif);
}

あと、Firefoxでは左のマージンは問題ないんだけど、Internet Explorer６で見てみたら大きすぎるので #content のマージンを40px → 20pxに変更。

初期値

#content {
margin-left:40px;

変更後

#content {
margin-left:20px;

参考Webページ
　スタイルシート段組
　http://desperadoes.biz/style/dan/index.php