サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2020年3月8日 10:02
お世話になっております。
タイトル通りなのですが、㍶とモバイルとでサイドバーの表示と非表示を切り替えたいです。
具体的には、サイドバーを
【PC】トップページとカテゴリのページで非表示
【モバイル】すべての画面で表示
という風にしたいと考えています。
ウィジェットの表示/非表示の設定をいじってみましたが、思い通りの形にはたどり着けませんでした。
そこで、PCの特定のページだけCSSでサイドバーを非表示にすればいいのだろうとは考え付いたのですが、どのようなCSSを追加すればよいのかわからない状態です。
具体的なCSSのコードか、もしくは、より簡単な方法がありましたら、そちらをご教示いただけますと幸いです。
当サイト↓
https://eiter-hexe.com/
現在サイドバーは、すべてのページで表示してます。
PCのトップページは、最新の投稿から順に表示していくタイルカード3列のインデックスページになってます。
モバイルではヘッダーモバイルボタンを利用していて、画面上部に「検索」「ロゴ」「MENU(サイドバー)」の3つの項目が表示されるようにしており、MENUを選択することでサイドバーがスライドインするようにしています。
よろしくおねがいします。
2020年3月8日 17:48
PHPを書くスキルがないので、試しに、CSSで書いてみたコード。
body.front-top-page .sidebar,
body.category .sidebar {
display: none;
}
body.front-top-page .main,
body.category .main {
width: 100%;
}
試してみないと何とも言えず。
間違っているかもしれません。
参考程度・・・
コードが、ダサいかも・・
勉強しなきゃ・・自戒。
わいひら reacted
2020年3月8日 23:21
サイドバー非表示時に、メインカラムの幅が目一杯、広がっちゃうのが嫌なときは・・
body.front-top-page .sidebar,
body.category .sidebar {
display: none;
}
body.front-top-page .main,
body.category .main {
max-width: 860px;
margin-left: auto;
margin-right: auto;
}
わいひら reacted
Topic starter
2020年3月9日 05:14
leafytree様、ご返信ありがとうございます。
最初に掲示していただいたCSSを適用したところ、いい感じになりました。インカラムの幅がいっぱいに広がるのは目指していたものなので問題ありません。
ただ、まだ一点だけ問題がありまして、トップページから「次のページ」を押して2ページ目に移動すると、サイドバーが再び表示されてしまいました。
この点も解決できるような方法がありましたら教えていただきたいです。
よろしくおねがいします。
2020年3月9日 08:11
Eiter さん
そのコードじゃ、確かにそうなりますよね・・ ? ?
body.public-page .sidebar,
body.category .sidebar {
display: none;
}
body.public-page .main,
body.category .main {
width: 100%;
}
これだと、どうでしょう？
2020年3月9日 12:04
ああ、良かった、フォーラムにアクセスできるようになりましたね。
Eiter さん
body.public-page .mainだと、他のページでもサイドバーが非表示になってしまうようなので、
body.home.blog .sidebar,
body.category .sidebar {
display: none;
}
body.home.blog .main,
body.category .main {
width: 100%;
}
こっちの方がいいかもしれません。
どうも、セレクタが絞れなくて・・
何度もお手数をおかけします。 ?
わいひら reacted
2020年3月9日 16:24
やっばり、cssより、PHPの方が、スマートですよね。
みるみさん
もし、ご覧になっていたら、よろしくお願いします。
2020年3月9日 19:54
こちらのコードだとだめでしょうか？
.home .sidebar,
.category .sidebar {
display: none;
}
.home .main,
.category .main {
width: 100%;
}
多分このCSSセレクタでもいけるような気がする（※試してはいません）。
リフィトリー reacted
2020年3月9日 20:02
さっき、調べていたら、わいひらさんのコードと同じになりました。
PHPで書く必要もなさそうですね。
みるみさん 引っ張り出して、すみません。
ページと結びつけたいと、bodyタグも書いちゃったんですけど・・
2020年3月9日 20:19
Eiter さん
私が回答してしまったことで、より良い答えを、お伝えできないといけないなと・・
いつもズッコケてばかり、身の程知らずで、恐縮です。
2020年3月9日 21:49
みるみさん 引っ張り出して、すみません。
tmp/◯◯.phpをいじる方法ならすぐ思いついたのですが、functions.phpだけで気軽に書けるコードにすぐアレンジできなかったのと、is_mobile()はキャッシュを使うと意図しない表示になってしまうので書くのをやめました（苦い思い出あり）。
CSSがいいと思います！
2020年3月10日 10:41
具体的には、サイドバーを
【PC】トップページとカテゴリのページで非表示
【モバイル】すべての画面で表示
という風にしたいと考えています。
プラグインを停止してみるとどうなりますか？
それでもダメなら、親テーマで表示してみるとうまく表示されませんか？？？
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。