サイドバーの広告が一部しか見えない。

[三好]

Raindropsというテーマを使用しています。サイドバーのテキストボックスに広告コードを貼ると広告が表示されますが、縦の長さが一定の長さしか表示されません。テキストボックスに写真を貼った場合はきちんと表示されます。広告の長さに応じて表示されるようにするにはどうしたらいいのか、どなたか、わかる方がいらっしゃいましたら教えてください。よろしくお願いします。

[nobita]

こんにちは

Raindropsの作者です。

テーマ側で、高さを制限しているつもりはなかったので、お手数ですが、テキストウィジェットにお書きになっている　htmlコード　または、スクリプトを　を提示してみてください。

[三好]

ご連絡いただき有り難うございます。アマゾンとグーグルアドセンスの広告コードで下記のようなものです。それぞれ別のテキストウィジェットに貼っています。

①アマゾン
<iframe src=”●=●●=●=●=●=●=●=●=ifr” marginwidth=”0″ marginheight=”0″ width=”160″ height=”600″ border=”0″ frameborder=”0″ style=”border:none;” scrolling=”no”></iframe>

②アドセンス
<script type=”text/javascript”><!–
google_ad_client = “●”;
/* 縦長160×600 */
google_ad_slot = “●”;
google_ad_width = 160;
google_ad_height = 600;
//–>
</script>
<script type=”text/javascript”
src=”●”>
</script>

ともに高さが600の広告ですが、サイドバーには160くらいまでしか出ず、下の部分が隠れてしまいます。CSSに複数あるoverflow:hiddenのうち、いずれかを変えればいいのかとも思いましたが違うのでしょうか？教えていただけると助かります。よろしくお願いします。

[nobita]

こんにちは
ソースを提示いただきありがとうございます。

1　のアマゾンのスタイルが　短くなる件確認しました。

この問題の、原因になるスタイルルールは、

style.cssの2201行付近の以下のルールの影響によるものです。

.textwidget iframe,
.textwidget img{
	max-width:100%;
	height:auto;
}

このルールの目的

テキストウィジェットに画像、iframeが挿入された時に、サイドバーからあふれ出さないように、max-widthで最大幅を制限しています。この時、heightの設定をautoにしておかないと元々の、画像タグのアトリビュート設定（height=”300″)みたいなルールがそのまま適用されて、縦にビローンと伸びる事を抑制するためのルールです。

解決法1
iframe タグの　style属性を変更

style="height:600px;border:none;"

としていただけると、スタイルルールの詳細度が高くなり、600pxで表示されます。

style.cssのルールを削除しないで、上の方法を選ぶメリット
　広告その他が、画像を出力しても、画像が、サイドバーからはみ出しにくい。

2　scriptについて、

このソースだけですと、こちらでは、テストが出来ないので、お手数ですが、このスクリプトを使って最終的に表示される。DOMソース（chrome等で、右クリック要素を検証などで、得られるDOMソース)を再度お知らせいただけますようお願いします。

[三好]

早速、返信をいただきありがとうございました。アマゾンの方は解消いたしました。ありがとうございました。アドセンスの方は、素人でDOMソースがよくわからないため、該当ページのURLをお知らせします。現状では右サイドバーのようになっていて下が隠れてしまいます。
http://nonfiction-j.com/blog-%e3%82%a6%e3%82%a9%e3%83%83%e3%83%81

よろしくお願いします。

[nobita]

こちらも、javascriptで、最終的に、iframeから広告を表示しているように見えます。

こちらは、スクリプトなので、style等の属性値を変更するのは困難だと思います。

以下のようにすることで、表示が可能ではないかと思います。

style.cssの最終行に追加してください。

.textwidget ins iframe{
	height:600px;
}

[三好]

ご指示の通りstyle.cssに追加したところ解消いたしました。丁寧に教えていただき大変ありがとうございました。助かりました。

[三好]

解決済みにチェックを入れ忘れましたので、チェックを入れてもう一回投稿しました。