実験結果３

記事での確認

左のサイドバーと、同じコードなんですが、記事の中では画像が離れてしまいます。
みんなの情報で、各画像の周りに余白が設定されてしまう為・・・ということが分かりました。
対策としては、<img>タグにスタイルシートのｍａｒｇｉｎ：０を指定するとのこと。

たしかに・・・ＯＫです。
でも、ここの場合、画像が４つ＋Ｈａｒｂｏｔです。
ほかでは、画像が８つ＋Ｈａｒｂｏｔのところもあります。

記述が多くなるのはあまり好みでなく、ちょっと面倒なので、他の手段を考えてみます。

　なかなか、思うようにいきません。　　何とかなりました。

スタイルシートのＩＤで属性指定をしています。

01: <style type="text/css">
02: <!--
03: #IM {margin:0;}
04: -->
05: </style>
　：
xx: <td><img id=IM src="画像"></td>
　：

０１～０５行が、スタイルシートの指定です。
０２、０４行は、コメントの開始と終了です。記述した指定が間違っていたり、対応していないブラウザであっても、支障が出ないようにするためのものです。
で、０３行に設定する内容と、その定義名称を記述します。この場合は、ＩＭというＩＤに、ｍａｒｇｉｎ：０を設定します。｛・・・｝のカッコと、セミコロンが重要です。
これを、ｘｘ行のｉｍｇタグのＩＤとして使用してみました。
定義のときに、タグを指定していないので、なんにでも使用できます。
これによって、各imgタグにｍａｒｇｉｎ属性を付けるわけです。
１６文字　style="margin:0"
　５文字　id=IM
じゃっかん、節約になりました。

上記のソースです

01: <style type="text/css">
02: <!--
03: #IM {margin:0;}
04: -->
05: </style>
06: 
07: <table border="0" cellpadding="0" cellspacing="0" align="right">
08: <tr>
09: <td colspan="3"><img id=IM src="画像うえ.gif" width="177"></td>
10: </tr>
11: <tr>
12: <td><img id=IM src="画像ひだり.gif" width="25" height="201"></td>
13: <td><img id=IM src="画像中央.gif"></td>
14: <!-- 上の１行は、サンプル用の画像。下の１行がＨａｒｂｏｘの書式（コメントにしてます）。
15: <td><script language="JavaScript" src="ＨａｒｂｏｘＩＤ"></script>
16: -->
17: <td><img id=IM src="画像みぎ.gif" width="25" height="201"></td>
18: </tr>
19: <tr>
20: <td colspan="3"><img id=IM src="画像した.gif" width="177"></td>
21: </tr>
22: </table>

コメント 14

おはようございます。
メンテ途中のようで、管理ページ行きつけません。

margin１:0は、カスタムベインでは必要ないんですよね。本文とカスタムベインでは、シートの種類が違うようです。面白いです。」
by (2006-02-15 09:08) 

メンテは完了したのでしょうか・・・
昨夜も、記事更新中にメンテになってしまい、中途半端な記事のままです。後で修正します。
青色のキャプチャ画像も昨夜取ったものです・・・記事更新も、ハラハラ・ドキドキです。
ではのちほど。
by 柊太郎 (2006-02-15 10:16) 

実験お疲れ様です。
＞ほかでは、画像が８つ＋Ｈａｒｂｏｔのところもあります。
わたしが見た中では13個っていうのがありましたｗ
しかし、本文とカスタムペインで違うって言うのが何ともいえないですね。
by Medium (2006-02-15 11:25) 

実験って、ケッコウ大変です。
サイドバーのカスタムペインとプレビューは、同じような環境ですね。
本文の記事がネックです。
保存登録時に、自動変換が行われるので・・・
by 柊太郎 (2006-02-15 12:26) 

ご苦労様でした。
今度はCSSの勉強しなくては・・・。
覚えなければいけないことが、どんどこ増えてきました。＾＾
by (2006-02-15 15:39) 

本当は、もうひとつ手段があるのです・・・でも、上手くゆかない。
それができれば、スタイルシートは便利！と、じっかんできるのですが・・・
by 柊太郎 (2006-02-15 16:18) 

こんばんは＾＾
ほんとにタグというのは奥が深いですね。
私はまだ入口から一歩進んだくらい。もっともっと進んでいかなくては＾＾
こういうふうにブログに書いてもらうと、何を覚えればいいのか光がみえてきます。
これからもよろしく。
by kuu (2006-02-15 22:03) 

あの～　質問が・・・
柊太郎さんのブログの読んでるブログに　ご自分のブログをのせてるのはわざとですか？
ではでは＾＾
by kuu (2006-02-15 22:06) 

はい、そうです。
最初は、更新するとどうなるのか、興味本位で入れましたが、今では目印に使っています。
下の方に行ってしまったり、欄外になったりすると・・・更新しなくては・・・というためにです。
by 柊太郎 (2006-02-15 23:32) 

あと、ちゃんと更新されたことが伝わっているのかな？というのも気になりますよね。
これを付けたおかげで、以外に反応が悪いことも分かりました。
管理ページの、ＲＳＳ一覧はちゃんと反応しているのに、サイドバーは無反応・・・なんですよ。
今回のメンテでは、その辺も改善されるような期待もあったんですが・・・結果はいかに？
by 柊太郎 (2006-02-16 00:04) 

こんばんは～。
上のCSSをテーブルタグの中に入れる時は、
どういう形になるのでしょうか？
この場合、画像は５つあるわけですが、５つ全部に使うのでしょうか？

質問そのものが、伝わるかも解からないのですが・・・。
すみません・・・。
by (2006-02-19 22:33) 

すいません。説明が足りませんでした。
すべてのｉｍｇに、属性として追加しています。
実際に、Ｈａｒｂｏｘを使用する場合は、ｉｍｇではなくｓｃｒｉｐｔになるので、Ｈａｒｂｏｘには不要のはずです。
こんな説明で、分かりますか？
by 柊太郎 (2006-02-20 09:56) 

ん～。あまり・・・かなり、わかりません。
今、CSS勉強中ですので、もう少ししたら、また、伺います。
by (2006-02-20 16:05) 

こんにちは～。
管理画面のおすすめ記事にここが載りました。
CSS　,がんばります・・・。
by (2006-02-27 12:22)