ヘッダーを固定する - 要望 https://wp-cocoon.com/community/demands/%e3%83%98%e3%83%83%e3%83%80%e3%83%bc%e3%82%92%e5%9b%ba%e5%ae%9a%e3%81%99%e3%82%8b/ Cocoon ディスカッション掲示板 ja Mon, 09 Mar 2026 21:16:19 +0000 wpForo 60 RE: ヘッダーを固定する https://wp-cocoon.com/community/demands/%e3%83%98%e3%83%83%e3%83%80%e3%83%bc%e3%82%92%e5%9b%ba%e5%ae%9a%e3%81%99%e3%82%8b/#post-61520 Sun, 08 May 2022 00:36:04 +0000 ありがとうございます。

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

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

 

]]> 要望 Berghilo https://wp-cocoon.com/community/demands/%e3%83%98%e3%83%83%e3%83%80%e3%83%bc%e3%82%92%e5%9b%ba%e5%ae%9a%e3%81%99%e3%82%8b/#post-61520 RE: ヘッダーを固定する https://wp-cocoon.com/community/demands/%e3%83%98%e3%83%83%e3%83%80%e3%83%bc%e3%82%92%e5%9b%ba%e5%ae%9a%e3%81%99%e3%82%8b/#post-61519 Sun, 08 May 2022 00:31:10 +0000 @berghilo さん

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

 

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

 

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

:target {

もしくは、

span {

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

 

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

]]> 要望 リフィトリー https://wp-cocoon.com/community/demands/%e3%83%98%e3%83%83%e3%83%80%e3%83%bc%e3%82%92%e5%9b%ba%e5%ae%9a%e3%81%99%e3%82%8b/#post-61519 RE: ヘッダーを固定する https://wp-cocoon.com/community/demands/%e3%83%98%e3%83%83%e3%83%80%e3%83%bc%e3%82%92%e5%9b%ba%e5%ae%9a%e3%81%99%e3%82%8b/#post-61518 Sun, 08 May 2022 00:14:34 +0000 リフィトリーさん、

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

span　はやめて

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

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

何度もすみません。

]]> 要望 Berghilo https://wp-cocoon.com/community/demands/%e3%83%98%e3%83%83%e3%83%80%e3%83%bc%e3%82%92%e5%9b%ba%e5%ae%9a%e3%81%99%e3%82%8b/#post-61518 RE: ヘッダーを固定する https://wp-cocoon.com/community/demands/%e3%83%98%e3%83%83%e3%83%80%e3%83%bc%e3%82%92%e5%9b%ba%e5%ae%9a%e3%81%99%e3%82%8b/#post-61517 Sat, 07 May 2022 23:53:41 +0000 @berghilo さん

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



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

 

:target ｛


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

 

:target {


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

 

]]> 要望 リフィトリー https://wp-cocoon.com/community/demands/%e3%83%98%e3%83%83%e3%83%80%e3%83%bc%e3%82%92%e5%9b%ba%e5%ae%9a%e3%81%99%e3%82%8b/#post-61517 RE: ヘッダーを固定する https://wp-cocoon.com/community/demands/%e3%83%98%e3%83%83%e3%83%80%e3%83%bc%e3%82%92%e5%9b%ba%e5%ae%9a%e3%81%99%e3%82%8b/#post-61516 Sat, 07 May 2022 19:57:40 +0000 再度のご指摘、ありがとうございます。

:target

に致しました。

よろしくお願いします。

]]> 要望 Berghilo https://wp-cocoon.com/community/demands/%e3%83%98%e3%83%83%e3%83%80%e3%83%bc%e3%82%92%e5%9b%ba%e5%ae%9a%e3%81%99%e3%82%8b/#post-61516 RE: ヘッダーを固定する https://wp-cocoon.com/community/demands/%e3%83%98%e3%83%83%e3%83%80%e3%83%bc%e3%82%92%e5%9b%ba%e5%ae%9a%e3%81%99%e3%82%8b/#post-61514 Sat, 07 May 2022 15:15:04 +0000 span　

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

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

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

]]> 要望 リフィトリー https://wp-cocoon.com/community/demands/%e3%83%98%e3%83%83%e3%83%80%e3%83%bc%e3%82%92%e5%9b%ba%e5%ae%9a%e3%81%99%e3%82%8b/#post-61514 RE: ヘッダーを固定する https://wp-cocoon.com/community/demands/%e3%83%98%e3%83%83%e3%83%80%e3%83%bc%e3%82%92%e5%9b%ba%e5%ae%9a%e3%81%99%e3%82%8b/#post-61513 Sat, 07 May 2022 14:25:48 +0000 Akiraさんにご紹介いただいた「:target」を使うやり方ですと、

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

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

]]> 要望 リフィトリー https://wp-cocoon.com/community/demands/%e3%83%98%e3%83%83%e3%83%80%e3%83%bc%e3%82%92%e5%9b%ba%e5%ae%9a%e3%81%99%e3%82%8b/#post-61513 RE: ヘッダーを固定する https://wp-cocoon.com/community/demands/%e3%83%98%e3%83%83%e3%83%80%e3%83%bc%e3%82%92%e5%9b%ba%e5%ae%9a%e3%81%99%e3%82%8b/#post-61512 Sat, 07 May 2022 11:51:44 +0000 皆様ありがとうございます。

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

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

]]> 要望 Berghilo https://wp-cocoon.com/community/demands/%e3%83%98%e3%83%83%e3%83%80%e3%83%bc%e3%82%92%e5%9b%ba%e5%ae%9a%e3%81%99%e3%82%8b/#post-61512 RE: ヘッダーを固定する https://wp-cocoon.com/community/demands/%e3%83%98%e3%83%83%e3%83%80%e3%83%bc%e3%82%92%e5%9b%ba%e5%ae%9a%e3%81%99%e3%82%8b/#post-61507 Sat, 07 May 2022 10:21:34 +0000
投稿者:: @akira

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

@berghilo さん

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

 

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

span {

のようにして、

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

 

]]> 要望 リフィトリー https://wp-cocoon.com/community/demands/%e3%83%98%e3%83%83%e3%83%80%e3%83%bc%e3%82%92%e5%9b%ba%e5%ae%9a%e3%81%99%e3%82%8b/#post-61507 RE: ヘッダーを固定する https://wp-cocoon.com/community/demands/%e3%83%98%e3%83%83%e3%83%80%e3%83%bc%e3%82%92%e5%9b%ba%e5%ae%9a%e3%81%99%e3%82%8b/#post-61505 Sat, 07 May 2022 10:04:39 +0000 @berghilo さん

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

このような場合は、:target 擬似クラスの使用がおすすめです。この :target 擬似クラスは、URL の識別子（#〇〇のこと）に一致する id が対象です。

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

見出しのみに適用する場合は、属性セレクターに :target 擬似クラスを使います。

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

/* もしくはこちらでも可 */
/* :target {
  margin-top: -80px;
  padding-top: 80px;
} */

尚、子テーマの style.css の 3719 行目にエラーがあります。修正しない限り、これ以降の CSS が適用されないかもしれません。

]]> 要望 Akira https://wp-cocoon.com/community/demands/%e3%83%98%e3%83%83%e3%83%80%e3%83%bc%e3%82%92%e5%9b%ba%e5%ae%9a%e3%81%99%e3%82%8b/#post-61505