ppBlog フォーラム
No.4626 画像の貼り付け位置がずれる
そーむ担当@Nov 27, 2009 18:51
はじめまして。
実は、社内ブログをppblogで作ってみたんですが、記事を書く際に、画像を貼り付けても意図したように記事ボックスに表示されなくて困ってます。
画像を貼り付ける際に、フロート属性を指定して、画像に対する説明もつけています。
その状態で、ローカルプレビューを参照すると、画像の真横に下に書いたはずの文章が位置したりしてしまいます。
色々試しているのですが、解決できないので、ここに書き込みさせて頂きました。
宜しくお願いします。
サーバはCentos5です。
編集や閲覧に使っているブラウザは、IEとFireFox両方です。
ppblogのVerは最新です。
実は、社内ブログをppblogで作ってみたんですが、記事を書く際に、画像を貼り付けても意図したように記事ボックスに表示されなくて困ってます。
画像を貼り付ける際に、フロート属性を指定して、画像に対する説明もつけています。
その状態で、ローカルプレビューを参照すると、画像の真横に下に書いたはずの文章が位置したりしてしまいます。
色々試しているのですが、解決できないので、ここに書き込みさせて頂きました。
宜しくお願いします。
サーバはCentos5です。
編集や閲覧に使っているブラウザは、IEとFireFox両方です。
ppblogのVerは最新です。
4626-1 Re: martin @ Nov 28, 2009 16:28 
こんにちは。具体的に、どんな記述になっているか、テキストエリア内の再現性のある文章を例示していただけると助かります。
画像を含む場合は、テキストエリア内では、以下のような感じです。
画像を含む場合は、テキストエリア内では、以下のような感じです。
昔あるところに、おじいさんとおばあさんが住んでいました。 <img src="PIX/1255363342_Desert.jpg" alt="826.1:1024:768:480:360:Desert:right:1:1::1:"/> おじいさんは、砂漠へ･･･
4626-2 Re: そーむ担当 @ Dec 02, 2009 13:23
こんにちは。
返事が遅くなって申し訳ありません。
あれから、こちらでも色々人に聞いてみたり、調べたりした結果、ブラウザによる違いのように推測しています。
社内では、色んなブラウザが混在しておりまして、IE6を使っているユーザも多く、IEでの表示に問題があるようです。
Firefoxでは、比較的思ったところに位置します。
実際のテキストを記入させていただきます。
アドバイス頂けると助かります。
IEだと記事ボックス内に左右に配置したい最初と2番目の写真が、横並びではなく、上下にずれてしまいます。
また、最後の写真も、位置をleftやrightに変更すると、「ピエールマルコリーニ」のリンク文字が、最初の写真と2番目の写真の間に位置してしまいます。
以上です。
情報の提供の仕方に不備がありましたら、追記させていただきます。
宜しくお願い致します。
返事が遅くなって申し訳ありません。
あれから、こちらでも色々人に聞いてみたり、調べたりした結果、ブラウザによる違いのように推測しています。
社内では、色んなブラウザが混在しておりまして、IE6を使っているユーザも多く、IEでの表示に問題があるようです。
Firefoxでは、比較的思ったところに位置します。
実際のテキストを記入させていただきます。
アドバイス頂けると助かります。
少々値は張りますが食べる価値は大有りです！
<img src="PIX/1259299447_choco.jpg" alt="6.9:199:350:0:0:choco:left:1:1:本来食べるはずだったチョコレートパフェ:0:"/>
<img src="PIX/1259299447_.jpg" alt="40.9:200:318:0:0::right:1:1:実際食べたマロンパフェ:0:"/>
<img src="PIX/1259299447_aha.gif" alt="50:287:350:0:0:aha:center:1:1:ちなみにこんな盛況振り
ピエールマルコリーニ銀座店
〒104-0061, 東京都中央区銀座５丁目５?８
03-5537-0015?:0:" class="photo-effect" />
<a href="http://www.pierremarcolini.jp/TOPFrameset.htm">ピエールマルコリーニ銀座店</a> [w]ピエールマルコリーニ[/w]
IEだと記事ボックス内に左右に配置したい最初と2番目の写真が、横並びではなく、上下にずれてしまいます。
また、最後の写真も、位置をleftやrightに変更すると、「ピエールマルコリーニ」のリンク文字が、最初の写真と2番目の写真の間に位置してしまいます。
以上です。
情報の提供の仕方に不備がありましたら、追記させていただきます。
宜しくお願い致します。
4626-3 Re: martin @ Dec 03, 2009 01:02
こんにちは。IE6ですか。。
こちらで、同じ大きさの画像を用意してみました。こちらでは、IE6(ただしIETester)でもFirefoxと同じような配置になりました。スクリーンショットのリンクを貼っておきます。
IE6でのショット→http://p2b.jp/demo/IE6.jpg
Firefox3.5でのショット→http://p2b.jp/demo/FF3.5.jpg
IEで上下にずれるというのは、IE6のブラウザ画面が狭い可能性があります。フロート指定すると、そうなるのはある意味、自然な振る舞いかなと思います。ブラウザ画面は、読み手によってサイズがまちまちなので、フロート属性を駆使して画像の位置を意図したように見せるというのは、実は難しいことです。確実なのは、画像はいつもセンタリングというふうにすれば、ブラウザ画面の広さによる差異やブラウザ間の差異が少なくなると思います。
あと、フロート指定をする際のポイントですが、それ以降に新たに画像を貼り付けたいとき(あるいは、長い文章を書いていきたいとき)は、一度、フロートを解除する要素を挿入すると良いです。ppBlogでは、エディタのボタンで「フロート解除」というのがあります(右から3番目)。フロート指定した画像の後の部分で、これをクリックすると、<hr class="clear" /> というHR要素が挿入され、これでフロート解除、次に画像を貼り付ける際に、上で指定したフロートの影響を受けません。
これも、フロート属性による、自然な振る舞いです。これもフロート解除ボタンなどで改善できると思います。
あまり有効なアドバイスにならないかもしれませんが、フロート指定した要素は、ブラウザ画面の広さによって、どうにでも位置が変わりうるというのがポイントかと思います。
こちらで、同じ大きさの画像を用意してみました。こちらでは、IE6(ただしIETester)でもFirefoxと同じような配置になりました。スクリーンショットのリンクを貼っておきます。
IE6でのショット→http://p2b.jp/demo/IE6.jpg
Firefox3.5でのショット→http://p2b.jp/demo/FF3.5.jpg
IEで上下にずれるというのは、IE6のブラウザ画面が狭い可能性があります。フロート指定すると、そうなるのはある意味、自然な振る舞いかなと思います。ブラウザ画面は、読み手によってサイズがまちまちなので、フロート属性を駆使して画像の位置を意図したように見せるというのは、実は難しいことです。確実なのは、画像はいつもセンタリングというふうにすれば、ブラウザ画面の広さによる差異やブラウザ間の差異が少なくなると思います。
あと、フロート指定をする際のポイントですが、それ以降に新たに画像を貼り付けたいとき(あるいは、長い文章を書いていきたいとき)は、一度、フロートを解除する要素を挿入すると良いです。ppBlogでは、エディタのボタンで「フロート解除」というのがあります(右から3番目)。フロート指定した画像の後の部分で、これをクリックすると、<hr class="clear" /> というHR要素が挿入され、これでフロート解除、次に画像を貼り付ける際に、上で指定したフロートの影響を受けません。
また、最後の写真も、位置をleftやrightに変更すると、「ピエールマルコリーニ」のリンク文字が、最初の写真と2番目の写真の間に位置してしまいます。
これも、フロート属性による、自然な振る舞いです。これもフロート解除ボタンなどで改善できると思います。
あまり有効なアドバイスにならないかもしれませんが、フロート指定した要素は、ブラウザ画面の広さによって、どうにでも位置が変わりうるというのがポイントかと思います。
4626-4 Re: そーむ担当 @ Dec 03, 2009 13:43
こんにちは
色々勉強になりまいた。
やはりブラウザとフロート位置の問題なんですね。
フロート指定は、ブラウザの影響を受けやすいんですね。
フロート解除のボタンは、参考になりました。
正直、どういう意図のボタンなのかよく理解していなかったので、今回のアドバイスで「なるほど！」と言う感じです。
根本解決は、出来ないのかも知れませんが、フロート解除の手段がわかり、本当に助かりました。
ありがとうございました<(_ _)>
また、宜しくお願いします。
色々勉強になりまいた。
やはりブラウザとフロート位置の問題なんですね。
フロート指定は、ブラウザの影響を受けやすいんですね。
フロート解除のボタンは、参考になりました。
正直、どういう意図のボタンなのかよく理解していなかったので、今回のアドバイスで「なるほど！」と言う感じです。
根本解決は、出来ないのかも知れませんが、フロート解除の手段がわかり、本当に助かりました。
ありがとうございました<(_ _)>
また、宜しくお願いします。