サイト内検索
Cocoonフォーラム
![](https://wp-cocoon.com/wp-content/themes/cocoon-master/screenshot.jpg)
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL:
相談内容:
不具合の発生手順:
解決のために試したこと:
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え(FAQ)
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw)
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2022年5月6日 17:54
いつもテーマを使わせていただき、ありがとうございます。
「ヘッダー」設定の「ヘッダーを固定する」を有効にすると、その分別ページからの内部リンク部分がヘッダー分かぶさってしまい、見えなくなる気の問題があろうかと思います。
「ヘッダーを固定する」を有効にするのと同時に、ヘッダーの高さ分下がるような仕様を希望します。
よろしくお願いします。
2022年5月6日 20:19
「ヘッダー」設定の「ヘッダーを固定する」を有効にすると、その分別ページからの内部リンク部分がヘッダー分かぶさってしまい、見えなくなる気の問題があろうかと思います。
こちらの状態のスクリーンショットをいただけますか。
Topic starter
2022年5月7日 13:28
PCとタブレット横(PC表示)の場合のみ、下記のようになります。
上 「ヘッダーを固定する」有効
下 「ヘッダーを固定する」解除
ちなみにこの画像のアドレスは
「9人ジュニア」への内部リンク
https://idol.ne.jp/johnnys-unofficial-unit#9jr
です。
PCでアクセスしただけると再現できるかと思います。
よろしくお願いします。
2022年5月7日 13:54
電車の中からなので、詳しく書けませんが、確か私も自分のサイトで、似たようなcssのコードを子テーマに書いたような覚えがあります。
2022年5月7日 14:12
すみません。自分のサイトを確認してみたら、目次のジャンプ位置を以下で調整していた、ということだったようです。
/*目次リンクのジャンプ位置を下げる*/ span[id^="toc"] { padding-top: 65px; margin-top: -65px; }
わいひら reacted
2022年5月7日 14:19
あ、でもcocoonの目次機能を使っていれば、内部リンクに目次のidを指定すれば、上記のcssでもイケるかもですね。
2022年5月7日 14:44
berghiloさん
Cocoonの目次機能を使っていらっしゃるご様子なので、内部リンクのURLは以下のように目次のidを指定して・・
https://idol.ne.jp/johnnys-unofficial-unit#toc5
以下のようなCSSを設定してみるとどうでしょうか?
span[id^="toc"] { padding-top: 130px; margin-top: -130px; }
わいひら reacted
Topic starter
2022年5月7日 16:06
ご返信いただいた皆様方、ありがとうございます。
結果として、いずれも駄目でした。
tocのCSSを試しましたが、他のページからの内部リンクの場合うまく行きませんでした。
引き続きいろいろ試してみます。
2022年5月7日 16:14
@berghilo さん
私のサイトだとどうでしょう?
https://leafytree.info/replacing-hpe-380jp-from-hdd-to-ssd/#toc7
指定した見出しが表示されませんでしょうか?
わいひら reacted
Topic starter
2022年5月7日 17:40
@leafytree さん
> 私のサイトだとどうでしょう?
見事に意図した位置にリンクされています。
このtoc7は、コクーンの目次が出力するものですか?
もしそうなら、この「7」は動的に変わるものだと思うので、H要素の前後移動や新しいH要素を既存のH要素の間に挟んだりすると発番が変わりますよね。
そうなると、toc7 でリンクしていた各ページのものが違うH要素のところに来てしまうといったことになりそうです。
違ったらすみません。
Topic starter
2022年5月7日 18:18
リフィトリーさん並びにお返事いただけた方々へ
言われたとおり、追加CSSにて、
.categoryid-3211 .entry-content span{ padding-top: 80px; margin-top:-80px; }
としてみました。
キャッシュが無いブラウザー(Firefox)にて確認したところ、無事見出しのちょっと上にリンクされるようになりました。
CSSだけの問題のようで、大変お騒がせ致しました。
また、このような初歩的な質問に対し、丁寧にお付き合いいただき、ありがとうございました。
リフィトリー reacted
2022年5月7日 19:04
@berghilo さん
そのセレクターはまずいです。記事内の全ての span に適用されるため、意図しないスタイルになる部分が必ず出てきます。
このような場合は、:target 擬似クラスの使用がおすすめです。この :target 擬似クラスは、URL の識別子(#〇〇のこと)に一致する id が対象です。
:target { margin-top: -80px; padding-top: 80px; }
見出しのみに適用する場合は、属性セレクターに :target 擬似クラスを使います。
[id*="toc"]:target { margin-top: -80px; padding-top: 80px; } /* もしくはこちらでも可 */ /* [id^="toc"]:target { margin-top: -80px; padding-top: 80px; } */
尚、子テーマの style.css の 3719 行目にエラーがあります。修正しない限り、これ以降の CSS が適用されないかもしれません。
This post was modified 2年前 4回 by Akira
Topic starter
2022年5月7日 20:51
皆様ありがとうございます。
idは歌手名でいきたいので、span[id^="johnnys-"] にして-の後に歌手名ローマ字をつなげました。
色々と親切なご指摘ありがとうございました。
リフィトリー reacted
2022年5月7日 23:25
Akiraさんにご紹介いただいた「:target」を使うやり方ですと、
[id^="johnnys-"]:target { margin-top: -80px; padding-top: 80px; }
となるのかもしれません。
2022年5月8日 00:15
span[id^="johnnys-"]
だけだと、やっぱり目次のジャンプ位置が含まれないので、Akiraさんに最初にご案内いただいた
:target { margin-top: -80px; padding-top: 80px; }
が一番いいのかもしれません。
わいひら reacted
Topic starter
2022年5月8日 04:57
再度のご指摘、ありがとうございます。
[id^="johnnys-"]:target
に致しました。
よろしくお願いします。
Topic starter
2022年5月8日 09:14
リフィトリーさん、
度重なるご指摘、ありがとうございます。
span[id^="johnnys-"] はやめて
:target { margin-top: -80px; padding-top: 80px; }
これのみにした方がよろしいのでしょうか?
何度もすみません。
2022年5月8日 09:31
@berghilo さん
独自のidは目次の上に設定されていらっしゃるご様子ですので、目次の見出しではアンカーの位置が少し異なるため、同じ80pxだとピッタリご希望に合った位置にならないのかもしれません。
目次のジャンプ位置の問題については現状では「ヘッダーが画面上から降りてくるまでの間」だけなので、あまり気にしないくても良いのかもしれません。
当初のご質問の内容であれば、
[id^="johnnys-"]:target {
もしくは、
span[id^="johnnys-"] {
でも、目的には叶っているような気がします。
今回Akiraさんが:target属性について、ご案内くださったので、ご自身でも調べて工夫することで、選択肢が増えたということかと思います。
わいひら reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。
(CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。