レスポンシブ広告を貼ると問題有りません。

300×600の広告だとどうして上手くいかないのでしょうか？

レスポンシブにした場合のキャプチャも添付しておきます。

前略、Lin さん

もしかしたらですが、サイト全体の幅が1076pxでは足りないのかもしれません。（デフォルト1256px）

PCで画面幅を少しずつ狭くしていくとわかるかと思いますが、Cocoonはある一定の画面幅より狭くなると、サイドバーが非表示になるまで、

サイト全体の幅に対して、

・サイドバー30％

・メインカラム67％

の幅で表示されるようになっています。

ですので、メインカラム、サイドバー、ともに、デフォルトまでいかなくても、もう少しデフォルトに近い幅に広げた方がよいのかもしれません。

デフォルトメインカラムコンテンツ幅800px

デフォルトサイドバーコンテンツ幅336px

以下のページにカラム幅設定のマニュアルがあるので、ご覧になってみてください。

サイト幅の計算方法も記載されています。

Cocoon設定の「カラム幅変更」で変わる場所の説明。

おそらく、わいひらさんは、ラージスクレイパー等の広告幅も考慮の上で、デフォルト値を336pxにしたのではないかと推測します。

あと、サイトバーのpadding値を子テーマに設定されていらっしゃるようですが、左右のpaddingは、Cocoon設定の「カラム」タブで行えます。

.sidebar {
    padding: 0 0 5px 10px !important;
}

現在は、右側のpaddingが、0の状態のようです。

ごちゃごちゃと書きこんでしまいましたが、いろいろお試しになってみてください。

私もsimplicity2からの乗り換え組です。

追伸：

マニュアルにも記載がありますが、カラム幅を変更した場合は、サムネイルの再生成が要るみたいです。

背景に色を付けてみると、窮屈なのがわかるかと思います。

@Lin さん

Cocoon設定の「カラム」タブの「サイドバー設定」の数値をデフォルト値か、それに近い値にすれば良いのかもしれません。（ちょっとやってみないとわからないですが・・）

「サイドバー幅」が、サイドバーのコンテンツ幅に相当し、「サイドバー余白幅」の数値が左右の padding値に相当します。

「サイドバー余白幅」の数値は、片側の数値ですが、数値を入力すれば、左右同じ数値に設定されるかと思います。

@Lin さん

あと、子テーマにお書きになった以下のCSSは、削除するか、上下方向の指定だけに変更してください。

.sidebar {
    padding: 0 0 5px 10px !important;
}

まずは、コメントアウトして、どのような表示になるか試してみてください。

リフィトリーさま

丁寧なご説明ありがとうございました。

理屈が分かりましたので、CSSで調整致しました。

サイドバーのpaddingを0にするとスカイスクレイパーが切れずに表示されるようになりました。

さらにサイドバーをとメインカラムの%を微調整して対応しました。

ありがとうございました。
助かりました。

@Lin さん

まだ、以下のCSSの記述が子テーマのstyle.cssに残っているようです。

.sidebar {
  padding: 0 0 5px 10px !important;
}

CSSの数値の順番は、時計回りに、

上、右、下、左　となりますので、右が 0px、左は 10px の指定となっています。

つまり、paddingは0にはなっていないということになります。

Cocoonのデフォルトの値では、コンテンツ幅が336pxで、左右のコンテンツ余白幅は19pxとなっています。

しかし、画面幅を狭くしていき、「.sidebar 」のコンテナが30％幅の指定になったときは、コンテンツ余白幅は10pxになり、画面幅が狭くなった場合でもコンテンツ幅をできるだけ確保するように、細かい配慮がなされています。

ですので、子テーマのCSS等で、paddingを固定値にしてしまうと、サイトバーのコンテンツ幅はこの微調整が行われないという訳です。（もちろん、メディアクエリ等で、画面幅を縮めたときのpadding値を少なめにすれば良いのですが、0px以下にはできないですし・・）

Simplicity2のときと、同じにしたい、というお気持ちは、よくわかりますが、個人的には、サイドバーのコンテンツ幅は、デフォルト値、あるいは、それに近い値にしておいた方が良いのではないかと思います。

リフィトリーさま

ありがとうございます。

ご指摘のCSSはあえて残しました。

新たにブレイクポイントを設定して対応しています。

現在は、まだテスト中ですので、その後、変わっていくかもしれません。

今、一番気になっているのは1023pxの画面幅以下にすると

TagError: adsbygoogle.push() error: No slot size for availableWidth=0

というエラーがでることです。

実はサイドバーにウイジェットでスカイスクレイパーを設置したのも、ウイジェットならエラーがでないのかもしれないと思ったからでした。

結局は改善できませんでしたが…

別のトピックで質問中です。

@Lin さん

エラーの原因については、私はよくわかりません。

ただ、1023px以下の指定で、それより幅の広いときより、サイドバーの右側の padding の値が２px増えてしまっています。

画面幅を狭くしていったときの.sidebarのコンテナの幅を31％にしたことで、幾分広くなったとは言え、paddingの値を増やすのは、矛盾しているように思います。

@media screen and (max-width: 1080px){
	.main {
		width: 66% !important;
	}
	.sidebar{
	  	padding: 0 2px 0 10px !important;
	  	width: 31% !important;*/
	}
}

レスポンシブに伸縮するサイドバーの場合は、広告の幅に対して、あそび幅を持たせておく、というのが、おそらく、わいひらさんの考えだろうと推測しています。

@Lin さん

そもそもの目的が、「エラーの解消」ということでしたら、余計な書き込みが多かったのかもしれません。

私のサイトも、Chromeのデベロッパーツールで見ると、同様のエラーがあるみたいです。

リフィトリーさま

ありがとうございました。

参考になりました。

スカイスクレイパーはサイドバースクロール領域に無事に収まりました。

@Lin さん

本命のエラー解消とはならず、お役にたてませんでした。

エラーの方のトピックで、上手いこと、解消したら、私も真似しようと思います。

もし、解消方法がわからなくても、実害がなければ、放置です。

投稿者:: @Lin

レスポンシブ広告を貼ると問題有りません。

300×600の広告だとどうして上手くいかないのでしょうか？

画面幅が狭くなった時に、それに合わせてサイドバーの幅が変わるので、300pxではなくなるからです。

Cocoonでは基本的にレスポンシブ広告を利用することを推奨しています。
実際Cocoon機能を利用すると、すべてレスポンシブ広告が利用されるようになっていると思います。
幅が決まった広告を挿入するときは、サイドバー幅が広告幅未満になったときは、そのような表示になると思います。
独自で生成した広告タグを利用する場合は、リフィトリーさんが疲れており書かれた通り、自身で調整していただくしかないかもしれません。

わいひら様

お世話になります。

リフィトリーさんに教えて頂いたので、解決致しました。

ありがとうございました。

音声認識入力の弊害が…。
以下のように訂正いたします。

×リフィトリーさんが疲れており
○リフィトリーさんが書かれた通り

リフィトリーさん申し訳ないです。

リフィトリー様が毎日たくさん解答してくださっていて、わいひら様を毎日助けて分担解答してくださっていて、たとえ、わいひら様の音声認識間違いでなくとも、リフィトリー様、お疲れでないかなと、膨大な解答時間に感激しています。

@猫ちゃん　さん

お気遣いいただき、ありがとうございます。

程々にやるのがいいのかもしれませんね。 ? 

特に疲れてると思って書いたわけではなかったです^^;
音声入力で「書かれた通り」と言ったら「疲れており」と変換されてしまいました。
全然違った意味になってしまいました ?