iPadでスカイスクレイパー広告の右端が切れる | 不具合報告 | Cocoon フォーラム

サイト内検索
書き込みの前に以下の3点をご確認ください。
  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示高速化を無効にしてください
  3. 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

フォーラム利用ガイドリンク

  1. フォーラムガイドライン
  2. よくある質問と答え(FAQ)
  3. サポート対象外のケース
  4. 原因不明の不具合用トラブルシューティング
  5. トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw
  6. 真っ白画面でのエラーメッセージの確認方法 
  7. ブラウザ環境チェックツール

フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。

また、問題の解決に至った場合には、トピック冒頭の「解決済み」リンクをクリックしていただけますと幸いです。

wpForoの解決済みリンク

また、有用な返信があった場合は「いいね!」リンクもご活用ください。返信者の励みになります。

wpForoのいいねリンク

「いいね!」機能はフォーラム登録者のみが利用できる機能です。

CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。

フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。

最近の書き込みはこちら。

詳細なカスタマイズ依頼をするならこちら。

フォーラムのTwitterアカウント(@CocoonForum)はこちら

スポンサーリンク
iPadでスカイスクレイパー広告の右端...
 
Share:
Notifications
Clear all

[解決済] iPadでスカイスクレイパー広告の右端が切れる  


Lin
 Lin
(@Lin)
ゲスト
参加: 3週間 前
投稿: 34
2020年7月23日 22:51  

お世話になります。

サイドバーを300pxの幅に設定して、PC広告ウィジェットで300px×600pxのスカイスクレイパー広告を貼りました。

PCで表示する場合は問題無いのですが、iPad3で表示すると右端が切れてしまいました。

設定が悪いのでしょうか?

----------------------------------------------
サイト名:ブルーレディ
サイトURL: https://www.bluelady.jp 
ホームURL: https://www.bluelady.jp 
コンテンツURL:/wp-content
インクルードURL:/wp-includes/
テンプレートURL:/wp-content/themes/cocoon-master
スタイルシートURL:/wp-content/themes/cocoon-child-master
親テーマスタイル:/wp-content/themes/cocoon-master/style.css
子テーマスタイル:/wp-content/themes/cocoon-child-master/style.css
WordPressバージョン:5.4.2
PHPバージョン:7.4.4
ブラウザ:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.89 Safari/537.36
サーバーソフト:Apache
サーバープロトコル:HTTP/1.1
言語:ja-JP,ja;q=0.9,en-US;q=0.8,en;q=0.7,zh-TW;q=0.6,zh;q=0.5
----------------------------------------------
テーマ名:Cocoon
バージョン:2.2.1.8
カテゴリ数:28
タグ数:1497
ユーザー数:1
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:1.1.2
style.cssサイズ:17432バイト
functions.phpサイズ:40560バイト
----------------------------------------------
Gutenberg:1
AMP:1
PWA:0
Font Awesome:4
Auto Post Thumbnail:0
Retina:0
ホームイメージ:/wp-content/uploads/2020/07/ogp-kai3.png
----------------------------------------------
ブラウザキャッシュ有効化:0
HTML縮小化:0
CSS縮小化:0
JavaScript縮小化:0
Lazy Load:0
WEBフォントLazy Load:0
----------------------------------------------
利用中のプラグイン:
404 Redirection 1.8
Akismet Anti-Spam 4.1.6
AmazonJS 0.10
Classic Editor 1.5
Contact Form 7 5.2
Disable XML-RPC Pingback 1.2.1
EWWW Image Optimizer 5.6.0
Google XML Sitemaps 4.1.0
Invisible reCaptcha 1.2.3
Jetpack by WordPress.com 8.7.1
NextScripts: Social Networks Auto-Poster 4.3.16
PS Auto Sitemap 1.1.9
Really Simple CAPTCHA 2.0.2
Regenerate Thumbnails 3.1.3
Search Regex 2.2.1
SNS Count Cache 1.1.3
SyntaxHighlighter Evolved 3.5.5
Table of Contents Plus 2002
Throws SPAM Away 3.1.4
Tumblr Importer 0.8
UpdraftPlus - Backup/Restore 1.16.26
WordPress Popular Posts 5.2.2
WP Maintenance Mode 2.2.4
WP Multibyte Patch 2.8.5
----------------------------------------------

未解決
Lin
 Lin
(@Lin)
ゲスト
参加: 3週間 前
投稿: 34
2020年7月23日 23:20  

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

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

 


Lin
 Lin
(@Lin)
ゲスト
参加: 3週間 前
投稿: 34
2020年7月23日 23:23  

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

 


リフィトリー
(@leafytree)
Noble Memberサイト
参加: 1年 前
投稿: 1816
2020年7月23日 23:39  

前略、Lin さん

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

 

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

 

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

・サイドバー30%

・メインカラム67%

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

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

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

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

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

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

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

 

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

 

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

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

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

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

 

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

 

 


わいひら 件のいいね!
リフィトリー
(@leafytree)
Noble Memberサイト
参加: 1年 前
投稿: 1816
2020年7月23日 23:48  

追伸:

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


リフィトリー
(@leafytree)
Noble Memberサイト
参加: 1年 前
投稿: 1816
2020年7月23日 23:58  

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

 


わいひら 件のいいね!
リフィトリー
(@leafytree)
Noble Memberサイト
参加: 1年 前
投稿: 1816
2020年7月24日 01:11  

