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

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

グローバルメニュー(PC)の表示位置の...
 
共有:
通知
すべてクリア

[解決済] グローバルメニュー(PC)の表示位置の修正と固定表示の動き修正について/モバイルボタンメニューの表示位置について

16 投稿
2 ユーザー
1 Reactions
2,379 表示
(@kuma_misako)
Active Member Registered
結合: 5年前
投稿: 15
トピックスターター  

こちらで勉強させてもらっています。質問失礼します。

数日間悩みに悩んでおります。

 

【PC用のグローバルメニューについて】

うまく説明できるか自信がないのですが、

現在のPC表示の際のグローバルメニューなのですが

0)表示幅は画面横いっぱいではない。

1)ページを開いたとき→画像の下の横位置真ん中に表示される

2)下にカーソルを動かしたとき→一度消えて、横位置右上に表示される

3)上にカーソルを動かしたとき→そのまま表示し、一番上まで行くとトップ画像下の横位置真ん中に戻る。

 

<<やりたいこと>>

1.2)のときに一旦消えさせたくない
2.2)のときに右ではなく横位置真ん中に表示させたい
   → 「itemtype=" https://schema.org/WPHeader "」このあたりがおかしそうなのですが
      どこで拾ってきたものなのかがわからないのです。
      プラグインもほとんど入れていません。
3.3)トップ画像が見え始めたらトップ画像下に固定させたい(一番上までいかなくてもこの位置で固定させたい)
4.グローバルメニューの横幅をページ横幅いっぱいにしたい

 

【モバイルボタンメニューの表示位置について】

モバイルボタンで#menuを選択すると表示の位置が左端に寄りすぎます。
他の方々はなっていないようなので、これまた壊してしまった感があり、困っております。

下記で対象しようかと思いましたがうまくいきません。

navi-menu-button{
padding-left: 100px;
}

 

どうぞよろしくお願いいたします。

 

<<URLなどの情報>>

----------------------------------------------
サイト名:
サイトURL: http://wordpress.kumasan.info
ホームURL: http://wordpress.kumasan.info
コンテンツURL:/wp-content
インクルードURL:/wp-includes/
テンプレートURL:/wp-content/themes/cocoon-master
スタイルシートURL:/wp-content/themes/cocoon-child-master
子テーマスタイル:/wp-content/themes/cocoon-child-master/style.css
WordPressバージョン:5.3.2
PHPバージョン:7.3.10
ブラウザ:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.149 Safari/537.36
サーバーソフト:Apache
サーバープロトコル:HTTP/1.1
エンコーディング:gzip, deflate
言語:ja,en-US;q=0.9,en;q=0.8
----------------------------------------------
テーマ名:Cocoon
バージョン:2.1.2.1
カテゴリ数:1
タグ数:0
ユーザー数:1
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:1.1.0
style.cssサイズ:829バイト
functions.phpサイズ:12947バイト
----------------------------------------------
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
JavaScript(フッター):1
----------------------------------------------
利用中のプラグイン:
Shortcodes Ultimate 5.7.0
SiteGuard WP Plugin 1.4.3
----------------------------------------------


   
(@kuma_misako)
Active Member Registered
結合: 5年前
投稿: 15
トピックスターター  

今気づきましたが、エラーがでておりました。

これが問題になっているのでしょうか。

とはいえ、、
このエラーがなんで出ているのかも分からない状態です。

どうぞよろしくお願いいたします。

 

この投稿は5年前ずつkuma_misakoに変更されました

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

案内にもありますように、環境情報をいただければと思います。
https://wp-cocoon.com/theme-report/
出来れば、以下の最新版にアップデートして試してみていただけると幸いです。
------------------------------------------------
https://github.com/yhira/cocoon
最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。

FTPでのアップデート方法はこちら。
https://wp-cocoon.com/ftp-update/
------------------------------------------------

デベロッパーツールのコンソールエラーは、今回の件とは関係ないと思います。
それはおそらく最新版(開発版)でも修正している部分だと思います。


   
(@kuma_misako)
Active Member Registered
結合: 5年前
投稿: 15
トピックスターター  

わいひらさん

ありがとうございます。

先ほど新しいバージョンで試してみました。いくつか改善されました!!
ご対応ありがとうございます。
(現状は下の方にあります)

 

貼り付ける内容はこちらで合っていますでしょうか。。

