プロが教えるわが家の防犯対策術!

ブログに動画の広告を貼り付けたいのですが、HTMLに広告のURLを貼り付けたところ、右側に少しずれてしまいます。下記のHTMLとCSSの構成を見ていただくとわかると思うのですが、テンプレートにインフォメーションという箇所があり、ブログでお知らせなどを記載できる場所があるのですが、そのインフォメーションの場所に動画の広告を貼り付けようとしたところ、右側にずれて貼り付けられてしまいます。paddingやmarginなどの値もいじってみたのですが、ずれ幅が少し変わるくらいで、やはり右側にずれたままで、インフォメーション枠の中央におさめることができません。
HTMLもCSSも勉強し始めたばかりで、わからないことだらけだったので、他でもいろいろ調べました。いろいろやり方はあるようですが、どれも自分の例に当てはめられず解決できませんでした。
少しわかったことは、iframeというのが、ブロックレベル要素ではないからmarginで中央寄せが出来ないということだけでした。
動画の広告を中央に寄せるために、どこにどういった記述をしたらよいのか教えていただけないでしょうか。分かりづらくてすみませんがよろしくお願いします。
下記にCSSが①と②でわかれているのは、両方にインフォメーションの記述があるからで、どちらが必要かわからなかったため、両方載せてます。


<!--▼トップインフォメーション・開始▼--> [HTML]
<!--index_area-->
<div class="topinfo">
<iframe src="http://****/dynamic/30609/01/" marginwidth="0" marginheight="0" width="600" height="200" border="0" frameborder="0" style="border:none;" scrolling="no"><a href="http://****/30609-01" target="_blank">*****</a></iframe>
</div>
<!--/index_area-->
<!--▲トップインフォメーション・終了▼-->



/*トップインフォメーション*/  [CSS①]
.topinfo{
padding: 4em 1em 1em 1em;
background:#ffffff url(http://****/h/o/p/*****/3red-topinformation.gif) top left no-repeat;
border: solid 1px #b0b0b0;
margin-top: 5px;
}


/*--------------------------------------------------------
●トップインフォメーション              [CSS②]
--------------------------------------------------------*/
.topinfo{
font-size: 0.875em;
text-align: left;
margin-bottom: 2em;
}

質問者からの補足コメント

  • centerを追加して囲んでみましたが、やはり動画の位置はインフォメーション枠より右側にずれてしまって変化がありませんでした。CSSの方は何も記述しなくていいのでしょうか?

    No.1の回答に寄せられた補足コメントです。 補足日時:2017/08/25 08:02
  • iframeタグだけを中央にしようと再度iframeタグをcenterで囲ってみましたが、やはり動画の位置は変わりませんでした。

    No.2の回答に寄せられた補足コメントです。 補足日時:2017/08/25 08:09
  • 何度も解答いただきありがとうございます。ブログサービスはFC2 ブログを利用しており、テンプレートはFC2のbasic_whiteというテンプレートを複製して、複製したテンプレートのHTMLとCSSをKAETENというテンプレートのものに書き替えて使っています。

    No.3の回答に寄せられた補足コメントです。 補足日時:2017/08/25 11:25
  • 返信遅くなりました。widthの値を小さくして、テンプレートを3カラムから2カラムに変更してみたら動画の全部が表され、中央寄せに出来ました。ありがとうございました!

    No.5の回答に寄せられた補足コメントです。 補足日時:2017/08/25 14:23

A 回答 (5件)

動画のサイズwidth="600" height="200"が大きすぎてブログの記事幅を超えるから中央寄せが出来ずにいます。



iframe内の「width="600" height="200"」をもっと小さくしてしまえば<center>
<iframe・・・・・・・ </iframe>
</center>

で寄る筈です。width="300" くらいから調整して見て下さい。
この回答への補足あり
    • good
    • 0

つまりhtm&cssはKAETENと同じなんですね。


KAETENがFC2には無いのですが?・・・・

知りたいのは
<div class="topinfo">のBODYまで遡る親要素の横幅。
.topinfo{で設定している背景画像の横幅。
の2点です。

ブログURLを教えて貰ったほうが手っ取り早い気がしますが・・・。
    • good
    • 0

topinfoはmarginで隙間を作って、背景画像を背景に置いています。



その画像のサイズとiframeのサイズが合っていないのが原因です。
このブログのbodyの横幅などとも合わせる必要があります。

ブログサービス名・テンプレート名が解らないと、これ以上は先へ進めません。

それが無理ならブログurlを。
この回答への補足あり
    • good
    • 0

No.1続き


"topinfo"が修飾している他のタグが有るかも知れない。
もし、他の要素も変に動いたらiframeタグだけを中央にする。


<div class="topinfo">
<center> ←追加
<iframe src="http://****/dynamic/30609/01/" marginwidth="0・・・・</iframe>
</center> ←追加
</div>
この回答への補足あり
    • good
    • 0

1番手っ取り早い方法です。


動画部分を<center>~</center>で囲む。


<center> ←追加
<div class="topinfo">
<iframe src="http://****/dynamic/30609/01/" marginwidth="0・・・・</iframe>
</div>
</center> ←追加
この回答への補足あり
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!