特典機能について

ヘッダーを固定する | 要望 | Cocoon フォーラム

サイト内検索
書き込みの前に以下の3点をご確認ください。
  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示高速化を無効にしてください
  3. 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。

不具合・カスタマイズ対象ページのURL:

相談内容:

解決のために試したこと:

※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:

※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。

環境情報の取得方法はこちら。
https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
https://wp-cocoon.com/theme-trouble/

フォーラム利用ガイドリンク

  1. フォーラムガイドライン
  2. よくある質問と答え(FAQ)
  3. サポート対象外のケース
  4. 原因不明の不具合用トラブルシューティング
  5. トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw
  6. 真っ白画面でのエラーメッセージの確認方法 
  7. ブラウザ環境チェックツール

フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。

また、問題の解決に至った場合には、トピック冒頭の「解決済み」リンクをクリックしていただけますと幸いです。

wpForoの解決済みリンク

また、有用な返信があった場合は「いいね!」リンクもご活用ください。返信者の励みになります。

wpForoのいいねリンク

「いいね!」機能はフォーラム登録者のみが利用できる機能です。

CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。

フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。

最近の書き込みはこちら。

詳細なカスタマイズ依頼をするならこちら。

スポンサーリンク
ヘッダーを固定する
 
共有:
通知
すべてクリア

[解決済] ヘッダーを固定する


Berghilo
(@berghilo)
Eminent Member
結合: 4年前
投稿: 33
Topic starter  

いつもテーマを使わせていただき、ありがとうございます。

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

「ヘッダーを固定する」を有効にするのと同時に、ヘッダーの高さ分下がるような仕様を希望します。

よろしくお願いします。


わいひら
(@yhira)
メンバーサイト Admin
結合: 4年前
投稿: 13481
わいひら - Facebookわいひら - Twitter
 
投稿者:: @berghilo

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

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


Berghilo
(@berghilo)
Eminent Member
結合: 4年前
投稿: 33
Topic starter  

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

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

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

 

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

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

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

です。

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

 

よろしくお願いします。


リフィトリー
(@leafytree)
メンバー Moderator
結合: 3年前
投稿: 6764
 

前略、berghiloさん

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

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


わいひら 件のいいね!
リフィトリー
(@leafytree)
メンバー Moderator
結合: 3年前
投稿: 6764
 

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


リフィトリー
(@leafytree)
メンバー Moderator
結合: 3年前
投稿: 6764
 

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

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

わいひら 件のいいね!
リフィトリー
(@leafytree)
メンバー Moderator
結合: 3年前
投稿: 6764
 

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

 


リフィトリー
(@leafytree)
メンバー Moderator
結合: 3年前
投稿: 6764
 

berghiloさん

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

 

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

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

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

 


わいひら 件のいいね!
Berghilo
(@berghilo)
Eminent Member
結合: 4年前
投稿: 33
Topic starter  

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

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

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

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


リフィトリー
(@leafytree)
メンバー Moderator
結合: 3年前
投稿: 6764
 

@berghilo さん

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

 

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

 

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


わいひら 件のいいね!
リフィトリー
(@leafytree)
メンバー Moderator
結合: 3年前
投稿: 6764
 

@berghilo さん

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

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


mk2
(@mk2_mk2)
メンバー Moderator
結合: 1年前
投稿: 3471
 

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

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

 
 
 
CSSを当てた状態。
(同じく、見出しH2-3へ飛ばします。)
 
 
もちろん、「目次が生成されていること」が前提だと思います。
(idの「toc~」が必要。)
 
 
ちなみに私は「padding-top」のみの指定です。
(「margin-top」は指定していません。)
 

わいひらリフィトリー 件のいいね!
リフィトリー
(@leafytree)
メンバー Moderator
結合: 3年前
投稿: 6764
 

@berghilo さん

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

 

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

This post was modified 2か月前 2回 by リフィトリー

リフィトリー
(@leafytree)
メンバー Moderator
結合: 3年前
投稿: 6764
 

@berghilo さん

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

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


Berghilo
(@berghilo)
Eminent Member
結合: 4年前
投稿: 33
Topic starter  

@leafytree さん

 

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

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

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

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

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

違ったらすみません。


リフィトリー
(@leafytree)
メンバー Moderator
結合: 3年前
投稿: 6764
 

@berghilo さん

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

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

 


Berghilo
(@berghilo)
Eminent Member
結合: 4年前
投稿: 33
Topic starter  

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

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

 

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

としてみました。

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

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

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

 


リフィトリー 件のいいね!
Akira
(@akira)
Noble Memberサイト
結合: 4年前
投稿: 1001
Akira - FacebookAkira - Twitter
 

