サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
CSSカスタマイズ相談
18
投稿
3
ユーザー
3
Reactions
6,415
表示
トピックスターター 2018年10月11日 23:18
本日cocoon内でサイドバーがモバイルで表示されないように色々調べていましたら、フォーラム内でわいひらさんが
| /*480px以下*/ | |
| @media screen and (max-width: 480px){ | |
| #sidebar{ | |
| display: none; | |
| } | |
| } |
こちらのコードをstyle.cssに追加と記載しており、当サイトでもこちらを参考にカスタマイズしておりましたが、どうやらこのコードを入力しても、モバイルでサイドバーが本文下に表示されるようです。
当サイトは https://youngergeneration.jp/
です。cookie、キャッシュの削除は試みましたがダメでした。
お手数ですが、ご享受していただきたいと思います。よろしくお願いいたします。
2018年10月12日 20:41
僕の環境でチェックしてみましたが、表示されていないですよ。
トピックスターター 2018年10月13日 12:19
わいひら さん
確認ありがとうございます。
確かに、トップページでは表示されないようですが、個別ページでは表示されているようです。
https://www.google.co.jp/amp/s/youngergeneration.jp/2017/05/08/loveletter-reibun/%3famp=1
こちらはgoogleplayアプリで検索して出てきたUrlになるのですがこちらではサイドバーが表示されているようです。
お手数ですが、確認をお願いします。申し訳ございません
2018年10月13日 14:53
こんにちは
amp.cssにコードを追加すれば良いと思います。
反映されなければプラグインのキャッシュ・またはCocoon設定よりキャッシュ削除・AMPキャッシュ削除を行えば反映されるかと思われます。
ちなみにナビを置いてないようですが、もし今後ナビを置きスライドインにするのであれば、Cocoon設定・モバイルより
モバイルボタンレイアウト
- スライドインボタン
モバイルメニュー等を表示するための設定を行います。768px以下で表示されます。※「トップボタン」はAMPページでは表示されません。
- スライドインボタン時コンテンツ下のサイドバーを表示
「モバイルボタンレイアウト」で「スライドインボタン」が表示されているときメインカラム下に表示されるサイドバーを表示するかどうか。
この2点を確認すれば良いと思います。
わいひら reacted
トピックスターター 2018年10月13日 22:39
かうたっく さん
amp.cssに追加かしこまりました。
ただいま、追加させていただきました。
ただ、まだ反映されて内容でしたので言われたAMP、プラグイン、cocoonのキャッシュ削除を試みましたがcocoonのキャッシュはうまくやれたと思うのですが、ほかはやり方が分かりません。
プラグインのキャッシュは
https://webshufu.com/wp-fastest-cache/
を参考にWP Fastest Cacheというプラグインをインストールしてキャッシュの削除を試みました。
AMPのキャッシュについては
https://kagoblo.net/clear-amp-cache/
を参考に試みましたが失敗。うまくいきませんでした。
AMPとプラグインの削除方法は上記のサイトでの方法で正しかったでしょうか？
正しいのであれば、もう一度チャレンジしてみたいと思います。
アドバイスをお願いしたく思います。よろしくお願いいたします。
2018年10月14日 03:40
またはCocoon設定よりキャッシュ削除・AMPキャッシュ削除を行えば反映されるかと思われます。
以下の方法が簡単だと思います。
https://gyazo.com/23dc56864246caca25f9c6454bfaa670
キャッシュプラグインの導入は、そのプラグインだけですよね？
トピックスターター 2018年10月14日 10:48
かうたっく さん
上記のスクショよりAMP、cocoonのキャッシュ削除はできました。
ありがとうございます。
キャッシュプラグインは、WP Fastest Cacheのみです。
一応、キャッシュプラグイン、cocoonの設定からampのキャッシュ削除を試みましたが、変化が見られません。
何か足りないものがあるのでしょうか？？
2018年10月14日 12:38
こんにちは。ponpon1783さんが提示していただいたアドレスの子テーマamp.cssを確認したら以下の通りでした。
https://gyazo.com/ee3c6177025622684bc8cff8be7ad834
amp.cssを見てもコードが入ってないんですね。キャッシュが影響したのかと思ったのですが、コードが入っていないってことはないですか？
https://gyazo.com/cb9da4d46c4a293e0da127fa6f2e2182
このCSSにコードを追加して、最後に更新ボタンをクリックしてから反映しない場合はキャッシュを削除する工程になります。
一度ご確認いただけますか？
わいひら reacted
トピックスターター 2018年10月14日 12:40
2018年10月14日 12:40
このページのブラウザの左右を狭くしたとき表示されるのがスライドインです。
https://gyazo.com/ab2bdcdd65a22fab8ef438247a47bfb0
これが嫌でなければ、上記で書いたスライドインを有効にしてサイドバーを表示させない設定にやってみるのも手だと思います。
2018年10月14日 12:46
https://youngergeneration.jp/wp-content/themes/cocoon-master/amp.css
コチラを確認しても以下リンク先を確認してもコードがありません
https://youngergeneration.jp/2017/05/08/loveletter-reibun/?amp=1
親テーマに書いても反映します。だた書いている場所によっては反映しない事もあります。
子テーマを使ってはダメでしょうか？親テーマ更新でカスタマイズが消えるので、子テーマをオススメします。
子テーマに書いたら反映するかご確認くださいませんか？？？
トピックスターター 2018年10月14日 20:39
かうたっくさん
<<このページのブラウザの左右を狭くしたとき表示されるのがスライドインです。
https://gyazo.com/ab2bdcdd65a22fab8ef438247a47bfb0
これが嫌でなければ、上記で書いたスライドインを有効にしてサイドバーを表示させない設定にやってみるのも手だと思います。
こちらなのですが、アドセンスの広告を張っていまして、規約違反になりそうなので避けたく思います。
また子テーマに変更、amp.cssにコードを張り付けました。が変化はないようです。
画像も添付しておきます。確認をお願いいたします。よろしくお願いいたします。
トピックスターター 2018年10月14日 20:46
追記です。
一つ謎なのが、AMPページのみサイドバーが表示されているようです。
2018年10月14日 21:21
こちらなのですが、アドセンスの広告を張っていまして、規約違反になりそうなので避けたく思います。
そうでしたか。そこまで確認する時間をとってないなかで、回答をしてしまってスミマセン＾＾；
2018年10月14日 22:53
僕の環境では、amp.cssに以下のコードを貼り付ければ、問題なく動作しているようです。
@media screen and (max-width: 480px){
#sidebar {
display: none;
}
}
1度、WP Fastest Cacheを無効にした状態で試していただけますでしょうか。
トピックスターター 2018年10月16日 21:28
かうたっくさん
そうなんです。メニューと広告が被ってしまうことが避けたい原因でした。
わいひら さん
言われたとおりにしたら、スマホ下のサイドバー消えました！本当にありがとうございました。
2018年10月17日 06:05
ponpon1783さんに。無事できたようで良かったです！
ちなみに、上記で同じことがたくさん書かれてるんですね。
1つ目
amp.cssにコードを追加すれば良いと思います。
反映されなければプラグインのキャッシュ・またはCocoon設定よりキャッシュ削除・AMPキャッシュ削除を行えば反映されるかと思われます。
2つ目
またはCocoon設定よりキャッシュ削除・AMPキャッシュ削除を行えば反映されるかと思われます。
以下の方法が簡単だと思います。
3つ目
このCSSにコードを追加して、最後に更新ボタンをクリックしてから反映しない場合はキャッシュを削除する工程になります。
4つ目
1度、WP Fastest Cacheを無効にした状態で試していただけますでしょうか。
チェックポイント❦
- 変更をしたのに反映されないとき
- キャッシュプラグインのキャッシュを削除
- それでもampで反映しないとき
- ampのキャッシュを削除
上述とおりです。
- あと
- ウィジェット変更時
- ampキャッシュ削除は必要になる
- これもcheck❦です❦
お疲れさまでした ? ←顔文字が導入されたみたい❦
トピックスターター 2018年10月17日 21:51
かうたっく さん
わいひら さん
ありがとうございました。これもかうたっくさんとわいひらさんのおかげです。
チェックポイントを確認してまさしくその通りだと思ってしまいました。
どうやら私はamp.cssに入れるコードをstyle.cssに入れるものと勘違いしたこと、次にコード自体が違かったこと。キャッシュの削除ができていなかったことが原因でした。(どうやら、cocoonの全てのキャッシュを削除だとampキャッシュの削除ができない、ampサイトでの反映をしなかった場合、AMPキャッシュの削除をすればよい。※間違っていたらすいません)
今回助けられたおかげで、すごく胸がすっきりしました。
絵文字かわいいです。本当にありがとうございました。
わいひら reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。