1

テストブログの「テスト」というページに iframe を埋め込もうとしています - damianp1.blogspot.co.uk

できるだけ多くのスペースを確保するためにページから多くの不要なアイテムを削除しましたが、iframe の後ろに表示される青いボックスを削除するための ID が見つかりません。また、iframe が収まりません。下部に灰色の境界線がある白いボックス。

これまでに使用したコードは次のとおりです。

<style type="text/css">

.blog-pager, .footer, .post-footer, .feed-links, #Attribution1, .comments, .post-title, .sidebar
{ display:none !important;}
.main-inner .columns {position: relative; left: -205px; top 50px; width: 1305;padding-left:0 !
important;padding-right:0 !important;}

</style>
</b:if>
<style>]

</style>

<div class="post-outer" style="width:1100px;">
<div id="outerdiv" style="width: 1200px; overflow: hidden">
<iframe width="1300" style="position: relative; left: -190px; top: -34px" height="600" 
src="http://wildlife-ramblings.blogspot.co.uk/" scrolling="yes" frameborder="0"></iframe>
</div>
</div>

iframeがページをきれいに埋めるように、すべてを適切に合わせる方法を教えてください。

どうもありがとう、ダミアン。

4

2 に答える 2

2

iframe の後ろにある青いボックスは次の場所にあります。

.post-outer {
background-color: #eef8f8;
border: solid 1px #e8e8e8;

青いボックスを削除するには、「.post-outer」を非表示にするか、次のようにします。

background-color: transparent;
border: none;

必要に応じて「!important」を追加します。

iframe の後ろにある白いボックスは次の場所にあります。

.main-outer {

境界線を削除するには、次を削除します。

box-shadow: 0 1px 3px rgba(0, 0, 0, .15);

編集:( 異なる形式のアイデアに基づく)

青と白の部分を拡張したい場合は、ブログの幅を iframe の幅と同じかそれ以上に拡張する必要があります。「テンプレート」>「カスタマイズ」と書かれたオレンジ色のボタンをクリックします。読み込まれたページで、[幅の調整] をクリックします。

ブログ全体の幅を広げたくない場合は、コンディショナル タグを使用してそのページのみに影響を与えることができます。その特定のページのみに影響を与えるには、「/b:skin」を見つけて、その下に次のコードを貼り付けます。

 <b:if cond='data:blog.url == &quot;http://damianp1.blogspot.co.uk/p/test_6572.html&quot;'>
 <style>
 #Blog1 {
 width: 1200px !important;
 }
 </style>
 </b:if>

白い部分の高さを拡張するには、「height: 800px」または iframe の高さを追加する必要があります (または、iframe を超えて拡張するには 20px-40px 以上)。

.post-outer の 110% 幅と、最初の回答の前に以前に行った編集を必ず削除してください。

編集:これを行うより良い方法について尋ねられました:

ifrmae が必要な投稿ページ内で、次のコードを使用します。

<style>
html, body {
overflow-y: hidden;
} 

#iframe-wrapper {
height: 100%;
width:1100px;
position: fixed;
scroll: no;
margin: 0 auto;
left:0px;
right: 0px;
z-index:9999;
margin-top: -52px;
top: 0px
bottom: 0px;
}

#title-wrapper {
height:70%;
margin:0 auto;
width: fixed;
background-color:  white;
box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
border-bottom:20px  white solid;
border-right:20px  white solid;
border-left:20px  white solid;
text-align:center;
border-radius:30px;
-moz-border-radius:  30px;
-webkit-border-radius:  30px; 
}

.blog-pager, .footer, .post-footer, .feed-links, #Attribution1, .comments, .post-title, .sidebar
{ display:none !important;}
</style>

<div id="iframe-wrapper"><div id="iframe-inner">
</div><div id="title-wrapper"><h3><span style="color: black; font-size: 30px">Wildlife Ramblings</span></h3>

<div style="border: solid #e8e8e8 1px; padding: 20px; background: #eef8f8; border-radius:20px; -moz-border-radius:  20px; -webkit-border-radius: 20px; height: 83%"><embed  src="http://wildlife-ramblings.blogspot.co.uk/" width="100%" height="100%"></embed></div>
</div></div>

これにより、コードを貼り付けたページにのみ、ブログ自体の上に iframe が配置されます (ただし、同じブログ スタイルで、角が丸い青と白の背景が含まれます)。

上記のコードの一部を変更して、iframe の位置を調整する必要がある場合があります。コードの次の部分を見つけます。

#iframe-wrapper {
margin-top: -52px;
}

iframe 全体を上 (ページの上部に近づける) に移動するには、-52px を -62px (または何でも) に増やします。iframe 全体を下に (ページの下部に近づけて) 移動するには、-52px を -42px などに減らします。

これは、調整が必要なコードの唯一の部分です。

これは、上記のコードをコピーしてブロガー ページに貼り付けた場合のスナップショットです。 iframe コードがどのように見えるかのスナップショット

于 2013-07-05T14:00:03.217 に答える