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_ico … 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ベストアンサー
- 回答日時:
最初に。
ブラウザで ソースを見てみると
<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;}
にしたら どうなります?
この回答への補足
回答ありがとうございます。
#Headarea img{width:900px;}
に書き換えると、
http://tenjikunik.exblog.jp/
の上の雲の画像の左上1/4だけ表示されました。
そして、『天竺日記』と書いてあるタイトル欄がブラウザの最下に表示されるようになりました。
#postArea{ margin-top:20px;margin-left:auto;margin-right:auto; width: 565px;}
に書き換えると、
太陽の画像が希望通り中央に表示されるようになりました。
しかし、ブラウザの右端に表示されていたプロフィール欄がブラウザの最も右下に配置されてしまいました。
プロフィールの位置は変えたくないのですが、なにかアドバイス頂ければうれしいです。
もし、投稿した画像(例えば太陽の画像)の表示される大きさを大きくするには、どの値を変更すべきでしょうか?
そして、noris02さんはどうやってcssを学んだのですか?私も詳しくなりたいのですが。。。
ありがとうございました。
一応成功です。
私が無知なために、ご回答の意味をすべてくみ取ることは今はできませんが、理解できるようになります。
再度、ありがとうございました。
No.2
- 回答日時:
記事枠のセンターではなく、ブラウザのセンターですね・・・
検証はしていませんが、
#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の表示設定で小さくせずに、縮小加工した方が良いです。
この回答への補足
ご回答ありがとうございます。
#postArea{ width: 565px; margin: 20px auto 0;}
に書き換えると、
太陽の画像が希望通り中央に表示されるようになりました。
しかし、ブラウザの右端に表示されていたプロフィール欄がブラウザの最も右下に配置されてしまいました。
プロフィールの位置は変更したくないのですが、何かアドバイス頂ければ幸いです。
もし、投稿した画像(例えば太陽の画像)の表示される大きさを大きくするには、どの値を変更すべきでしょうか?
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・14歳の自分に衝撃の事実を告げてください
- ・架空の映画のネタバレレビュー
- ・「お昼の放送」の思い出
- ・昨日見た夢を教えて下さい
- ・ちょっと先の未来クイズ第4問
- ・【大喜利】【投稿~10/21(月)】買ったばかりの自転車を分解してひと言
- ・メモのコツを教えてください!
- ・CDの保有枚数を教えてください
- ・ホテルを選ぶとき、これだけは譲れない条件TOP3は?
- ・家・車以外で、人生で一番奮発した買い物
- ・人生最悪の忘れ物
- ・【コナン30周年】嘘でしょ!?と思った○○周年を教えて【ハルヒ20周年】
- ・ハマっている「お菓子」を教えて!
- ・最近、いつ泣きましたか?
- ・夏が終わったと感じる瞬間って、どんな時?
- ・10秒目をつむったら…
- ・人生のプチ美学を教えてください!!
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・都道府県穴埋めゲーム
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
css初心者 フレックスボックス...
-
li 黒丸含んで移動する方法
-
W3Cのソースコードの検証サービ...
-
表示倍率を変えるとレイアウト...
-
form input テキストを上下中央...
-
中点「・」の改行について
-
定義リストに下線をつけたいと...
-
画像イメージの上下左右、欲し...
-
余分な縦スクロールバーが出て...
-
CSSでボックスのheightが0になる
-
HTMLで一部だけスクロールする...
-
CSSの記述でのクラスの定義で
-
<div>と<div>の間の10px程の...
-
横並びリスト ブラウザ縮小 カ...
-
CSS、width100%でもできる余白
-
divで囲まれたpaddingの指定を...
-
HTMLのiframeの入れ子について
-
【CSS】ヘッダーの高さが不明の...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
画像イメージの上下左右、欲し...
-
form input テキストを上下中央...
-
css初心者 フレックスボックス...
-
表示倍率を変えるとレイアウト...
-
HTMLで文字が重なって表示されます
-
CSSで背景画像を一番下にもって...
-
W3Cのソースコードの検証サービ...
-
CSS、width100%でもできる余白
-
CSSがなぜかfont-sizeだけ効か...
-
CSSでボックスのheightが0になる
-
Media Queries 4 で 非推奨とな...
-
スクロールボックスを中央に配...
-
【CSS】ヘッダーの高さが不明の...
-
CSS(0の単位)について
-
【HTML&CSS】フッター下部の余...
-
<div>と<div>の間の10px程の...
-
CSSで指定した背景画像にリンク...
-
footer を横幅いっぱいに広げる...
おすすめ情報