Cocoonフォーラム

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

何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。

不具合・カスタマイズ対象ページのURL:

相談内容:

不具合の発生手順:

解決のために試したこと:

※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:

※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。

環境情報の取得方法はこちら。
https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
https://wp-cocoon.com/theme-trouble/

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

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

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

スマホビューの新着記事など…スタイル修...
 
共有:
通知
すべてクリア

[解決済] スマホビューの新着記事など…スタイル修正案の報告

11 投稿
2 ユーザー
3 Reactions
2,149 表示
かうたっく
(@kautakku)
Famed Member Moderator
結合: 7年前
投稿: 4764
Topic starter  

新着記事の『タイトルを重ねた大きなサムネイル』のときタイトルの文字.widget-entry-cards.large-thumb-on .card-titleが2行以上になると『はみ出す』ようです。

画像large-thumb

スライドイン状態でTOPへ戻るボタンを画像にしたとき、幅の狭いブラウザで見ると画像.go-to-top-buttonがはみ出す件。※非表示になっていない

画像go-to-top-button

cocoonページのFBバールーンの@media screen and (max-width: 440px)のとき
.fb-like-balloon-body がheight: 70px;だと下が見切れる件。

画像fb-like-balloon-body

気になる所について。

Cocoon設定『投稿』タブより『ページ送りナビ設定』を表示し『表示タイプ』をデフォルトに設定したとき、スマホからアクセスすれば『画像が極小』になる件をご報告しておきます。

画像pager-post-navi

報告のみしておく件。モバイル広告ウィジェットの事

トップページと固定ページのトップと、記事上に広告コードいれて置いたとき、PC用スライドイン幅で表示でアクセスしたら微妙にスクロールが現れるようです。※レスポンシブ広告ユニットを置いてないせいかも知れません?

PCビューで左へスクロールしたとき、チョコッとはみ出してる様子:画像ad

以前、広告ウィジェットを修正してもらったとき完ぺき!と言ったので、一応ご報告だけします。※スマホからのアクセスでは横揺れしないので。

FB・広告以外は修正済みなので、分かりにくいので画像を置きましたが一応リンクです。

https://bibabosi-rizumu.com/mobile-responsive/

サイト名:ビバ★りずむ
サイトURL: https://bibabosi-rizumu.com 
Wordpressバージョン:4.9.4
PHPバージョン:7.1.4
ブラウザ:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36
サーバーソフト:Apache
サーバープロトコル:HTTP/1.1
言語:ja,en-US;q=0.9,en;q=0.8
----------------------------------------------
テーマ名:Cocoon
バージョン:0.3.7
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:	0.0.2
----------------------------------------------

   
わいひら reacted
引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17229
 

ご報告ありがとうございます。
一応、修正したものをプッシュしておきました。
https://github.com/yhira/cocoon/archive/master.zip

トップページと固定ページのトップと、記事上に広告コードいれて置いたとき、PC用スライドイン幅で表示でアクセスしたら微妙にスクロールが現れるようです。※レスポンシブ広告ユニットを置いてないせいかも知れません?

これは、レスポンシブ広告ユニットでなくて、画面幅が狭ければしょうがないかもしれません。
ちなみに画像にある画面幅はいくつだったでしょうか?


   
返信引用
かうたっく
(@kautakku)
Famed Member Moderator
結合: 7年前
投稿: 4764
Topic starter  

間違いました。レスポンシブではなく、『レクタングル広告ユニット300』を使ってない。でした…

『記事内ネイティブ、レスポンシブ』『テキスト/イメージ、レスポンシブ』を使って『PCビュー狭い横幅』で更新・表示したときです。

ちなみに画像にある画面幅はいくつだったでしょうか?

幅が狭くなるほど分かりやすいので344pxで表示させました。

ただ740px位で読み込んでも下に横スクロールバーが表示される感じで。

700px以下で見る人が少なそう。見ても下のスクロールバーは(運営者以外)気になりにくい ※横揺れしないので。アドセンス側の幅指定が原因の可能性が濃厚かも。と、個人的に思ってます。

画面幅に合わせてアドセンスが計算しているであろうwidthを100% !importantで指定すればキレイにハマるので。

