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カスタマイズ依頼

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

フッターモバイルボタンの固定表示を特定...
 
共有:
通知
すべてクリア

[解決済] フッターモバイルボタンの固定表示を特定ページで非表示にしたい

15 投稿
3 ユーザー
5 Reactions
2,586 表示
(@shima)
Eminent Member
結合: 5年前
投稿: 21
Topic starter  

はじめまして!

cocoonでサイトを作り始めましたshimaと申します。

わいひら様のマニュアル、フォーラム、cocoonの使い方を詳しく解説くださっている先輩方のおかげで、やりたい!と思ったことがすぐに見つかり、大変助かっております。ありがとうございます。

 

今回、CSSが反映されず、現象を調べても解消できなかったため質問させてください。

フッターモバイルボタンを表示しているのですが、TOPページ(page-id-2)で非表示にしたく、こちらのトピックを参照に非表示のCSSを追加しました。

追加したCSS

.page-id-2 .mobile-footer-menu-buttons{
display: none;
}

 

ボタンは非表示になったのですが、「モバイルボタンの固定表示」をオンにすると最下部に空白が表示されてしまいます(添付画像の赤枠部分)

固定表示をオフにしてみたら空白は出ませんでした。

固定表示をオンの場合、どのようなCSSを追加すれば空白が消せるでしょうか?

お手すきの際にご教示いただけますと幸いです。


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

前略、shimaさん

隙間時間に投稿しているので、間違っているかもしれませんが、以下だとどうでしょうか?

.page-id-2 ul.mobile-footer-menu-buttons.mobile-menu-buttons {
    display: none;
    min-height: 0;
}

   
(@shima)
Eminent Member
結合: 5年前
投稿: 21
Topic starter  

@leafytree 

リフィトリー様

 

お忙しい中、目をとめてくださりありがとうございます。

ご教示いただいたCSSをCocoon Child: style.cssに記載しましたが、空白が出たままでした。

 

もしかしたら初心者が変にCSS追加していて、影響を及ぼしている可能性もあるかも、と思いこのページに関するCSSを以下に記載いたします。

 

・当該ページのカスタムCSSに記載
/*PC表示時のグローバルメニュー、ヘッダー、フッター非表示*/
#navi,#header,#footer{
    display: none;
}

 

・子テーマのstyle.cssに記載
.page-id-2 navi cf {
    display: none;
}

.page-id-2 div.page-top {
    display: none;
}

.page-id-2 ul.mobile-footer-menu-buttons.mobile-menu-buttons {
    display: none;
    min-height: 0;
}

 

お時間ある際にご確認いただけますと幸いです。

よろしくお願いいたします。


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

shimaさん

ローカルのテストサイト等でなければ実際のページのURLをご提示いただけませんか?

 

 


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

もっもしかしたら、bodyの下に余白とかが入っているのかもしれません。
ただ、設定状態にもよるので詳しくは対象ページを見るのが確実です。
フォーラム冒頭にあったテンプレートに書き込んで貼り付けていただければ幸いです。


   
(@shima)
Eminent Member
結合: 5年前
投稿: 21
Topic starter  

リフィトリー様、わいひら様

 

お忙しい中ご確認ありがとうございます。

ページのURLはこちらです。

https://loveor.cfbx.jp/

 

わいひら様、この返信を後ほど消していただくことは可能でしょうか?

思いっきり趣味サイトのため恥ずかしく…申し訳ございませんが、よろしくお願いいたします。


   
(@shima)
Eminent Member
結合: 5年前
投稿: 21
Topic starter  

すみません、環境情報が漏れていました。

 

----------------------------------------------
サイトURL: https://loveor.cfbx.jp
ホームURL: https://loveor.cfbx.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.8.1
PHPバージョン:7.4.23
ブラウザ:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/94.0.4606.81 Safari/537.36
サーバーソフト:LiteSpeed
サーバープロトコル:HTTP/1.1
エンコーディング:gzip, deflate, br
言語:ja,en-US;q=0.9,en;q=0.8
----------------------------------------------
テーマ名:Cocoon
バージョン:2.3.6.3
カテゴリ数:3
タグ数:0
ユーザー数:2
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:1.1.3
style.cssサイズ:3172バイト
functions.phpサイズ:203バイト
----------------------------------------------
Gutenberg:1
AMP:0
PWA:0
Font Awesome:5
Auto Post Thumbnail:1
Retina:0
ホームイメージ:/wp-content/themes/cocoon-master/screenshot.jpg
----------------------------------------------
ブラウザキャッシュ有効化:1
HTML縮小化:1
CSS縮小化:1
JavaScript縮小化:1
Lazy Load:0
WEBフォントLazy Load:0
----------------------------------------------
利用中のプラグイン:
Advanced Editor Tools (previously TinyMCE Advanced) 5.6.0
Akismet Anti-Spam 4.2.1
Classic Editor 1.6.2
Custom Post Type UI 1.10.0
Elementor 3.4.5
Envato Elements 2.0.9
EWWW Image Optimizer 6.2.5
Limit Login Attempts Reloaded 2.23.2
Maroyaka WebClap for WordPress 1.6.3
Regenerate Thumbnails 3.1.5
WPForms Lite 1.7.0
Yoast Duplicate Post 4.1.2
----------------------------------------------


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

shimaさん

前述のコードの下に以下のコードを追加するとどうでしょうか?

 

.page-id-2 .mblt-footer-mobile-buttons {
    margin-bottom: 0;
}

   
わいひら reacted
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

shimaさん

 

WordPressを日本語環境で利用する場合は、プラグインの「WP Multibyte Patch」のインストールは必須なんだそうです。

 

インストールしておいた方が無難かもしれません。

 

あと、Cocoon設定の「エディター」タブで「Gutenbergエディターを有効にする」のチェックを外して「変更をまとめて保存」で確定すると、クラッシックエディターになるので、プラグインの「Classic Editor」は不要です。


   
(@shima)
Eminent Member
結合: 5年前
投稿: 21
Topic starter  

リフィトリー様

 

追加してみましたが、「固定表示では空白が表示され、固定表示解除すると空白はなくなる」と現象は一緒でした。


   
(@shima)
Eminent Member
結合: 5年前
投稿: 21
Topic starter  

リフィトリー様

 

プラグインの御指南までありがとうございます!

早速「WP Multibyte Patch」のインストール、「Gutenbergエディターを有効にする」のチェックを外し「Classic Editor」を削除いたしました。

ご親切にありがとうございます。


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

shimaさん

高速化設定をOFFにしてください。

 

高速化設定を無効にするにはこちら。
https://wp-cocoon.com/theme-trouble/


   
(@shima)
Eminent Member
結合: 5年前
投稿: 21
Topic starter  

色々と漏れており申し訳ございません。

高速化設定をOFFにいたしました。


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

shimaさん

クラス間の半角の空白は要らなかったようです。(子孫セレクタではなく、複数セレクタでした)

.page-id-2.mblt-footer-mobile-buttons {
    margin-bottom: 0;
}
This post was modified 3年前 by リフィトリー

   
わいひら reacted
(@shima)
Eminent Member
結合: 5年前
投稿: 21
Topic starter  

リフィトリー様

 

空白なくしたところ、無事に表示されなくなりました!

ありがとうございます、大変助かりました。

お忙しい中早々にご確認くださり、深く感謝しております。


   
共有:

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

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

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

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

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

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

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

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