記事欄画像の中央寄せはどのようにするのですか？ (2ページ目)

無料新規登録

会員の方はログイン

トピック

コミュニティ

お知らせ

テンプレート・プラグイン

記事欄画像の中央寄せはどのようにするのですか？ 2ページ目

旧フォーラムの記事です　http://blog.fc2.com/forum/viewtopic.php?f=3&t=10642
hayamazaimokuza　2006-06-01 03:25:40
件名　：記事欄画像の中央寄せはどのようにするのですか？

先輩方々、是非お教えください。
テンプレート　tw_3col_22（３カラム）　をお借りしてカスタム中です。

１．記事欄画像の中央寄せはどのようにするのですか？

２．画像のみを中央寄せ、画像の下から始まる文章を左寄せ
　　は可能ですか？

宜しくお願い申し上げます。

by FC2スタッフ 2006年06月01日 03:25

by FC2スタッフ
2006年06月01日 03:25

コメント一覧新しい順に表示▽ / 古い順に表示△

コメント一覧
新しい順 | 古い順

このコミュニティにご参加頂くと、コメントの書き込みができます

旧フォーラムの記事です
わや　2006-06-03 01:51:15
件名　：

麻生(ＡｄａｎＫａｄａｎ)さん
hayamazaimokuzaさんへ

私もMac環境については何も知らないので、なんとも言いようがないのですが
FirefoxあたりならWindowsでも使えるので、よくそちらを利用して
他の環境でどう見えるか、をチェックする手がかりにしています。

<a class="postlink" href="http://www.mozilla-japan.org/products/firefox/">http://www.mozilla-japan.org/products/firefox/</a>
よければ、入手はこちらからどうぞ。↑

Firefoxは、IEでは表示が重いページもサクッと表示してくれるので
普段使いにもオススメです。

通りすがりさんへ

