画像をポラ風にする代用案
2005年11月07日 (Mon) 10:42
まず始めに、【DEAR DAYS別冊】さんの写真をポラロイド風にするというエントリー、それと【blog*citron】さんのIEでポラ風が上手くいかない理由というエントリーをご覧下さい。
当方で配布している一部のテンプレート上でこれが表示出来ない、というお問い合わせを頂いたので実行してみたところ、確かに、XML宣言を削除して.pict指定を変更してもワクが表示されず背景色のみになってしまい、ポラ風には出来ませんでした； そこで、理由は分からないまでもなんとか出来ないかと思って、テーブルを使用した代用案を考えてみました。
（念のため…これはimg.pictの指定だけでは表示出来ないタイプのテンプレートのための代用案で、DEAR DAYS別冊さんがご指導下さっているCSSの補足としてのエントリーではありません）
当方で配布している一部のテンプレート上でこれが表示出来ない、というお問い合わせを頂いたので実行してみたところ、確かに、XML宣言を削除して.pict指定を変更してもワクが表示されず背景色のみになってしまい、ポラ風には出来ませんでした； そこで、理由は分からないまでもなんとか出来ないかと思って、テーブルを使用した代用案を考えてみました。
（念のため…これはimg.pictの指定だけでは表示出来ないタイプのテンプレートのための代用案で、DEAR DAYS別冊さんがご指導下さっているCSSの補足としてのエントリーではありません）
■まずCSSに以下のテーブル指定を追加して、img.pictも修正します。
■そして、テンプレート1行目のXML宣言の削除は必須です。
■日記本文の画像部分にテーブルタグを設定、画像はこの中に入れます。
テーブル設定の内容、余白サイズなどは適当に修正して下さい（要セルフサービス） もしこの方法で宜しければ、以下のテーブルタグをメモしておかれるとよいかと思います。
■ちなみに、当方で配布しているテンプレートの場合（左：出来ない画像 右：出来た例）
ガーベラ・ベンジャミン .pict指定だけ：出来ない tableで指定：出来た
Notepad .pict指定だけ：余白は無効だけどワクは表示された tableで指定：出来た
Old Type .pict指定だけ：出来ない tableで指定：出来た
ただし「Notepad Ver1.00」は、div.entry_headの高さ指定「height:60px;」を40pxに修正して下さい。
追記≫ 下記コメントで、まぉさんとちょちさんがご指摘下さっている内容も参考になさって下さいませ。当方で配布しているすべてのテンプレでの確認は出来ておりませんが；、テーブルを使用しなくてもポラ風表示が可能かもしれません。
table.polaroid {テーブルに指定した余白（padding）が何故だか無効となってしまうので（やはりXML宣言のせい？）、その代わりにimg.pict（画像）の方に直接余白を指定しています。
background-color:#f6f6f6;
border-width:2px;
margin:0px 10px 5px 0px;
padding:0px;
border-style:solid;
border-color:#dce3e3 #c1c1c1 #c1c1c1 #dce3e3;}
↑ここに float:left; を追加すれば、回り込みも可能です。
img.pict {padding:5px 5px 30px 5px;}
■そして、テンプレート1行目のXML宣言の削除は必須です。
<?xml version="1.0" encoding="{site_encoding}"?>
■日記本文の画像部分にテーブルタグを設定、画像はこの中に入れます。
<table class="polaroid"><tr><td><img src="http://〜画像のURL〜/ファイル名.jpg" class="pict" alt="ファイル名.jpg" title="ファイル名.jpg" width="数字" height="数字" /></td></tr></table>画像指定のclass="pict"はそのままで、テーブルにclass="polaroid"が加わります。
テーブル設定の内容、余白サイズなどは適当に修正して下さい（要セルフサービス） もしこの方法で宜しければ、以下のテーブルタグをメモしておかれるとよいかと思います。
<table class="polaroid"><tr><td>imgタグ</td></tr></table>
■ちなみに、当方で配布しているテンプレートの場合（左：出来ない画像 右：出来た例）
ガーベラ・ベンジャミン .pict指定だけ：出来ない tableで指定：出来た
Notepad .pict指定だけ：余白は無効だけどワクは表示された tableで指定：出来た
Old Type .pict指定だけ：出来ない tableで指定：出来た
ただし「Notepad Ver1.00」は、div.entry_headの高さ指定「height:60px;」を40pxに修正して下さい。
追記≫ 下記コメントで、まぉさんとちょちさんがご指摘下さっている内容も参考になさって下さいませ。当方で配布しているすべてのテンプレでの確認は出来ておりませんが；、テーブルを使用しなくてもポラ風表示が可能かもしれません。
Comments
>> コメントのスクロールを表示・非表示に切り替えます
１．テンプレートのＨＴＭＬの１行目を削除しないと、両方ともポラ風枠ができない。
２．テンプレートのＨＴＭＬの１行目を削除すると、両方ともポラ風枠ができるが、スクロールがデフォルトになり、色指定等がきかなくなる。
３．対策として、Dear Days別冊さんの「スクロールの色を変えること」を参照して、body{スクロールの色指定}のbodyをhtmlに変えて、html{スクロールの色指定}にするとできる。ガーベラはbody{スクロール色指定}が独立してあるので、すぐできる。ベンジャミンはスクロール色指定が独立していないので、body{ }とhtml{スクロール色指定}に分ける必要がある。
４．notepadは、ポラ風枠にすると、ノートの下の部分が切れて、きれいなノートのページとして表示されなくなる。
５．便利な使い方として、
image. thumb {デフォルト（ポラ風枠なし指定）}
image. thumb2 {ポラ風枠あり（まわりの部分のみ）}
image. thumb3 {ポラ風枠あり（右下にサイン画像あり）}
などと設定しておき（文章の回り込みありなしでさらに追加してもよい）、必要に応じて使い分ける。切り替えは、写真挿入のときに表示されるもののclass="thumb"のところを"thumb2"などと変更する（ThumbPopなので、thumb。pictでもphotoでも使い方は同じ）。
たいへん長くなりました。参考になりますかどうかわかりませんが、報告です。
4．ノートの下（背景色）が切れるという件は、複数パターンで表示をチェックしてみたらどういう事か分かりました。これはテンプレートのデザインの構造に関係していて、画像のポラ風表示に限らず、画像に回り込みをさせた場合→画像の高さよりテキストの行数が少ない。または、回り込みさせる、させないに関わらず→画像のあとに一文字でもテキストがないと、白い背景が切れてしまうのです；
そして、背景をちゃんと表示させるには、改行<br />を文末に書かないといけません。
（私はテキストをわりとみっちり書く人なので、この表示には気付きませんでした；）
おかげさまで、先ほど背景が表示されるように「Notepad」のCSSを修正して、バージョンアップ完了しました。ご指摘をどうもありがとうございました！
5．1点、うっかりミスの訂正を。この場合はimage.thumb〜ではなく、img.thumb〜としなければいけません（細かいツッコミで失礼をば；）
テーブル指定で手作業 が イマイチだったんですが･･･。
出来ました！
CSSを
div.entry img.pict {
border:solid;}
div.entry img.gif {
border:none;}
に 書き直したら
gif画像に枠もつかず ポラ風になりました。
(正しいか間違ってるか は わかりませんが･･･)
配布のデフォでは
エントリの画像全てが boder:none だったので。
お借りしているテンプレートは
｢Vegetable Color｣です。
ただ、IE以外の見栄えは 保証できませんが･･･(汗。
img.pictの方にボーダー指定するとやはりポラ風になるのですか…。
ちょっと確認の時間が割けないので実際にやってみてはおりませんが、ご報告を下さり感謝です。モブログ投稿する場合、確かにテーブルタグで組むのは厄介ですよね；
今回、上記のまぉさんのコメントを参考に、ポラロイド風にカスタマイズしてみましたところ、うまくいってしまったので、ご報告にきました。
/* エントリーの画像ファイル */の部分を以下に変更
div.entry img.gif {
border:none;}
div.entry img.pict {
background-color:#f6f6f6;
border-width:2px;
border:solid;
margin:5px 5px 5px 5px;
padding:4px 4px 35px 4px;
border-color: #DCE3E3 #C1C1C1 #C1C1C1 #DCE3E3;
float:left;
clear:left;
}
div.entry img.thumb {
background-color:#f6f6f6;
border-width:2px;
border:solid;
margin:5px 5px 5px 5px;
padding:4px 4px 35px 4px;
border-color: #DCE3E3 #C1C1C1 #C1C1C1 #DCE3E3;
float:left;
clear:left;
}
/* class名がpictとthumbの画像に、テキストの回り込みをさせる */
の部分は上記と同じような記述でしたので、消去しました。
といいつつも、なんせ素人なので、大丈夫なのかはわかりません。
よろしければ、みかん。さんの方でも一度目を通していただけませんでしょうか？
トラックバックしていきますので、どうぞよろしくお願いいたします☆
ご利用下さっているテンプレは「Raindrop」か「Leaf of Pumila」ですよね。
拝見させて頂いたところ、Windows XPのIE6.0、Netscape7.1、Opera8.50すべてでポラ風に表示されておりました。
実際に、私もテンプレ「Notepad」で同じくテストをしてみました。ちょちさんのCSS内容の img.pict と img.thumb 部分は、DEAR DAYS別冊さんのものと同じですので、まぉさんがご指摘下さった div.entry img.gif {border:none;} を加える点が表示のキーポイントのようですね。あの…私自身も、正確に理解出来ていないのですけれど；
ほんとに今さらではありますが、まぉさんありがとうございましたm(__)m；
ただし、すべてのテンプレでテストをする時間的余裕はなかったので、ポラ風表示をしたい方はどうかご自身でお確かめ下さいますよう…（と、こんなところで言ってみる；）
どうやら大丈夫そうなので、このまま使用していこうと思います。
みかん。さん、まぉさん、ありがとうございました♪
別の話ですが、みかん。さんのテンプレ用（特に限定はないのですが）に作成した素材（自作）を配布しようかと思うのですが、みかん。さん的に問題はありませんか？
もし不都合ありましたら、ご連絡いただけると、・・・辞めます｡･ﾟ･(ﾉД｀)･ﾟ･｡ｗ
よろしくお願いします！
当方の特定のテンプレ専用…という事ではなくって、単なるブログ用パーツとしての画像配布でしたら、私の方からなにか申し上げるなんてとんでもありません；
ですが、この場ではちょっと詳細が分かりませんし、もし画像のサンプルなど見せて頂く事も可能でしたら、続きはメールでお願い出来ますでしょうか？ どうか宜しくお願いします。
詳細はメールにてお送りしましたので、ごらんいただけると幸いです。
よろしくお願いいたします☆
お手数おかけいたしました。返信させて頂いたので、どうぞお目通し下さいませ。
Comment Form