特典機能について

フッターモバイルボタンの固定表示を特定ページで非表示にしたい | Cocoonテーマに関する質問 | Cocoon フォーラム

サイト内検索
運営者(わいひら)は、骨の手術明けのためしばらく体調を優先して運営させていただきます。ですので、フォーラム負担軽減のため登録者のみ書き込めるようを制限をさせていただきます。フォーラム未登録の方はこちらの手順で登録を行ってください。予定としては12月前半まで実施させていただきます。
書き込みの前に以下の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. ブラウザ環境チェックツール

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

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

wpForoの解決済みリンク

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

wpForoのいいねリンク

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

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

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

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

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

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

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


shima
 shima
(@shima)
ゲスト
結合: 2年前
投稿: 21
Topic starter  

はじめまして!

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

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

 

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

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

追加したCSS

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

 

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

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

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

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


未解決
リフィトリー
(@leafytree)
メンバー Moderator
結合: 3年前
投稿: 6436
 

前略、shimaさん

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

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

shima
 shima
(@shima)
ゲスト
結合: 2年前
投稿: 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)
メンバー Moderator
結合: 3年前
投稿: 6436
 

shimaさん

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

 

 


わいひら 件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
結合: 4年前
投稿: 12932
わいひら - Facebookわいひら - Twitter
 

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


shima
 shima
(@shima)
ゲスト
結合: 2年前
投稿: 21
Topic starter  

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

 

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

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

https://loveor.cfbx.jp/

 

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

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


shima
 shima
(@shima)
ゲスト
結合: 2年前
投稿: 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)
メンバー Moderator
結合: 3年前
投稿: 6436
 

shimaさん

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

 

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

わいひら 件のいいね!
リフィトリー
(@leafytree)
メンバー Moderator
結合: 3年前
投稿: 6436
 

shimaさん

 

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

 

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

 

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


shima
 shima
(@shima)
ゲスト
結合: 2年前
投稿: 21
Topic starter  

リフィトリー様

 

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


shima
 shima
(@shima)
ゲスト
結合: 2年前
投稿: 21
Topic starter  

リフィトリー様

 

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

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

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


リフィトリー
(@leafytree)
メンバー Moderator
結合: 3年前
投稿: 6436
 

shimaさん

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

 

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


shima
 shima
(@shima)
ゲスト
結合: 2年前
投稿: 21
Topic starter  

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

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


リフィトリー
(@leafytree)
メンバー Moderator
結合: 3年前
投稿: 6436
 

shimaさん

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

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

わいひら 件のいいね!
shima
 shima
(@shima)
ゲスト
結合: 2年前
投稿: 21
Topic starter  

リフィトリー様

 

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

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

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


わいひらリフィトリー 件のいいね!
共有:
スポンサーリンク
SWELLと業務提携しています
WordPressテーマSWELL
わいひらをフォローする
おすすめサーバー(コスパ・バックアップ重視型)

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

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

サービス運営期間:3年

1年以上の契約をする場合は、クーポンコード入力でさらに50%割引キャンペーン中!
※BOX2 ~ BOX8プラン契約の場合

クーポンコード:PK4JK4RJ

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

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

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

サービス運営期間:3年

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

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

サービス運営期間:18年

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

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

サービス運営期間:5年

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

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

サービス運営期間:5年

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