投稿者:: @berghilo

「ヘッダー」設定の「ヘッダーを固定する」を有効にすると、その分別ページからの内部リンク部分がヘッダー分かぶさってしまい、見えなくなる気の問題があろうかと思います。

こちらの状態のスクリーンショットをいただけますか。

PCとタブレット横(PC表示)の場合のみ、下記のようになります。

上　「ヘッダーを固定する」有効

下　「ヘッダーを固定する」解除

ちなみにこの画像のアドレスは

「9人ジュニア」への内部リンク

https://idol.ne.jp/johnnys-unofficial-unit#9jr

です。

PCでアクセスしただけると再現できるかと思います。

よろしくお願いします。

前略、berghiloさん

ヘッダーの高さは皆同じではないので、以下の方法ではいかがでしようか？

https://y-com.info/contents/?p=5641

電車の中からなので、詳しく書けませんが、確か私も自分のサイトで、似たようなcssのコードを子テーマに書いたような覚えがあります。

すみません。自分のサイトを確認してみたら、目次のジャンプ位置を以下で調整していた、ということだったようです。

/*目次リンクのジャンプ位置を下げる*/
span[id^="toc"] {
  padding-top: 65px;
  margin-top: -65px;
}

あ、でもcocoonの目次機能を使っていれば、内部リンクに目次のidを指定すれば、上記のcssでもイケるかもですね。

berghiloさん

Cocoonの目次機能を使っていらっしゃるご様子なので、内部リンクのURLは以下のように目次のidを指定して・・

https://idol.ne.jp/johnnys-unofficial-unit#toc5

以下のようなCSSを設定してみるとどうでしょうか？

span[id^="toc"] {
  padding-top: 130px;
  margin-top: -130px;
}

ご返信いただいた皆様方、ありがとうございます。

結果として、いずれも駄目でした。

tocのCSSを試しましたが、他のページからの内部リンクの場合うまく行きませんでした。

引き続きいろいろ試してみます。

@berghilo さん

私のサイトだとどうでしょう？

https://leafytree.info/replacing-hpe-380jp-from-hdd-to-ssd/#toc7

指定した見出しが表示されませんでしょうか？

@berghilo さん

ローカルのテストサイトでも試してみたのですが、上手くいくようです。

CSSのコードが効いていないのでは？

私のローカル環境でも効くようです。

CSSがない状態。
（内部リンクで、見出しH2-3へ飛ばします。）

@berghilo さん

CSSのコードを設定したままにしていただくと有効になっているかどうかがわかるかもしれません。

既に子テーマのCSSファイルに4420行ほどコードを書かれていらっしゃるようですので、「追加CSS」辺りに記述した方が確実なのかもしれません。

@berghilo さん

セレクタを変えたら出来たっぽいですね。

ちょっと出かけるので外します。

@leafytree さん

> 私のサイトだとどうでしょう？

見事に意図した位置にリンクされています。

このtoc7は、コクーンの目次が出力するものですか？

もしそうなら、この「7」は動的に変わるものだと思うので、H要素の前後移動や新しいH要素を既存のH要素の間に挟んだりすると発番が変わりますよね。

そうなると、toc7　でリンクしていた各ページのものが違うH要素のところに来てしまうといったことになりそうです。

違ったらすみません。

@berghilo さん

独自のidを設定する場合でも要領は一緒かと思います。

応用すれば、同じ効果が得られるかと。

リフィトリーさん並びにお返事いただけた方々へ

言われたとおり、追加CSSにて、

.categoryid-3211 .entry-content span{
	padding-top: 80px;
	margin-top:-80px;
	}

としてみました。

キャッシュが無いブラウザー(Firefox)にて確認したところ、無事見出しのちょっと上にリンクされるようになりました。

CSSだけの問題のようで、大変お騒がせ致しました。

また、このような初歩的な質問に対し、丁寧にお付き合いいただき、ありがとうございました。

@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 が適用されないかもしれません。

投稿者:: @akira

記事内の全ての span に適用されるため、意図しないスタイルになる部分が必ず出てきます。

@berghilo さん

これはAkiraさんの仰るとおりかなと感じます。

私は「:target」についてはよくわかりませんので、セレクタを

span[id^="hogehoge"] {

のようにして、

の「hogehoge」の部分は独自のものにして、利用するidは「id="hogehoge01"」「id="hogehoge02"」のようにしたらどうだろうかなどと思ったりしています。

皆様ありがとうございます。

idは歌手名でいきたいので、span[id^="johnnys-"]　にして-の後に歌手名ローマ字をつなげました。

色々と親切なご指摘ありがとうございました。

Akiraさんにご紹介いただいた「:target」を使うやり方ですと、

[id^="johnnys-"]:target {
   margin-top: -80px;
   padding-top: 80px;
}

となるのかもしれません。

span[id^="johnnys-"]　

だけだと、やっぱり目次のジャンプ位置が含まれないので、Akiraさんに最初にご案内いただいた

:target {
  margin-top: -80px;
  padding-top: 80px;
}

が一番いいのかもしれません。

再度のご指摘、ありがとうございます。

[id^="johnnys-"]:target

に致しました。

よろしくお願いします。

@berghilo さん

もともと、目次のジャンプ位置については、ご質問の主な目的ではなかったのかもしれません。

ただ、固定ヘッダーが画面上から降りてくる前に、目次の項目をクリックすると、現状ではターゲットの見出しがヘッダーに隠れてしまうようですので、Akiraさんのご提案の方がそれも含めて修正されるようなので、その方が良いかな、と思った次第です。

[id^="johnnys-"]:target ｛

ですと目次は含まれないので、セレクタを

:target {

だけにすると目次のジャンプ位置も修正されたりしませんか？

リフィトリーさん、

度重なるご指摘、ありがとうございます。

span[id^="johnnys-"]　はやめて

:target {
  margin-top: -80px;
  padding-top: 80px;
}

これのみにした方がよろしいのでしょうか？

何度もすみません。

@berghilo さん

独自のidは目次の上に設定されていらっしゃるご様子ですので、目次の見出しではアンカーの位置が少し異なるため、同じ80pxだとピッタリご希望に合った位置にならないのかもしれません。

目次のジャンプ位置の問題については現状では「ヘッダーが画面上から降りてくるまでの間」だけなので、あまり気にしないくても良いのかもしれません。

当初のご質問の内容であれば、

[id^="johnnys-"]:target {

もしくは、

span[id^="johnnys-"] {

でも、目的には叶っているような気がします。

今回Akiraさんが:target属性について、ご案内くださったので、ご自身でも調べて工夫することで、選択肢が増えたということかと思います。

ありがとうございます。

span[id^="johnnys-"]:target{
	padding-top: 80px;
	margin-top:-80px;
	}

こちらで対応させていただきました。