.adsbygoogle,
#aswift_1_expand,
#aswift_1_anchor,
iframe {
width: 100% !important;
}

そもそも私の環境だけかも知れません?

しかもこんなstyleを指定するまでないよね…とか思ってる状態です。


   
返信引用
かうたっく
(@kautakku)
Famed Member Moderator
結合: 7年前
投稿: 4764
Topic starter  

一応、修正したものをプッシュしておきました。

細かい点でしたけど、ご確認ありがとうございます。私の環境で見てみましたが『ページ送りナビ』の表示がキレイになって嬉しいです^^

いつも対応、ありがとうございます!


   
わいひら reacted
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17229
 

添付画像のように設定したのではなく、「広告コード」に直接「記事内ネイティブもしくは、レスポンシブ」広告ユニットのコードを挿入したということでしょうか?

あと、他の設定の動作確認ありがとうございます!


   
返信引用
かうたっく
(@kautakku)
Famed Member Moderator
結合: 7年前
投稿: 4764
Topic starter  

添付画像のようにしました。設定は添付画像に付けますね。

3つ設置しているうちどれもトップ又は本文上で、広告フォーマットの5種類試しましたが、どれも同じ挙動です。

※正確に言えば、バナーのみ.adsbygoogleだけはみださない。ほか#aswift_1_expand、#aswift_1_anchor、iframeは はみ出します。


   
返信引用
かうたっく
(@kautakku)
Famed Member Moderator
結合: 7年前
投稿: 4764
Topic starter  

「広告コード」に直接「記事内ネイティブもしくは、レスポンシブ」広告ユニットのコードを挿入したということでしょうか?

Cocoon設定の広告コードからの設定かと思い、引用部分をさっき試しました。

設定は『投稿・固定ページの表示位置』『タイトル上』に1つ『オート(AdSenseにおまかせ)』で置きました。

現状と同じく.adsbygoogle、#aswift_1_expand、#aswift_1_anchor、iframeが はみ出すようです。

※現在は投稿記事の『PCビュースマホ表示』では『記事上ad』『タイトル上ad』の2か所、スクロールバーが表示される原因となってます。


   
返信引用
かうたっく
(@kautakku)
Famed Member Moderator
結合: 7年前
投稿: 4764
Topic starter  

Cocoon設定の広告コードから設定で、『投稿・固定ページの表示位置』『タイトル上』に置いたとき、もう1つ分かった事だけ報告します。

一番上に来るアドセンス広告のみ『PCビュー』の狭い幅で はみ出すことが分かりました。

2番目にある『記事上ad』はこの場合 はみ出さない、やっぱりアドセンスの仕様かもしれないのでCocoon設定の広告コード『タイトル上』のアドセンスは消しました。

わいひらさん的に何か疑問がありましたら、表示確認はしますのでお声かけください。

※Cocoon利用者の環境での報告もありませんので、ある意味よかったです^^


   
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17229
 

Cocoon設定の広告コードから設定で、『投稿・固定ページの表示位置』『タイトル上』に置いたとき、

この設定で、広告フォーマットを「オート」にして、試してみたのですが、横スクロールは僕の環境では表示されませんでした。

ちょっと今のところ不具合が再現できないので、現状は何ともできないかもしれません。


   
返信引用
かうたっく
(@kautakku)
Famed Member Moderator
結合: 7年前
投稿: 4764
Topic starter  

私の環境だけのようですね・・・。

了解しました!何かが邪魔してるようなので、このページをチェックしてゆっくり原因の追究をしてみようと思います。

お手数かけました。検証に感謝します!


   
返信引用
かうたっく
(@kautakku)
Famed Member Moderator
結合: 7年前
投稿: 4764
Topic starter  

何かが邪魔してるようなので、このページをチェックしてゆっくり原因の追究をしてみようと思います。

特に何も触ってないのに、今はもうPCビューの740px以内でも横揺れもしてません。という、ご報告に来ました。

別件で用事がありこの件も(ついでに)アドセンス側に問い合わせてみました。数日後もしかしたら、なにか返事があるかもしれないです。※もう直ってるので回答は期待してませんが^^;

アドセンス側の問題かと思われますが、お付き合いくださりありがとうございました。


   
わいひら reacted
返信引用
共有:

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

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

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

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

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

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

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

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