確か、img を block 要素に変換して、表示上の不具合(ブラウザによって適用されないらしい…）を避ける
という理由みたいですね。（私もさほど詳しくはないのでうろ覚え）

by FC2スタッフ 2006年06月03日 01:51

by FC2スタッフ
2006年06月03日 01:51
旧フォーラムの記事です
Anonymous　2006-06-03 01:49:45
件名　：なかなか面白い話に・・・

<div style="text-align:center;"><img src="画像URL" alt="画像名等"></div>

これを、このまま使うと誤りなので、「display: block;」を指定しておくというのは、考えも及びませんでした。

私はアバウトに、記事中でしたらこんな感じですね・・・・

<p align="center"><img src="画像URL" alt="画像名等"></p>

スタイルシートに別途記入する事も無く、ＨＴＭＬ中にスタイルを記述する事もありません。
が、Ｗ3Ｃ的にはダメらしいですが、strictで書かれたテンプレートはあまり無いようなので、いいかなーと。

<br clear="all" />は、imgにfloatを設定しているテンプレートは意外に多いので、必要なんだろうと思いますが、どうなんだろう？

by FC2スタッフ 2006年06月03日 01:49

by FC2スタッフ
2006年06月03日 01:49
旧フォーラムの記事です
麻生(ＡｄａｎＫａｄａｎ)　2006-06-03 01:22:49
件名　：あぅ。。。。

すみません、ブラウザの差は、調べきっていません。

私が<center>を頻用するのは、私がドジだからですが、他の方にまで推奨するのはかなり失礼にあたりますね。どうか、怒らないでください。

<div style="text-align:center;"><img src="画像URL" alt="画像名等"></div>
のほうがW3C的には「行儀がいい」と思います。が、</div> タグにミスがあると、テンプレ全体の表示が大きく乱れる「可能性」があります。

<center><img src="[URL]"…></center> だと、ミスがあっても、最悪、画像のセンタリングが起こらないか、さもなければ、文字まで中央寄せになってしまうだけで済みます。。。。。

本と失礼m(_ _)m

by FC2スタッフ 2006年06月03日 01:22

by FC2スタッフ
2006年06月03日 01:22
旧フォーラムの記事です
わや　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さんもお分かりのように、ブラウザによってはセンタリングされないものがある
という以外に、さほど違いは無いような…
センタリングできなかった場合、執筆者の意図しないレイアウト（デフォルトは左寄せ）になるだけです。

by FC2スタッフ 2006年06月03日 01:18

by FC2スタッフ
2006年06月03日 01:18
旧フォーラムの記事です
hayamazaimokuza　2006-06-02 23:00:00
件名　：

たくさんのご指導ありがとうございます！
大変勉強になりました。

やはり、記事編集毎に

<a href 〜> </a> と <br clear="all" />
を削除しなければダメみたいですね。

それでは、
sugarさんからお教えいただいた
<div style="text-align:center;"><img src="画像URL" alt="画像名等"></div>
本文

と、
麻生さんからお教えいただいた
<center><img src="[URL]"…></center>

この２つにはどのような違いがあるのでしょうか？
ブラウザーのバージョンによってはダメだと推察いたしましたが・・・

私は上記２パターンで画像を貼りましたが違いがわかりません。

みなさまはどちらをお使いですか？
また、他にも良い方法があるのでしょうか？

by FC2スタッフ 2006年06月02日 23:00

by FC2スタッフ
2006年06月02日 23:00
旧フォーラムの記事です
Anonymous　2006-06-02 13:03:39
件名　：余計なタグ

個人的には <a href 〜> </a> と <br clear="all" /> は必要ないタグなので、画像を記事に使う時毎回抹殺しなきゃいけないので、面倒だなぁと思っていたり…
デフォルト設定、何とかならんもんでしょうか。要望掲示版に出すべきなのでしょうね、このグチ…

画像を原寸表示する（サムネイルを使用しない）場合、Aタグは原則必要なさそうですよね。
<be clear="all">は必要でしょうか？自分も毎回消しているので、よくわかりません。
余計なタグを消す方向なので、修正も楽そうです。スクリプトの修正を要望してみては。

by FC2スタッフ 2006年06月02日 13:03

by FC2スタッフ
2006年06月02日 13:03
旧フォーラムの記事です
わや　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" /> 部分があると
なぜか、画像の下にどびら〜っと余白が………

難点は、センタリングされた画像の余白もリンクのエリアになってしまいます。

もしかして、未登録ユーザーさんがおっしゃってたのは、これのことだったのでしょうか…

この余白、記事のソースを表示させて <a href 〜> </a> と <br clear="all" /> を編集で取り除くしかないみたいですね。
<a href 〜> </a> と <br clear="all" /> 無しだと、「画像だけがセンタリング」「妙な余白は無し」「文章は左寄せ」になります。

するってぇと、やっぱ毎回記事編集でセンタリングするのと手間が大して変わらないなぁ…とか思ったり… <img src="{SMILIES_PATH}/icon_sad.gif" alt=":(" title="Sad" />
個人的には <a href 〜> </a> と <br clear="all" /> は必要ないタグなので、画像を記事に使う時毎回抹殺しなきゃいけないので、面倒だなぁと思っていたり…
デフォルト設定、何とかならんもんでしょうか。要望掲示版に出すべきなのでしょうね、このグチ…

これ、できないと妙に悔しいですねぇ。すぐにできそうに見えたのに…

by FC2スタッフ 2006年06月02日 03:33

by FC2スタッフ
2006年06月02日 03:33
旧フォーラムの記事です
Anonymous　2006-06-01 22:33:27
件名　：

管理画面で自動に挿入されるHTMLを利用するなら

<a href="URI" target="_blank" class="center">
<img src="XXX.jpg" alt="XXX.jpg" border="0"></a>
<br clear="all">

のようにHTMLの方でクラスを設定して（赤字の部分を書き足す）

a.center {
display:block;
text-align:center;
}

上記をCSSに追加、でいけます。

難点は、センタリングされた画像の余白もリンクのエリアになってしまいます。

by FC2スタッフ 2006年06月01日 22:33

by FC2スタッフ
2006年06月01日 22:33
旧フォーラムの記事です
Anonymous　2006-06-01 19:44:02
件名　：

それからですね、、、ブラウザーが『WINDOWS-IE6.0』の場合、
<div style="margin-left:auto;margin-right:auto;width:[サイズ];"><img src="[URL]"></div>
で中央よせにならんようです^^;

この件ですが、正確にいうと、ちと違います。
ブラウザーが『WINDOWS-IE6.0』かつ 互換モードの場合
「中央よせにならん」のです。
『WINDOWS-IE6.0』でも標準モードではセンタリングされます。

でも、XHTMLの場合、xml宣言を入れると否応なしに互換モードにされちまうんですよね。
…ったく、IEってやつは… <img src="{SMILIES_PATH}/icon_evil.gif" alt=":evil:" title="Evil or Very Mad" />

by FC2スタッフ 2006年06月01日 19:44

by FC2スタッフ
2006年06月01日 19:44
旧フォーラムの記事です
麻生(ＡｄａｎＫａｄａｎ)　2006-06-01 12:35:20
件名　：

<img src="[URL]" align="center">
が効かないンだって今知りました。orz

<center><img src="[URL]"…></center>
はイケそうなんですけど。とりあえずコレで妥協できないっすか？ <img src="{SMILIES_PATH}/icon_redface.gif" alt=":oops:" title="Embarassed" />

<img src="{SMILIES_PATH}/icon_redface.gif" alt=":oops:" title="Embarassed" /> ：<iframe>だの<…target="_blank">だの使いまくるAdanKadanメが何をいうか！ですが。<center>タグはW3C非推奨ナノデス↓
<a class="postlink" href="http://www.asahi-net.or.jp/~AX2S-KMTN/ref/deprecated/deprecated1.html#center">http://www.asahi-net.or.jp/~AX2S-KMTN/r ... tml#center</a>
もっと実用的な問題として、上下１行ずつ隙間できるかも。

それからですね、、、ブラウザーが『WINDOWS-IE6.0』の場合、
<div style="margin-left:auto;margin-right:auto;width:[サイズ];"><img src="[URL]"></div>
で中央よせにならんようです^^;

（いちおう試してみたンすよ？
http://adankadan.blog47.fc2.com/blog-entry-3.html ）

by FC2スタッフ 2006年06月01日 12:35

by FC2スタッフ
2006年06月01日 12:35

23件中、11～20件表示

FC2ブログについて

マガブロ

サポート

アプリでもブログ投稿

@fc2infoさんをフォロー