サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Cocoonテーマに関する質問
15
投稿
2
ユーザー
6
Likes
340
表示
Topic starter
2023-10-11 13:06
お世話になります。
サーチコンソールをチェックしていたところ
「重複しています。ユーザーにより、正規ページとして選択されていません」のエラーが増えておりました。
このように「?fpc」等のパラメーターが付いたページが増えております。
cocoonが原因かわからないのですが、解決方法ご存じありませんでしょうか。
何卒よろしくお願いします。
2023-10-11 16:18
「重複しています。ユーザーにより、正規ページとして選択されていません」をクリックすれば、詳細な内容が書かれているはずです。そこには何と書かれているでしょうか？
Google の公式の説明では、「エラーではなく、意図したとおりに機能しています」と言っています。
参考：重複していますが、ユーザーが正規ページとして選択していません
ただ、<head> に何かお書きになっていますか？
<head> に以下の HTML があるために、<head> がめちゃくちゃです。そのため、<link rel="canonical"> によるページの正規化に不安があります。
<body ontouchstart="">
<div id="wrapper">
<div class="box"></div>
</div>
</body>
This post was modified 7か月前 by Akira
わいひら reacted
Topic starter
2023-10-12 12:46
お世話になります。
誠にありがとうございます！仕様でしたか、安心しました。
headですが、Iphoneですと、2回タップしないとリンクが開かないため
こちらの記事を参考に入れてみたのですが・・・
Topic starter
2023-10-12 12:49
@akira すいません、見落としておりました。
クリックしてみますと
「これらのページはインデックス登録されていないか、Google で配信されません」といった表示がされます。
また、このように８月から増えているのが気になりますが・・・。
2023-10-12 13:38
@hanbei3104 さん
headですが、Iphoneですと、2回タップしないとリンクが開かないため
こちらの記事を参考に入れてみたのですが・・・
参考記事に書かれている HTML は、<head> に書くものではないです。<body> に ontouchstart を書けばいいよと書かれています。Cocoon で同じことを行う場合は、子テーマの functions.php に以下のコードを書きます。
add_filter( 'code_minify_call_back', function( $html ) {
return str_replace( '<body', '<body ontouchstart=""', $html );
});
ただし、この <body> に ontouchstart を書く方法はおすすめしません。
1 番良い方法は、CSS で :hover を書く際に、@media を使い :hover に対応している時のみ :hover を適用することです。
@media (hover: hover) {
a:hover {
background: yellow;
}
}
参考ページ
- hover - CSS: カスケーディングスタイルシート | MDN
- 【CSS】まだホバー時のスタイルを :hover だけで指定してるの？
- The Annoying Mobile Double-Tap Link Issue
クリックしてみますと
「これらのページはインデックス登録されていないか、Google で配信されません」といった表示がされます。
そこに「詳細」ボタンがないでしょうか？クリックすれば、公式の説明を確認できると思います。例えば、「代替ページ（適切な canonical タグあり）」の場合は、代替ページ（適切な canonical タグあり）にリンクされています。
添付された画像で確認できる URL は全てパラメータが付いているため、問題ないようには思えます。
This post was modified 7か月前 2回 by Akira
わいひら reacted
Topic starter
2023-10-12 15:23
@akira お世話になります。
ご丁寧に本当にありがとうございます！
今見返してますと
<body ontouchstart="">
<div id="wrapper">
<div class="box"></div>
</div>
</body>
こちら、どのサイトからとってきたか、同じのがなくて、おそらく、先ほどのサイトだと思うのですが・・・。
では、これを削除し、子テーマのcss最下部で
@media (hover: hover) {
a:hover {
background: yellow;
}
}
こちらを入れてみますm(__)m
添付画像のように詳細を見るとを押しますと、こちらのサイトにリンクされていますね。
代替ページ（適切な canonical タグあり）のようでした。問題なさそうですね(;'∀')
https://support.google.com/webmasters/answer/7440203#duplicate_page_without_canonical_tag
Topic starter
2023-10-12 15:26
@akira すいません、
@media (hover: hover) {
a:hover {
background: yellow;
}
}
こちら入れてみたところ、マウスをリンク近づけると黄色になってしまうので、一度外しています。
こちらは、Iphoneスマホで２回タップしないと反応しない問題を解決するようなものなのでしょうか？
2023-10-12 15:44
@hanbei3104 さん
こちら入れてみたところ、マウスをリンク近づけると黄色になってしまうので、一度外しています。
こちらは、Iphoneスマホで２回タップしないと反応しない問題を解決するようなものなのでしょうか？
解決するものですが、私が提示した CSS はあくまで一例です。
どのリンクで 2 回タップしないと開かないのか分かりませんが、そのリンクの :hover を @media で囲めば解決すると思います。
また、私が提示した CSS は iPad では不十分でした。こちらの CSS がよりいいです。
@media (hover: hover) and (pointer: fine) {
/* ここに:hoverを使ったCSSを書きます */
/* 以下はあくまで一例です */
a:hover {
background: yellow;
}
}
わいひら reacted
Topic starter
2023-10-12 15:44
@akira 度々申し訳ございません。
こちらの記事でした。
https://nldot.info/if-you-dont-touch-the-iphone-twice-and-the-link-doesnt-fly-how-do-you-handle-it/
こちらの記事に今入れている
<body ontouchstart="">
<div id="wrapper">
<div class="box"></div>
</div>
</body>
このタグが書いておりまして、これを入れたところ、Iphone２回タップ問題は解決されたはずです。
ですので、残しておきたいところではありますが、、、SEO等で問題がありますでしょうか。
2023-10-12 15:49
@hanbei3104 さん
問題があります。HTML の仕様で <head> の子要素に <body> は書けません。現在は <head> の子要素に <body> があるために、<head> がめちゃくちゃです。
どうしても ontouchstart がいい場合は、#74584 で書いたように子テーマの functions.php にコードを追加します。
This post was modified 7か月前 2回 by Akira
わいひら reacted
Topic starter
2023-10-12 15:54
@akira ありがとうございます！
＞＞どのリンクで 2 回タップしないと開かないのか分かりませんが
こちらなのですが、ほぼすべてのリンク、主にアフィリエイトリンクが反応しません。
頂いたcssを子テーマのcss最下部に入れるだけでいいのでしょうか。黄色に光る部分は削除しても大丈夫なのでしょうか。
＞＞どのリンクで 2 回タップしないと開かないのか分かりませんが、そのリンクの :hover を @media で囲めば解決すると思います。
こちらですが、個別に対応する感じなのでしょうか。ちょっとやり方がわからないのですが。。。
度々申し訳ないですm(__)m
css入れてみました。うまく機能しているように思います。
This post was modified 7か月前 by hanbei3104
2023-10-13 19:26
@hanbei3104 さん
こちらですが、個別に対応する感じなのでしょうか。
そうですね。2 回タップが必要なリンクがどこにあるのか分かりませんが、そのリンクの CSS を変更すればいいと思っていました。
また、現在お書きになっている CSS は想定していませんでした。2 回タップが不要になったとのことですが、なぜこれで機能するか分かりません。
@media (hover: hover) and (pointer: fine) {
/* ここに:hoverを使ったCSSを書きます */
/* 以下はあくまで一例です */
a:hover {
}
}
本題とは全く関係ありませんが、3 点気付いたことがあります。
その 1 ：<p> が閉じていない箇所があります。目次の上の部分です。空の <a> が子要素のため、<p> も <a> も削除すればいいように思えます。
<p> <a id="toctop"></a>
その 2 ：<head> の先頭あたりにユニバーサルアナリティクスのコードがあります。ユニバーサルアナリティクスは終了しましたが、コードは必要でしょうか？
その 3 ：以下のファイルが見つからないとコンソールでエラーが出ています。現在の Cocoon には存在しないファイルです。何かカスタマイズをされていますか？
https://context-japan.co.jp/ryokin/wp-content/themes/cocoon-master/js/barba-custom.js?ver=6.3.2
This post was modified 7か月前 2回 by Akira
わいひら reacted
Topic starter
2023-10-13 21:46
@akira 誠にありがとうございます！
css書き方間違っていますでしょうか？黄色に光る必要はないので、外したのですが・・・
今のところ、2回タップ問題は起きていないようです。
また、私の方では、<p> は確認できませんでした。
>> <a id="toctop"></a>
こちらなのですが、WordPessのアンカーリンクボタンを設置するとこのように出ますね。</a>は必要な気がしますが・・。
ユニバーサルアナリティクスのコードは不要ですね(;^_^A
削除します。
＞＞以下のファイルが見つからないとコンソールでエラー
うーん。恐らく、高速化した時に何かひっかかっているのかもしれません。
こちらを適用してみたのですが・・・。
https://qiita.com/Simmon/items/cb9c7f85d7f21cb267ed
実際に読み込みが早くなった感じがしましたので、このままにしております。
2023-10-14 13:19
@hanbei3104 さん
css書き方間違っていますでしょうか？黄色に光る必要はないので、外したのですが・・・
今のところ、2回タップ問題は起きていないようです。
a:hover {} だけをお書きになっているのが気になります。追加した CSS を削除すると 2 回タップが必要になるのでしょうか？
また、私の方では、<p> は確認できませんでした。
添付した画像にあるように <p> の開きタグのみがあります。
こちらなのですが、WordPessのアンカーリンクボタンを設置するとこのように出ますね。</a>は必要な気がしますが・・。
「WordPessのアンカーリンクボタン」が何か分かりませんが、<a> の使い方が間違っています。MDN に「<a> の内容は、リンク先を示すものであるべきです。」と書かれているように、<a> には href 属性と <a> の動作を示すテキストが必要です。そのどちらもお書きになっていません。
参考：<a>: アンカー要素 - HTML: ハイパーテキストマークアップ言語 | MDN
また、スマホで見た時の目次へのリンクをお作りになっているようですが、私であれば目次の id の rtoc-mokuji-wrapper を使います。
こうなっているのを…
<a class="css-1sb9v3o1" href="#toctop">目次</a>
私であればこのように変更し、また <p> も <a> も削除します。
<a class="css-1sb9v3o1" href="#rtoc-mokuji-wrapper">目次</a>
うーん。恐らく、高速化した時に何かひっかかっているのかもしれません。
こちらを適用してみたのですが・・・。
参考にされた記事の 2. jsファイルの読み込み には、get_template_directory_uri() が書かれています。これは親テーマへのパスです。子テーマに barba-custom.js を作られたのなら、get_stylesheet_directory_uri() に変更する必要があります。
また、3. テーマファイルのHTML書き換え はされましたか？
尚、「ページ遷移体感速度が5000兆倍になった」と大げさに書かれていますが、記事に書かれている方法では表示速度は間違いなく遅くなり PageSpeed Insights のスコアは悪くなります。
わいひら reacted
Topic starter
2023-10-14 23:25
ありがとうございます。
やはり。2回タップ問題が再発してきました。
全てのリダイレクトリンクが2回タップが必要になるようです。
ですので、個別に対応するより、functionにいれたほうがいいかもしれません。
ですが、ちょっと私のスキルではわかりません。
実際に早くなっているようなので、このままにしておりますが・・・。
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。