goo BLOG．
ユーザー登録はしてみたものの、使える要素 （以下、「タグ」 とする） のあまりの少なさ、カスタマイズのあまりのできなさに、正直がっかりしてしまったのも事実 ... 。 しかし、住めば都、とでもいうのか、郷に入れば郷にしたがえ、とでもいうのか、できる範囲で見映えを良くしようと （これでも） 苦心し、そのうち、こんなもんさ ... と思っておりました。
その矢先に、
使用できるタグが一気に追加されたとの、うれしい知らせが。 （スタッフの方々、ありがとうございます）
あまりにもたくさん追加されたので、じぶん用の覚書、および実験/検証用として、すこし書いてみることに。
では。 グタグタ言ってないで、タグりましょう。 とりあえず、「テーブル （表組み）」 から ...
昨夜投稿した
記事には、背景画像を挿入してみたのですが。
<table border="0" background="http://userimage.gaiax.com/goo/byrdie/wallpaper.jpg" style="color: #223d08"><tr><td>
・・・本文・・・
</td></tr></table>
... という感じに。
（「＜」 「＞」 は、実際は半角） （
rd-xs40user さんのページを拝見し、<，> 記述に変更しました。 2004.5.20）
「テーブル」 （<table></table>）、 「行」 （<tr></tr>）、 「列」 （<td></td>） それぞれのタグは、
<table border="0" background="http://userimage.gaiax.com/goo/byrdie/wallpaper.jpg" style="color: #223d08">
<tr>
<td>
・・・本文・・・
</td>
</tr>
</table>
のように改行を入れて、インデントをつけたほうが、ソースとして見やすいのですが、goo BLOG の場合、
物理的な改行が表示上の改行となってしまう （自動改行?） なので、改行を入れずに書いてみました。
<table> タグで指定している border 属性は、いちおう 「0」 に。 無指定の場合、デフォルト 「0」 が設定されるようですが、ブラウザの種類によっては 「1」 が設定されてしまう場合もあるかもしれません。 その場合、枠線が表示されてしまうので。
（ --->
実験用エントリ1 - 実験1 参照）
| ■ background 属性 / bgcolor 属性 |
background 属性には、背景にしたい画像の URL を入力。
goo BLOG に標準でついている画像アップロードへ送信したものはなく、自サーバーの URL をフルパスで。
ちなみに、私は、goo のメンバー登録で開設できる
web サービスに標準でついている 「画像アップローダー」 というものを利用し、そこへ送信したものを使っています。
なお、画像は、
Gimp という無料画像作成ソフトを利用し、自作しました （ ... というほどのものではないのですが）。
以上で、本文の書かれている部分の背景が、指定した画像となって表示されるはず。 （HTML の仕様に準拠していれば）
プレビューしたときは問題なかったけれど、送信して、実際のページを見てみると、がっかり、ということが何度かあったが、きちんと表示されていたので、安心。
なお、background 属性を bgcolor 属性にし、背景色を指定することも可能。
（ --->
実験用エントリ1 - 実験2 参照）
但し、background 属性および bgcolor 属性は、テンプレートを変更したときに見映えが変わる場合があるので、指定する際に注意が必要。
現在のテンプレートではきれいに見えても、変更したら ..... ということもありえます。
それから、背景画像があると、ごちゃごちゃして文字が読みづらくなってしまうことがあります。 ちょっとおとなしめすぎるかな ... くらいのひかえめな柄がおすすめ、かもしれません。 （実際、例のじぶんの記事が、じぶんでも読みづらい ... と思います）
style 属性では、各種スタイルが指定できます。
ここでは、文字色を指定しています。 （style="color: #223d08;"）
背景画像や背景色を指定している場合、現在のテンプレートではきれいに見えたとしても、テンプレートを変更した場合、文字色が変わってしまうことがあるので、固定値を指定しておきます。 これで、テンプレートを変更しても、文字色が変わりません。
どんなテンプレートにも合うような色 （黒: #000000 など?） を指定しておくと無難かもしれません。
じぶんの現在のテンプレートの内容を知るには ...
Windows 版 Internet Explorer 6.0 での話になりますが、[ファイル] - [名前をつけて保存] をすると、ページ情報がローカルに保存されます。 保存先に、じぶんのページ名のついたフォルダが作成される （例: [Run, BLOG, Run.files]） ので、そこに保存された [*****.css] ファイル （ファイル名はテンプレートによって可変） を開き、BODY 要素
BODY {
MARGIN: 0px; COLOR: #223d08; BACKGROUND-COLOR: #5b912f
}
の COLOR スタイルで指定されている色を見ました。
[追記]:
スタイルシートの URL を直接たたいても、いけるようです。
右クリックの [ソースの表示] で、じぶんのページのソースを開き、
＜link rel="stylesheet" type="text/css" charset="euc-jp" href="/skin/templates/8b/ec9a1a7185ff68f69bfb7366ef538bb5.css" /＞
の href 属性に指定されている値をコピー。
http://blog.goo.ne.jp 以下にペーストして、ブラウザのアドレス欄に入力すると、css ファイルを読み込んでくれました。
http://blog.goo.ne.jp/skin/templates/8b/ec9a1a7185ff68f69bfb7366ef538bb5.css
charset が EUC なので、「メモ帳」 で開くと読みづらいため、文字コードを自動判別してくれるテキストエディタで開きました。 （私は、Peggy Pad というのを使っています。）
|
| ■ cellpadding 属性 / cellspacing 属性 |
cellpadding 属性は、枠線から枠内部の余白をピクセルで指定。 無指定の場合、Internet Explorer では、「2」。
（ --->
実験用エントリ1 - 実験3 参照）
cellspacing 属性は、内枠の太さをピクセルで指定。 無指定の場合、Internet Explorer では、「2」。
（ --->
実験用エントリ1 - 実験4 参照）
width 属性は、表の幅を指定。 ピクセルか、パーセントで指定。
（ --->
実験用エントリ1 - 実験5 参照）
heigth 属性は、表の高さを指定。 ピクセルか、パーセントで指定。
（ --->
実験用エントリ1 - 実験6 参照）
それぞれ無指定の場合、セル内部のデータ量に応じて、自動的に設定されます。
表の位置を指定。 （left/center/right）
（ --->
実験用エントリ1 - 実験7 参照）
無指定の場合、left となります。
| ■ bordercolor 属性 ← ＜blink＞ 使用中。 IE で機能するのか ... ?! |
表の枠線の色を指定。
（ --->
実験用エントリ1 - 実験8 参照）
| ■ cols 属性 ← ＜blink＞ 使用中。 IE で機能するのか ... ?! |
表の列数を指定。
テーブルは、すべての読み込みが完了するまで表示されないゆえ、表示速度が体感的におそく感じられることがあるのですが、cols 属性を指定しておくことで、表示が若干速くなる場合がある、そうです。
◇
以上、いくつかの属性についてだけ、Windows 版 Internet Explorer 6.0 での表示をもとに記述しました。
[追記]: （2004.5.20）
* Windows 版 Opera 6.0 および Netscape Navigator 4.7 でも、思ったとおりの表示がされていました。
但し、NN 4.7 では異常に読み込みに時間がかかりました ... 。
|
じぶん用に書いたものですが、活用してくださる方がいましたら、もっけの幸いです。（いちおう、それも念頭において書いてみました ... ）
また、まちがいなどありましたら、ご指摘いただけましたら、たいへんありがたいです。
* 追記・修正する可能性があります。
参照:
『とほほのＷＷＷ入門』 - 「HTMLリファレンス」、「スタイルシート」
