Cocoonフォーラム

2018.02.102023.01.25

書き込みの前に以下の3点をご確認ください。

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

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

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

相談内容：

不具合の発生手順：

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

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

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

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

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

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

共有:

通知

すべてクリア

[解決済] スキンnaturalでのモバイルヘッダーボタンの表示について

不具合報告

最新の投稿 : リフィトリー 3年前

7 投稿

2 ユーザー

5 Reactions

705 表示

未解決

RSS

SuSu

(@SuSu)

New Member

結合: 3年前

投稿: 3

Topic starter 2021年8月22日 13:10

いつもお世話になっております。

こちらには初めて質問させていただきます。

初めて「Natural」というスキンを使用してみたのですが、モバイル表示でのヘッダーボタンが画像のようになり、うまく表示されずに困っています。

コクーン設定の方もモバイルヘッダー表示になっていますし、外観→メニューからの設定もアイコンの設定も全て完了しています。

他のブログでは違うスキンを利用していてこちらの設定とCSSで背景色と文字色の設定をして、モバイルボタンはちゃんと表示されるのですが

スキンの問題でしょうか？

こちらのスキンが可愛くて、使用したいのでよろしくお願い致します。

SuSu

(@SuSu)

New Member

結合: 3年前

投稿: 3

Topic starter 2021年8月22日 13:12

----------------------------------------------
サイト名：猫と田舎暮らし
サイトURL： http://necotoinakagrashi.lohasbeauty.net 
ホームURL： http://necotoinakagrashi.lohasbeauty.net 
コンテンツ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
スキン：/wp-content/themes/cocoon-master/skins/natural-green/style.css
WordPressバージョン：5.8
PHPバージョン：7.4.13
ブラウザ：Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.1.2 Safari/605.1.15
サーバーソフト：Apache
サーバープロトコル：HTTP/1.1
言語：ja-jp
----------------------------------------------
テーマ名：Cocoon
バージョン：2.3.5.1
カテゴリ数：1
タグ数：0
ユーザー数：1
----------------------------------------------
子テーマ名：Cocoon Child
バージョン：1.1.3
style.cssサイズ：1025バイト
functions.phpサイズ：203バイト
----------------------------------------------
Gutenberg：1
AMP：0
PWA：0
Font Awesome：4
Auto Post Thumbnail：0
Retina：0
ホームイメージ：/wp-content/themes/cocoon-master/screenshot.jpg
----------------------------------------------
ブラウザキャッシュ有効化：0
HTML縮小化：0
CSS縮小化：0
JavaScript縮小化：0
Lazy Load：0
WEBフォントLazy Load：0
----------------------------------------------
利用中のプラグイン：
----------------------------------------------

リフィトリー

(@leafytree)

Illustrious Member Moderator

結合: 6年前

投稿: 6845

2021年8月22日 15:30

前略、SuSuさん

先ず、大前提として、ヘッダーモバイルボタンに、メニューボタンを設定するときは、パソコン表示用のグローバルメニューを先に作成してください。

パソコン用のヘッダーメニュー（グローバルメニュー）が作成されていないと、モバイルボタンにメニューボタンは表示されません。

次に子テーマにお書きになっている以下のコードを

/*ヘッダーの文字と背景の色を変える*/
.search-menu-button.menu-button,
.navi-menu-button.menu-button{
background-color: #86cfcf;
color: #FFFFFF;
}

.logo-menu-button.menu-button{
background-color: #86cfcf;
}

以下のものに差し替えてみてください。

/*モバイルヘッダーメニューだけの背景色を変更する*/
.mobile-header-menu-buttons.mobile-menu-buttons,
.mobile-header-menu-buttons.mobile-menu-buttons .menu-button > a {
    background-color: #86cfcf;
}

/*ヘッダーモバイルボタンのアイコンの色とキャプションの色のカスタマイズ*/
.mobile-header-menu-buttons .menu-icon,
.mobile-header-menu-buttons .menu-caption {
    color: #fff;
}

This post was modified 3年前 by リフィトリー

わいひら reacted

リフィトリー

(@leafytree)

Illustrious Member Moderator

結合: 6年前

投稿: 6845