• ベストアンサー
  • すぐに回答を!

cssで投稿した画像を中央に表示たい!!!!!

  • 質問No.6520609
  • 閲覧数341
  • ありがとう数2
  • 回答数2

お礼率 66% (2/3)

blogで投稿した画像を中央に表示したい!!!!!
css詳しい人、教えてください!!!!!
今、エキサイトブログの設定を行っているんですが、cssなど全くの初心者なので、右も左もわかりません。
そこで、現在、http://tenjikunik.exblog.jp/ のようになっています。

太陽の投稿画像をブラウザの中央付近に表示したいのですが、次のhtmlまたはcssをどう変更すべきでしょうか?助けてください。

css


/* excite blog skin css */

body { margin : 0; padding: 0; background: #151414; color : #e7e7e7;}

body,td,div,li{ font-size : 13px; font-family : verdana,arial,sans-serif; line-height : 150%;

letter-spacing:1px; word-wrap: break-word;}

a:link{ color: #cfcbc4; text-decoration: underline; }
a:visited{ color: #cfcbc4; text-decoration: underline; }
a:active{ color: #cfcbc4; text-decoration: underline; }
a:hover{ color: #cf9712; text-decoration: none;}



#im{ width:100%; clear: none;}

td.im_hit{
background: url(http://image.excite.co.jp/jp/portal/im/imach_icon_orange.gif) no-repeat 0.5em 0.5em;
padding: 0.5em 0.5em 0.5em 25px; cursor:pointer;cursor:hand;
line-height: 100%; width: 550px;text-align:left;color:#cfcbc4;}


div.im_title{font-size:x-small;color:#666;text-align:right;margin-bottom:10px;}
div.im_title a{color:#666;}
td.im_hit:hover{background-color:#fffee1; color:#333333;}

table.im_summary{margin-top:3px;}
td.im_summary {font-size:small;font-family:"Arial";line-height:160%;}
span.im_url{font-size:small;font-family:"Arial"; text-decoration: underline;}
span.im_titletext{text-decoration: underline;}

#cmtviewfrm{ display:none !important;}

#main { width:1899px; margin:0 auto; text-align:left; padding-bottom: 20px;overflow: hidden;}

#Headarea{ height: 401px; width:1899px; margin: 0 auto; position: relative; }

#titlearea{ width: 8020px; position: absolute; bottom: 0; left: 0; background: #a0a0a0;filter: alpha

(opacity=80); -moz-opacity:0.8; opacity:0.8; padding: 10px;}
div.HEADER{ font-size: 16px; font-weight: bold; line-height : 100%;}

#titlearea a{ color: #fff; text-decoration:none; }
#postArea{ margin-top:20px; width: 565px; float: left;}

字数が足りません。いって頂いたら開示いたします。

質問者が選んだベストアンサー

  • 回答No.1
  • ベストアンサー

ベストアンサー率 74% (56/75)

最初に。
ブラウザで ソースを見てみると
<img class="IMAGE_RIGHT" src="略" border="0" width="480" height="320" align="right" OnClick="imgview('略',2496,1664,'1');" OnMouseOver="this.style.cursor='hand'"/>
となってますが align="right" がしっかり 記述されてますね・・。 右よせになってます

cssで 画像だけ いじるとしたら class="IMAGE_RIGHT" なので
.IMAGE_RIGHT{~} です。

が、しかしその 外枠である div class=postArea あたりで 
float:left? で 565?px の width が指定してあるので ブラウザの真ん中には行かないです。

#Headarea img{width:900px;}
#postArea{ margin-top:20px;margin-left:auto;margin-right:auto; width: 565px;}
にしたら どうなります?
補足コメント
meanyacat

お礼率 66% (2/3)

回答ありがとうございます。

#Headarea img{width:900px;}
に書き換えると、

http://tenjikunik.exblog.jp/
の上の雲の画像の左上1/4だけ表示されました。

そして、『天竺日記』と書いてあるタイトル欄がブラウザの最下に表示されるようになりました。

#postArea{ margin-top:20px;margin-left:auto;margin-right:auto; width: 565px;}
に書き換えると、

太陽の画像が希望通り中央に表示されるようになりました。
しかし、ブラウザの右端に表示されていたプロフィール欄がブラウザの最も右下に配置されてしまいました。

プロフィールの位置は変えたくないのですが、なにかアドバイス頂ければうれしいです。

もし、投稿した画像(例えば太陽の画像)の表示される大きさを大きくするには、どの値を変更すべきでしょうか?

そして、noris02さんはどうやってcssを学んだのですか?私も詳しくなりたいのですが。。。
投稿日時:2011/02/14 02:35
お礼コメント
meanyacat

お礼率 66% (2/3)

ありがとうございました。
一応成功です。

私が無知なために、ご回答の意味をすべてくみ取ることは今はできませんが、理解できるようになります。

再度、ありがとうございました。
投稿日時:2011/02/14 02:39

その他の回答 (全1件)

  • 回答No.2

ベストアンサー率 57% (1008/1745)

記事枠のセンターではなく、ブラウザのセンターですね・・・
検証はしていませんが、
#postArea
.POST
.POST_HEAD
.POST_BODY
これらの幅が、widthで565px,580px程度しかないですね・・・
そもそも右サイドにでもサイドバーを置くつもりじゃないのかな?
それだと余計センター配置には出来ない・・・
上記の565px,580pxの枠の中に
width="480"の画像だけをセンンターにしても意味が無く、
ブラウザでのセンター配置にするには、
サイドバーを置かない配置にして、
580pxの枠群を大きくして、画像もセンターにする。

もしくは、
#postArea{ margin-top:20px; width: 565px; float: left;}の

#postArea{ width: 565px; margin: 20px auto 0;}に。

-------------
そもそも、
おそらく、2カラムだからHTMLが編集できるのなら、
構成を編集し直さないとダメです。
また、画像は、原画サイズをHTMLの表示設定で小さくせずに、縮小加工した方が良いです。
補足コメント
meanyacat

お礼率 66% (2/3)

ご回答ありがとうございます。

#postArea{ width: 565px; margin: 20px auto 0;}

に書き換えると、
太陽の画像が希望通り中央に表示されるようになりました。

しかし、ブラウザの右端に表示されていたプロフィール欄がブラウザの最も右下に配置されてしまいました。

プロフィールの位置は変更したくないのですが、何かアドバイス頂ければ幸いです。

もし、投稿した画像(例えば太陽の画像)の表示される大きさを大きくするには、どの値を変更すべきでしょうか?
投稿日時:2011/02/14 02:43
お礼コメント
meanyacat

お礼率 66% (2/3)

回答ありがとうございます。

とりあえず、希望通り、真ん中に配置できました。

ありがとうございます。
投稿日時:2011/02/14 02:46
関連するQ&A

その他の関連するQ&Aをキーワードで探す

ページ先頭へ