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 では異常に読み込みに時間がかかりました ... 。
|
じぶん用に書いたものですが、活用してくださる方がいましたら、もっけの幸いです。(いちおう、それも念頭において書いてみました ... )
また、まちがいなどありましたら、ご指摘いただけましたら、たいへんありがたいです。
* 追記・修正する可能性があります。
参照:
『とほほのWWW入門』 - 「HTMLリファレンス」、「スタイルシート」