サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
このフォーラムには初心者の方も多く参加されています。質問に不慣れな方も安心して相談できるよう、できるだけ穏やかな言葉でご案内いただけますと幸いです。
通知
すべてクリア
トピックスターター 2026年11月13日 14:21
いつもお世話になっています。
ページ内リンクを押したときの移動先の位置について、改善できないかご相談させてください。
現在の状況ですが、
・Cocoon設定の「ヘッダーを固定する」設定をONにしてヘッダーが追従する設定にしている
・この設定にした場合、目次をクリックした際に見出し部分が追従してきたヘッダーに隠れてしまうため、以下のCSSを設定して見出しが隠れないようにしている（原因は不明ですが、上手く行かない場合もあります）
/* 目次クリック時の見出しのズレ（隠れる現象）を解消 */
:target {
padding-top: 130px;
margin-top: -130px;
}
・目次をクリックした場合は（ある程度は）見出しがヘッダーに隠れずに表示されるようになったが、ページ内リンク（アンカーリンク）の移動先を目次（#toc）に指定して移動場合、目次のレイアウトが乱れてしまうようになった（画像・サンプルページ参照）。
質問は以下のとおりです。
①アンカーリンクで目次に飛んだときにレイアウトが崩れない方法はないでしょうか？（追加したCSSを修正する、新たにCSSを追加する、#toc以外の指定方法でリンク先を指定する等）
②できればCSSを使わずとも見出しがヘッダーに隠れないようになれば嬉しいのですが、そのような機能の追加は難しいでしょうか。
お忙しい所恐縮ですが、よろしくお願いいたします。
このトピックは20時間前 4回からTに変更されました
2026年11月13日 14:52
●原因
今回の原因は、CSSの記述ミスで、 :target の指定範囲が広すぎることです。
:target は、ページ内リンクをクリックしたときに、リンク先として指定された要素に適用されるCSSです。
例えば、今回のHTMLには次のようなリンクがあります。
<a href="#toc">目次へ飛ぶ</a>
このリンクをクリックすると、id="toc" が設定された目次の場所にジャンプします。
このとき、目次の要素がCSSの :target に該当するため、実質的に #toc:target となります。
同じように、見出し1へのリンクをクリックすれば #toc1:target、見出し2へのリンクをクリックすれば #toc2:target となります。
今回のCSSは次の指定になっています。
:target {
padding-top: 130px;
margin-top: -130px;
}
このように :target の前に親クラスなどの条件がないため、目次も見出しも、ページ内リンクの移動先であればすべて対象になってしまいます。
本来は、追従ヘッダーに見出しが隠れないようにするための余白調整ですが、目次へのジャンプでも同じCSSが適用されるため、目次の上側に余白が追加され、レイアウトが崩れてしまいます。
つまり、今回の問題は、見出しだけに適用したかった余白調整が、#toc:target のように目次にも適用されてしまうことが原因です。
これを機に少しCSSの基礎を勉強をしましょう。
この投稿は20時間前 4回ずつ大門未知子に変更されました
わいひら reacted
2026年11月13日 17:53
@chu-ya ご返信ありがとうございます。
CSSに関しては勉強してみたものの、どうしても根本的な理解が及ばず、有識者の方が公開してくださっているCSSをそのままコピーするだけになっていました（今回のCSSもコピーさせていただいたものです）。
CSSの中身を理解しないままお借りするのは良くないですね。今後は気をつけたいと思います。お手数をおかけしました。
2026年11月13日 18:02
改善案を出していただき、ありがとうございます。
xxxのところにとりあえず10と入れて、追加CSSのところに設置してみたのですが、変化がありませんでした。
設置方法が間違っているのではないかと思うのですが、おかしなところがあれば教えていただけるとありがたいです。
2026年11月13日 18:15
すみません、出先で移動中で、スマホなことと、CSSが何らかの機能で縮小化されているようで、確認ができません。
①
xxxのところにとりあえず10と入れて
上記は、pxやemなどの単位は入力なさっていますでしょうか？
②
/* 目次クリック時の見出しのズレ（隠れる現象）を解消 */
:target {
padding-top: 130px;
margin-top: -130px;
}
上記は、削除なさっていますでしょうか？
【追記】
とりあえず、私の環境で簡単に試してみましたが、上手くいくようです。
【追記2】
今、ご提示のページを確認してみると、私からは、以前の「:target」のCSSが残っていて、私の提示したものはないように見えます。
ページキャッシュが効いてますね（LiteSpeed Cache）。
少なくとも、お問い合わせ時は、CSSの縮小化やページキャッシュは無効化していただきたいです。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
この投稿は16時間前 3回ずつｍｋ２に変更されました
わいひら reacted
2026年11月13日 18:49
丁寧にお答えくださりありがとうございます。
結果的に、無事に解決することができました。本当にありがとうございました 😭
どうやら、もともと入れていた追加CSSを削除していなかったのが原因で上手く動作しなかったようです。
また、キャッシュは随時削除していたのですが、動かない原因を調べるため、教えていただいたCSSを一時的に無効化していたため表示されていなかったものと思われます。せっかくチェックしていただいたのに申し訳ありませんでした。
自分でももっとCSSを勉強して、トラブルをちゃんと解決できるようになりたいと思います。ありがとうございました！
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。