@Lin さん

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

 

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

 

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


わいひら 件のいいね!
リフィトリー
(@leafytree)
Noble Memberサイト
参加: 1年 前
投稿: 1816
2020年7月24日 01:18  

@Lin さん

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

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

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


わいひら 件のいいね!
Lin
 Lin
(@Lin)
ゲスト
参加: 3週間 前
投稿: 34
2020年7月24日 08:51  

リフィトリーさま

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

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

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

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

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

 


リフィトリー 件のいいね!
リフィトリー
(@leafytree)
Noble Memberサイト
参加: 1年 前
投稿: 1816
2020年7月24日 11:57  

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

 

 


わいひら 件のいいね!
Lin
 Lin
(@Lin)
ゲスト
参加: 3週間 前
投稿: 34
2020年7月24日 14:08  

リフィトリーさま

ありがとうございます。

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

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

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

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

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

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

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

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

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


リフィトリー
(@leafytree)
Noble Memberサイト
参加: 1年 前
投稿: 1816
2020年7月24日 14:52  

@Lin さん

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

 

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

 

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

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

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


リフィトリー
(@leafytree)
Noble Memberサイト
参加: 1年 前
投稿: 1816
2020年7月24日 15:32  

@Lin さん

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

 

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


わいひら 件のいいね!
Lin
 Lin
(@Lin)
ゲスト
参加: 3週間 前
投稿: 34
2020年7月24日 16:37  

リフィトリーさま

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

参考になりました。

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

 


リフィトリー 件のいいね!
リフィトリー
(@leafytree)
Noble Memberサイト
参加: 1年 前
投稿: 1816
2020年7月24日 17:22  

@Lin さん

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

 

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

 

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


わいひら 件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
参加: 3年 前
投稿: 10385
わいひら - Facebookわいひら - Twitter
2020年7月24日 19:45  
投稿者:: @Lin

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

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

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

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

This post was modified 2週間 前 2 times by わいひら

Lin
 Lin
(@Lin)
ゲスト
参加: 3週間 前
投稿: 34
2020年7月24日 20:23  

わいひら様

お世話になります。

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

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


わいひら 件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
参加: 3年 前
投稿: 10385
わいひら - Facebookわいひら - Twitter
2020年7月24日 20:34  

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

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

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


リフィトリー 件のいいね!
猫ちゃん
 猫ちゃん
(@猫ちゃん)
ゲスト
参加: 3か月 前
投稿: 51
2020年7月25日 12:42  

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


リフィトリー
(@leafytree)
Noble Memberサイト
参加: 1年 前
投稿: 1816
2020年7月25日 13:22  

@猫ちゃん さん

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

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


わいひら
(@yhira)
メンバーサイト Admin
参加: 3年 前
投稿: 10385
わいひら - Facebookわいひら - Twitter
2020年7月25日 21:04  

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


Share:
スポンサーリンク
わいひらをフォローする
おすすめサーバー(コスパ・バックアップ重視型)

性能も兼ね備えながら安くブログ運営を開始できる点においてのNo.1。
それでいてブログ成長後は、十分すぎるほどのスペックアップ余力も担保されている。

◎安く始められる
◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
◎ファイルも14日以内なら無料自動復旧可能
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越し依頼が可能(有料)

サービス運営期間:2年

1年以上の契約をする場合は、クーポンコード入力でさらに10%割引(※2020/12/31まで)。

クーポンコード:PK4JK4RJ

クーポンの使用方法はこちら

とにかく速い。サイトに表示スピードを求めるならココ。
管理画面がシンプルで使いやすい。

◎nginxを用いた高速サーバー(完全SSD)
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
○http/2(高速化プロトコル)に対応
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
◎ファイルも14日以内なら無料自動復旧可能
◎サーバ引っ越しツールあり(無料)
○サーバ引っ越し依頼が可能(有料)
◎ドメインとサーバー代のチャージ払いが可能

サービス運営期間:1年10ヶ月

安定感抜群のサーバーです。あまり急激なアクセス変動がないアフィリエイトサイトに向いています。

◎nginxを用いた高速サーバー(完全SSD)
◎老舗サーバーなので安定感抜群
◎ディスク容量が多い
◎転送量が多い
◎同サービス内でドメイン管理が可能
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
○DBは7日以内なら無料自動復旧可能
×ファイルは有料かつ手動での復旧
×プラン変更でCPUのスペックアップができない
×プラン変更しても即時反映されない
×アダルト・出会い系サイト不可

サービス運営期間:17年

常に新しいことに挑戦しているフロンティア精神あふるるレンタルサーバーです。
LiteSpeedやHTTP/2を日本で初めて導入したサーバー。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎転送量が多い
◎ディスク容量が多い
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
○ファイルは14日以内なら無料復旧可能(※手動)
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越し依頼が可能(有料)

サービス運営期間:4年

格安な値段で始められる高機能サーバーです。
性能も備えつつ最安ならここ。
ただし少し機能は弱い。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎激安プランが用意してある
◎値段あたりのスペックが高い(コスパ良し)
◎サーバ引っ越し依頼が可能(無料)
◎アダルト・出会い系サイト可
○http/2(高速化プロトコル)に対応
△プランのアップは可能だがダウンは不可
△毎日自動バックアップ(1日分)
△前日のバックアップからのみ復元できる(無料)

サービス運営期間:4年

Cocoon
タイトルとURLをコピーしました