3月13日にしたcocoon導入はバージョン2.1.2.1
30日朝の現在でバージョン2.1.3.。

本当にありがとうございます。
こまめに更新していきます。

----------------------------------------------
サイト名:石垣島クマさんのダイビングショップ
サイトURL: http://wordpress.kumasan.info
ホームURL: http://wordpress.kumasan.info
コンテンツURL:/wp-content
インクルードURL:/wp-includes/
テンプレートURL:/wp-content/themes/cocoon-master
スタイルシートURL:/wp-content/themes/cocoon-child-master
子テーマスタイル:/wp-content/themes/cocoon-child-master/style.css
WordPressバージョン:5.3.2
PHPバージョン:7.3.10
ブラウザ:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.149 Safari/537.36
サーバーソフト:Apache
サーバープロトコル:HTTP/1.1
エンコーディング:gzip, deflate
言語:ja,en-US;q=0.9,en;q=0.8
----------------------------------------------
テーマ名:Cocoon
バージョン:2.1.3
カテゴリ数:1
タグ数:0
ユーザー数:1
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:1.1.0
style.cssサイズ:829バイト
functions.phpサイズ:12947バイト
----------------------------------------------
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
JavaScript(フッター):1
----------------------------------------------
利用中のプラグイン:
Shortcodes Ultimate 5.7.0
SiteGuard WP Plugin 1.4.3
----------------------------------------------

 

最新バージョンでの動きはこちらになりました。

コンソールエラー
  同じエラーが引き続き出ております。
  ヘダーの固定を外すとエラーがなくなります。

 

PC表示の際のグローバルメニュー

0)表示幅:ページを開いた際(トップ画像下に表示の際)は両端に空白。カーソルを動かすと全幅表示
    → 最初に開いた時も全幅表示にしたいです。

1)表示位置
  →常に真ん中表示になりました!悩んでいたのがウソのようです。ありがとうございます!

2)下にカーソルを動かしたとき:一度消えて、横位置右上に表示される
      → 一旦消えるのをなくしたいです。

3)上にカーソルを動かしたとき:そのまま画面上に表示し続け、一番上まで行くとトップ画像下の横位置真ん中に戻る。
     →トップ画像が見え始めたらトップ画像下に固定したいです。(一番上までいかなくてもこの位置で固定させたい)

 

モバイルボタンメニューの表示位置

変わらず、モバイルボタンで#menuを選択すると表示の位置が左端に寄ってしまいます。

下記で対象しようかと思いましたがうまくいきません。

navi-menu-button{
padding-left: 100px;
}

 

別件で恐縮なのですが、更新についてお願いです。
zipファイルを解凍した際、
ファイルの更新日は全て3月29日朝3時頃になっており、
FFFTPで「新しければ上書き」をしても全てが上書きとなりました。
http://aeteyokatta.com/zip/ こちらを試してみましたが同じでした。
今後こまめに更新をしたいと思っていますので、
何か方法があればお手すきの際に
https://wp-cocoon.com/ftp-update/ に書いておいていただけたら幸いです!

 

 


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

別件で恐縮なのですが、更新についてお願いです。
zipファイルを解凍した際、
ファイルの更新日は全て3月29日朝3時頃になっており、
FFFTPで「新しければ上書き」をしても全てが上書きとなりました。
http://aeteyokatta.com/zip/ こちらを試してみましたが同じでした。
今後こまめに更新をしたいと思っていますので、
何か方法があればお手すきの際に
https://wp-cocoon.com/ftp-update/ に書いておいていただけたら幸いです!

フォーラムの案内にありますように、1つに複数の内容を書いてしまうと、わけがわからなくなってしまうので、出来れば新たなトピックに書いていただけると助かります。

1つのトピックにつき1つの質問を書き込んでください


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

モバイルボタンメニューの表示位置

変わらず、モバイルボタンで#menuを選択すると表示の位置が左端に寄ってしまいます。

下記で対象しようかと思いましたがうまくいきません。

navi-menu-button{
padding-left: 100px;
}

出来ればこちらも新しいトピックを立てて質問していただければと思います。


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

コンソールエラーについては修正しておきました。
------------------------------------------------
https://github.com/yhira/cocoon
最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。

FTPでのアップデート方法はこちら。
https://wp-cocoon.com/ftp-update/
------------------------------------------------


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

