サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2023年9月18日 18:46
不具合・カスタマイズ対象ページのURL： https://wp.dagyer.mydns.jp/
相談内容：ヘッダーメニューの表示がおかしい（iOS、Mac版Safariのみ）
不具合の発生手順：
ヘッダーメニューにFontAwesome5の絵文字をメニューの前に配置し、
サブメッセージを配置した場合に、上記環境でのみメニューの文字が表示されずに
サブメニューのみの表示になってしまいます。
Windows版及びMac版Chromeでは問題なく表示されています。
FontAwesome5の絵文字を配置しなければ問題なく表示されます（上記サイトの
メニュー3）
解決のために試したこと：
気になるのは、.item-labelクラスに当たっているdisplay: -webkit-box;
が上記ブラウザで対応できているかどうかが疑わしい点です。
何か対策がございましいたらご教示願います。
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：
----------------------------------------------
サイト名：test
サイトURL： https://wp.dagyer.mydns.jp
ホームURL： https://wp.dagyer.mydns.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バージョン：6.3.1
PHPバージョン：8.1.2-1ubuntu2.13
ブラウザ：Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36
サーバーソフト：Apache/2.4.57 (Ubuntu)
サーバープロトコル：HTTP/1.0
エンコーディング：gzip, deflate, br
言語：ja,en-US;q=0.9,en;q=0.8,zh-TW;q=0.7,zh;q=0.6
----------------------------------------------
テーマ名：Cocoon
バージョン：2.6.5.1
カテゴリー数：1
タグ数：0
ユーザー数：1
----------------------------------------------
子テーマ名：Cocoon Child
バージョン：1.1.3
style.cssサイズ：845バイト
functions.phpサイズ：203バイト
----------------------------------------------
Gutenberg：1
AMP：0
PWA：0
Font Awesome：5
Auto Post Thumbnail：0
Retina：0
ホームイメージ：/wp-content/themes/cocoon-master/screenshot.jpg
----------------------------------------------
ブラウザキャッシュ有効化：0
HTML縮小化：0
CSS縮小化：0
JavaScript縮小化：0
Lazy Load：0
----------------------------------------------
利用中のプラグイン：
----------------------------------------------
※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
2023年9月18日 20:01
おそらく、以下と同事象な気はします。
グローバルナビメニューが表示されるページとされないページがある
https://wp-cocoon.com/community/postid/70666/
上記トピックの事象は、FontAwesome＋Safariで起こるみたいですが、はっきりと分からず、未解決です。
わいひら reacted
Topic starter
2023年9月19日 11:46
いろいろ検索して、iOSやMac版Safariのサイト改竄防止措置で、CDNリンクタグに"integrity"属性が付いていないとブロックされるとの書き込みを見つけました。
試しに下記のコードをCocoon設定-アクセス解析・認証-フッター用コードに貼り付けたところ、表示されるようになりました。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
mk2様、いろいろとありがとうございました。Cocoonのコードにintegrity属性の追加をお願いできると良いのですが、、、。
これによって何か不具合が生じないか、検証を続けたいと思います。
参考URL: https://tetracalibers.net/blog/9
2023年9月19日 19:31
不具合・カスタマイズ対象ページのURL： https://wp.dagyer.mydns.jp/
こちらのページをFont Awesome 6ではないFont Awesome 5の状態で見せていただくことは可能でしょうか｡
CocoonではAMPページ以外ではCDNではなく同一ドメイン内のファイルを読み込んでいたかと思います。
例えば当サイトのFont Awesome 5ファイルで言えば以下のような感じです。
ttps://wp-cocoon.com/wp-content/themes/cocoon-master/webfonts/fontawesome5/css/all.min.css
CDNファイルではない上記のようなURLでもダメなのでしょうか。
Topic starter
2023年9月19日 19:57
わいひら様
返信ありがとうございます。
失礼しました。FontAwesomeのバージョンが違っていましたね。
試しにバージョン6.4.2のものを貼ってみましたが、問題ありませんでした。
現在は
ttps://wp.dagyer.mydns.jp/wp-content/themes/cocoon-master/webfonts/fontawesome5/css/all.min.css
をフッターのところに貼っております。これでも今のところ問題なく表示されております（Mac版Safari、iPad版Google Chrome共）。
This post was modified 1年前 by dagyer
わいひら reacted
2023年9月19日 20:06
現在は
ttps://wp-cocoon.com/wp-content/themes/cocoon-master/webfonts/fontawesome5/css/all.min.css
をフッターのところに貼っております。これでも今のところ問題なく表示されております（Mac版Safari、iPad版chrome共）。
フッターのこれも削除していただいてよろしいでしょうか
2023年9月19日 20:08
フッターのスタイル読み込みがなくてもヘッダーで添付画像のようにFont Awesome5のCSSを読み込んでいるのでアイコンは表示されるかと思います。
その状態でMac版Safari、iPad版chromeで表示されるか確認していただいてよろしいでしょうか。
Topic starter
2023年9月19日 20:13
フッターを削除しました。
やっぱり表示されません。最初の状態と同じですね。
わいひら様のキャプチャの後にフッターのURLを私のドメインに変えたのですが、その状態でも上手くいっていました。
なんでしょうね？書いてある位置のせいですか？
2023年9月19日 20:25
えぇ、そうなんですね。
だとしたらフッターでスタイルを読み込めばCDNとかintegrityとか関係ないんですかね。wp-cocoon.comドメインのCSSでもアイコンが表示されたということであれば｡
Topic starter
2023年9月19日 20:32
今、試しにフッターに
ttps://wp-cocoon.com/wp-content/themes/cocoon-master/webfonts/fontawesome5/css/all.min.css
を貼ってみました。
問題なく表示されるようになっていますね。
もしかしたらintegrityとは関係ないのかもしれません。ただ、症状が出るのがMacとiOSということなので、なんらかのセキュリティがらみかと思ったのですが、、、。
それと、現在はヘッダーとフッターで2回読み込んでいる形になっているのも気になります。フッターでのみになったらどうなるんでしょうか？
Topic starter
2023年9月19日 20:34
ヘッダーの読み込みの部分にintegrityを付けてみようかとも思ったのですが、ちょっと怖くて手をつけられていません。
Topic starter
2023年9月19日 22:53
このトピックスの最初に書いた、「気になるのは、.item-labelクラスに当たっているdisplay: -webkit-box;
が上記ブラウザで対応できているかどうかが疑わしい点です。」というのもやはり気になっていて、試しに追加CSSで
.navi .item-label {
display: block;
overflow: hidden;
}
とitem-labelクラスを上書きすると、正しく表示されるようです。
フッターへのFontAwesomeの追記は外してあります。
CSSにあまり詳しくないので、検討外れなら申し訳ありません。
わいひら reacted
2023年9月20日 12:24
@dagyer さん
お書きになった以下の CSS を削除し…
.navi .item-label {
display: block;
overflow: hidden;
}
代わりに以下の CSS を追加した場合、メニューは正常に表示されますか？
.navi .item-label,
.navi .item-description {
/* 初期化 */
-webkit-box-orient: initial;
display: initial;
-webkit-line-clamp: initial;
/* 修正内容 */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
This post was modified 1年前 by Akira
わいひら reacted
Topic starter
2023年9月20日 18:07
少し困ったことが起きました。
今朝iPadOSのシステムアップデートをかけ、17.0にしたのですが、その状態ではこれまでのような不具合が解消されてしまっていました。全く初期の状態でiPad版のSafariもChromeも同様に正常に表示されるようになっています。
ただ、Macは現状アップデートがありませんので、相変わらず表示に不具合が出たままです。
macOS Ventura 13.5.2です。
2023年9月20日 19:19
Akiraさんのコードを使用させていただいて修正してみました。
こちらのファイルで手動アップデートしてMacで確認していただくことは可能でしょうか。
------------------------------------------------
https://github.com/xserver-inc/cocoon
開発中の最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。
WordPressでの手動アップデート方法はこちら
https://wp-cocoon.com/manual-update-of-cocoon-theme/
------------------------------------------------
https://github.com/xserver-inc/cocoon/commit/d7631a84916b2f89bb1f866e49d0fd1ded7032ac#diff-b78be019f1dc6d57753ea900c3805b114cd53ab7c0db836cc081836df1b99b7a
dagyer reacted
Topic starter
2023年9月20日 19:35
わいひらさんから頂いたテーマをインストールして、その他をすべて元に戻して確認しました。Mac版Safariでも問題なく表示できています。
念の為環境情報を下記に載せておきます。
----------------------------------------------
サイト名：test
サイトURL： https://wp.dagyer.mydns.jp
ホームURL： https://wp.dagyer.mydns.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バージョン：6.3.1
PHPバージョン：8.1.2-1ubuntu2.13
ブラウザ：Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36
サーバーソフト：Apache/2.4.57 (Ubuntu)
サーバープロトコル：HTTP/1.0
エンコーディング：gzip, deflate, br
言語：ja,en-US;q=0.9,en;q=0.8,zh-TW;q=0.7,zh;q=0.6
----------------------------------------------
テーマ名：Cocoon
バージョン：2.6.5.3
カテゴリー数：1
タグ数：0
ユーザー数：1
----------------------------------------------
子テーマ名：Cocoon Child
バージョン：1.1.3
style.cssサイズ：845バイト
functions.phpサイズ：203バイト
----------------------------------------------
Gutenberg：1
AMP：0
PWA：0
Font Awesome：5
Auto Post Thumbnail：0
Retina：0
ホームイメージ：/wp-content/themes/cocoon-master/screenshot.jpg
----------------------------------------------
ブラウザキャッシュ有効化：0
HTML縮小化：0
CSS縮小化：0
JavaScript縮小化：0
Lazy Load：0
----------------------------------------------
利用中のプラグイン：
----------------------------------------------
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。