記事欄画像の中央寄せはどのようにするのですか？
旧フォーラムの記事です http://blog.fc2.com/forum/viewtopic.php?f=3& t=10642
hayamazaimokuza 2006-06-01 03:25:40
件名 ：記事欄画像の中央寄せはどのようにするのですか？
先輩方々、是非お教えください。
テンプレート tw_3col_22（３カラム） をお借りしてカスタム中です。
１．記事欄画像の中央寄せはどのようにするのですか？
２．画像のみを中央寄せ、画像の下から始まる文章を左寄せ
は可能ですか？
宜しくお願い申し上げます。
2006年06月01日 03:25 by FC2スタッフ
旧フォーラムの記事です
わや 2006-06-03 01:51:15
件名 ：
麻生(ＡｄａｎＫａｄａｎ)さん
hayamazaimokuzaさんへ
私もMac環境については何も知らないので、なんとも言いようがないのですが
FirefoxあたりならWindowsでも使えるので、よくそちらを利用して
他の環境でどう見えるか、をチェックする手がかりにしています。
<a class="postlink" href="http://www.moz illa-japan.org/products/firefox/">http://www.mozilla -japan.org/products/firefox/</a>
よければ、入手はこちらからどうぞ。↑
Firefoxは、IEでは表示が重いページもサクッと表示してくれるので
普段使いにもオススメです。
通りすがりさんへ
確か、img を block 要素に変換して、表示上の不具合(ブラウザによって適用されないらしい…）を避ける
という理由みたいですね。（私もさほど詳しくはないのでうろ覚え）
2006年06月03日 01:51 by FC2スタッフ
旧フォーラムの記事です
Anonymous 2006-06-03 01:49:45
件名 ：なかなか面白い話に・・・
<div style="text-align:center;"><im g src="画像URL" alt="画像名等"></div>
2006年06月03日 01:49 by FC2スタッフ
旧フォーラムの記事です
麻生(ＡｄａｎＫａｄａｎ) 2006-06-03 01:22:49
件名 ：あぅ。。。。
すみません、ブラウザの差は、調べきっていません。
私が<center>を頻用するのは、私がドジだからですが、他の方にまで推奨するのはかなり失礼にあたります ね。どうか、怒らないでください。
<div style="text-align:center;"><img sr c="画像URL" alt="画像名等"></div>
のほうがW3C的には「行儀がいい」と思います。が、</div> タグにミスがあると、テンプレ全体の表示が 大きく乱れる「可能性」があります。
<center><img src="[URL]"…></cente r> だと、ミスがあっても、最悪、画像のセンタリングが起こらないか、さもなければ、文字まで中央寄せになってしまうだ けで済みます。。。。。
本と失礼m(_ _)m
2006年06月03日 01:22 by FC2スタッフ
旧フォーラムの記事です
わや 2006-06-03 01:18:25
件名 ：
えーと、
<a href 〜> </a> と <br clear="all" />
…を削除…というくだりは、あくまでCSSに以下の設定 ↓ を追加した場合ですので
他の方法でセンタリングする場合、必ずしも削除する必要は無いかもしれません。
.entry-body img { display: block;
margin: 0;
text-align: center; }
html>body .entry-body img { display: block;
margin: 0 auto; }
/* Opera、Firefoxなど比較的新しいブラウザでの画像表示位置*/
また、
<div style="text-align:center;"><img src ="画像URL" alt="画像名等"></div>
と
<center><img src="[URL]" …></center>
は、hayamazaimokuzaさんもお分かりのように、ブラウザによってはセンタリングされないものがある
という以外に、さほど違いは無いような…
センタリングできなかった場合、執筆者の意図しないレイアウト（デフォルトは左寄せ）になるだけです。
2006年06月03日 01:18 by FC2スタッフ
旧フォーラムの記事です
hayamazaimokuza 2006-06-02 23:00:00
件名 ：
たくさんのご指導ありがとうございます！
大変勉強になりました。
やはり、記事編集毎に
<a href 〜> </a> と <br clear="all" />
を削除しなければダメみたいですね。
それでは、
sugarさんからお教えいただいた
<div style="text-align:center;"><img sr c="画像URL" alt="画像名等"></div>
本文
と、
麻生さんからお教えいただいた
<center><img src="[URL]"…></cente r>
この２つにはどのような違いがあるのでしょうか？
ブラウザーのバージョンによってはダメだと推察いたしましたが・・・
私は上記２パターンで画像を貼りましたが違いがわかりません。
みなさまはどちらをお使いですか？
また、他にも良い方法があるのでしょうか？
2006年06月02日 23:00 by FC2スタッフ
旧フォーラムの記事です
Anonymous 2006-06-02 13:03:39
件名 ：余計なタグ
個人的には <a href 〜> </a> と <br clear=" ;all" /> は必要ないタグなので、画像を記事に使う時毎回抹殺しなきゃいけないので、面倒だなぁと思っ ていたり…
デフォルト設定、何とかならんもんでしょうか。要望掲示版に出すべきなのでしょうね、このグチ…
2006年06月02日 13:03 by FC2スタッフ
旧フォーラムの記事です
わや 2006-06-02 03:33:16
件名 ：
上記の、未登録ユーザーさんの方法とほとんど同じなのですが…
(いや、むしろsugarさんの方法との折衷案でしょうか）
私の場合、以下をCSSに追加するだけで『IE6.0の互換モード』『Firefox』で、本文中の画像をセンタリングでき ました。
（.entry-body部分を、各自使用中のテンプレ内での記事本文部 分を指しているクラス名に変更するだけでOKかと…）
.entry-body img { display: block;
margin: 0;
text-align: center; }
html>body .entry-body img { display: block;
margin: 0 auto; }
/* Opera、Firefoxなど比較的新しいブラウザでの画像表示位置*/
…が！…画像を使用する時に自動挿入されるタグで…
クリックで拡大のための <a href="http://"〜"> < /a> と、改行タグ <br clear="all" /> 部分があると
なぜか、画像の下にどびら〜っと余白が………
難点は、センタリングされた画像の余白もリンクのエリアになってしまいます。
2006年06月02日 03:33 by FC2スタッフ
旧フォーラムの記事です
Anonymous 2006-06-01 22:33:27
件名 ：
管理画面で自動に挿入されるHTMLを利用するなら
<a href="URI" target="_blank&q uot; class="center"> ;
<img src="XXX.jpg" alt="XXX.jpg" bor der="0"></a>
<br clear="all">
のようにHTMLの方でクラスを設定して（赤字の部分を書き足す）
a.center {
display:block;
text-align:center;
}
上記をCSSに追加、でいけます。
難点は、センタリングされた画像の余白もリンクのエリアになってしまいます。
2006年06月01日 22:33 by FC2スタッフ
旧フォーラムの記事です
Anonymous 2006-06-01 19:44:02
件名 ：
それからですね、、、ブラウザーが『WINDOWS-IE6.0』の場合、
<div style="margin-left:auto;margin-right:auto;widt h:[サイズ];"><img src="[URL]"></div& gt;
で中央よせにならんようです^^;
2006年06月01日 19:44 by FC2スタッフ
旧フォーラムの記事です
麻生(ＡｄａｎＫａｄａｎ) 2006-06-01 12:35:20
件名 ：
<img src="[URL]" align="center">
が効かないンだって今知りました。orz
<center><img src="[URL]"…></cente r>
はイケそうなんですけど。とりあえずコレで妥協できないっすか？ <img src="{SMILIES_ PATH}/icon_redface.gif" alt=":oops:" title=&q uot;Embarassed" />
<img src="{SMILIES_PATH}/icon_redface.gif" a lt=":oops:" title="Embarassed" /> ：&l t;iframe>だの<…target="_blank">だの使いまくるAdanK adanメが何をいうか！ですが。<center>タグはW3C非推奨ナノデス↓
<a class="postlink" href="http://www.asa hi-net.or.jp/~AX2S-KMTN/ref/deprecated/deprecated1.html#cent er">http://www.asahi-net.or.jp/~AX2S-KMTN/r ... tml# center</a>
もっと実用的な問題として、上下１行ずつ隙間できるかも。
それからですね、、、ブラウザーが『WINDOWS-IE6.0』の場合、
<div style="margin-left:auto;margin-right:auto;wid th:[サイズ];"><img src="[URL]"></div >
で中央よせにならんようです^^;
（いちおう試してみたンすよ？
htt p://adankadan.blog47.fc2.com/blog-entry-3.html ）
2006年06月01日 12:35 by FC2スタッフ
Copyright(c)1999 FC2, Inc. All Rights Reserved.
@fc2infoさんをフォロー