その他については、文章だけでは伝わりづらいので、それぞれスクリーンショット画像とともに書き込んでいただければと思います。


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

functions.phpサイズ:12947バイト

かなりカスタマイズされているようですけど、どんなカスタマイズをされているのでしょうか。
今回の現象がカスタマイズに起因しないかの切り分けのためにも、カスタマイズなしの状態にしていただけると助かります。
独自カスタマイズに起因する不具合の場合は、サポート対象外となるので。


   
(@kuma_misako)
Active Member Registered
結合: 5年前
投稿: 15
トピックスターター  

わいひらさん

おはようございます。
いろいろとご伝授ありがとうございます。

コンソールエラーについてご対応ありがとうございます!!
無事にエラーが一切出なくなりました。

 

functions.phpサイズ:12947バイト

についてですが、

2つの内容を追加しておりました。。
ですが、おっしゃる通りですので1つ(1枚目の画像をアイキャッチに)は削除しました。
ですが、もう1つは削除すると逆に壊れてしまいますので、残しました。

・残したもの
特定の記事の自動整形をさせない(投稿ページで自動整形の有無を選択)
https://pera-lab.com/archives/1508

 

<<現在の情報(変更があると思われる部分のみ)>>
----------------------------------------------
テーマ名:Cocoon
バージョン:2.1.3.1
カテゴリ数:1
タグ数:0
ユーザー数:1
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:1.1.0
style.cssサイズ:829バイト
functions.phpサイズ:4825バイト
----------------------------------------------

 

言葉で説明できなかった部分ですが、
画像にしました。
あと、うまく説明できている自信がないので動画にもしました。

http://wordpress.kumasan.info/wp-content/themes/cocoon-child-master/img/menue.mp4

 

残りの2点については
表示については頑張ってみます。
zipファイルについては落ち着いたら書かせていただきます!

 

お忙しいところいろいろとすみません。
よろしくお願いいたします。


   
(@kuma_misako)
Active Member Registered
結合: 5年前
投稿: 15
トピックスターター  

それぞれをと言われたのを見逃しておりました。

1)メニューを横幅いっぱいにしたい

 トップ画像と比較するとメニューの幅が小さいのです。

 できればトップ画像と横幅を合わせたいです。

 見た目だけの問題なので優先度は低めです。

 

この投稿は5年前 3回ずつkuma_misakoに変更されました

   
(@kuma_misako)
Active Member Registered
結合: 5年前
投稿: 15
トピックスターター  

2)メニューが表示されないタイミングがある

  画面下にカーソルを動かした後、トップ画像が画面から見えなくなるタイミングでメニューが消えます

この投稿は5年前ずつkuma_misakoに変更されました

   
(@kuma_misako)
Active Member Registered
結合: 5年前
投稿: 15
トピックスターター  

2)続き

 更に下に表示するとメニューが画面最上に固定されます

 →消える瞬間をなくしたいです。


   
(@kuma_misako)
Active Member Registered
結合: 5年前
投稿: 15
トピックスターター  

3-1)メニューが一瞬で移動する

  画面上位にメニューが表示されている状態でページ上を表示させるようにカーソルを動かすと、トップ画像が表示されてもメニューは画面上位に表示され続けます。

この投稿は5年前ずつkuma_misakoに変更されました

   
(@kuma_misako)
Active Member Registered
結合: 5年前
投稿: 15
トピックスターター  

3-2)ページの最上まで表示をすると、メニューはトップ画像の下に移動します。

   → ページ最上を表示しなくとも、
     トップ画像が表示されている間は常にトップ画像下にメニューを位置したいです
     (急に動くので、見る人が困る気がしています)


   
(@kuma_misako)
Active Member Registered
結合: 5年前
投稿: 15
トピックスターター  

一度 cocoonをまっさらにし直して、ひとつずつやってみることにしました。

1)私が壊したようです。頑張って直してみます。

2)cocoonの仕様のようですので、あきらめます。

3)cocoonの仕様だとヘダー画像が大きいと下から上に表示をしていった際ヘダー画像が見えた瞬間に表示が飛んでしまうようなので、別で考えます!!

とりあえず、

一番悩んでいたPCメニューが真ん中に表示されない件が直ってくれたので、頑張ってみます!!

 

わいひらさん

大変ありがとうございました。お手数をおかけしました。


   
わいひら reacted
共有:

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

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

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

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

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

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

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

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