@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

わいひらリフィトリー 件のいいね!
リフィトリー
(@leafytree)
メンバー Moderator
結合: 3年前
投稿: 6764
 
投稿者:: @akira

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

@berghilo さん

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

 

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

span[id^="hogehoge"] {

のようにして、

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

 

This post was modified 2か月前 2回 by リフィトリー

Berghilo
(@berghilo)
Eminent Member
結合: 4年前
投稿: 33
Topic starter  

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

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

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


リフィトリー 件のいいね!
リフィトリー
(@leafytree)
メンバー Moderator
結合: 3年前
投稿: 6764
 

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

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

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


リフィトリー
(@leafytree)
メンバー Moderator
結合: 3年前
投稿: 6764
 
span[id^="johnnys-"] 

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

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

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


わいひら 件のいいね!
Berghilo
(@berghilo)
Eminent Member
結合: 4年前
投稿: 33
Topic starter  

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

[id^="johnnys-"]:target

に致しました。

よろしくお願いします。


リフィトリー
(@leafytree)
メンバー Moderator
結合: 3年前
投稿: 6764
 

@berghilo さん

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

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

 

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

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

 

:target {

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

 


わいひら 件のいいね!
Berghilo
(@berghilo)
Eminent Member
結合: 4年前
投稿: 33
Topic starter  

リフィトリーさん、

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

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

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

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

何度もすみません。


リフィトリー
(@leafytree)
メンバー Moderator
結合: 3年前
投稿: 6764
 

@berghilo さん

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

 

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

 

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

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

もしくは、

span[id^="johnnys-"] {

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

 

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


わいひら 件のいいね!
Berghilo
(@berghilo)
Eminent Member
結合: 4年前
投稿: 33
Topic starter  

ありがとうございます。

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

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

 


わいひらリフィトリー 件のいいね!
共有:
スポンサーリンク
SWELLと業務提携しています
WordPressテーマSWELL
わいひらをフォローする
おすすめサーバー(コスパ・バックアップ重視型)

性能も兼ね備えながら安くブログ運営を開始できる点においてのNo.1。
それでいてブログ成長後は、十分すぎるほどのスペックアップ余力も担保されている。

◎安く始められる
◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
◎ファイルも14日以内なら無料自動復旧可能
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越し依頼が可能(有料)

サービス運営期間:3年

1年以上の契約をする場合は、クーポンコード入力でさらに50%割引キャンペーン中!
※BOX2 ~ BOX8プラン契約の場合

クーポンコード:PK4JK4RJ

クーポンの使用方法はこちら

安定感抜群のサーバーです。あまり急激なアクセス変動がないアフィリエイトサイトに向いています。

◎nginxを用いた高速サーバー(完全SSD)
◎老舗サーバーなので安定感抜群
◎ディスク容量が多い
◎転送量が多い
◎同サービス内でドメイン管理が可能
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
○ファイルは7日以内なら無料自動復旧可能
×プラン変更でCPUのスペックアップができない
×プラン変更しても即時反映されない
×アダルト・出会い系サイト不可

サービス運営期間:18年

とにかく速い。サイトに表示スピードを求めるならココ。
管理画面がシンプルで使いやすい。

◎nginxを用いた高速サーバー(完全SSD)
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
○http/2(高速化プロトコル)に対応
◎毎日無料バックアップ(14日分)
×DBは手動で復旧(データ取得は無料)
×ファイルも手動で復旧(データ取得は無料)
◎サーバ引っ越しツールあり(無料)
○サーバ引っ越し依頼が可能(有料)
◎ドメインとサーバー代のチャージ払いが可能

サービス運営期間:3年

常に新しいことに挑戦しているフロンティア精神あふるるレンタルサーバーです。
LiteSpeedやHTTP/2を日本で初めて導入したサーバー。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎転送量が多い
◎ディスク容量が多い
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
×ファイルは手動復旧(データ取得は無料)
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越し依頼が可能(有料)

サービス運営期間:5年

格安な値段で始められる高機能サーバーです。
性能も備えつつ最安ならここ。
ただし少し機能は弱い。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎激安プランが用意してある
◎値段あたりのスペックが高い(コスパ良し)
◎サーバ引っ越し依頼が可能(無料)
◎アダルト・出会い系サイト可
○http/2(高速化プロトコル)に対応
△プランのアップは可能だがダウンは不可
△毎日自動バックアップ(1日分)
△前日のバックアップからのみ復元できる(無料)

サービス運営期間:6年

Cocoon
タイトルとURLをコピーしました