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 == "http://damianp1.blogspot.co.uk/p/test_6572.html"'>
<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 などに減らします。
これは、調整が必要なコードの唯一の部分です。
これは、上記のコードをコピーしてブロガー ページに貼り付けた場合のスナップショットです。