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. ブラウザ環境チェックツール
  8. Cocoonカスタマイズ依頼

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

ページ内リンクのズレを修正する方法
 
共有:
通知
すべてクリア

[解決済] ページ内リンクのズレを修正する方法

7 投稿
4 ユーザー
3 Reactions
5,447 表示
(@okura)
Trusted Member Registered
結合: 6年前
投稿: 53
トピックスターター  

わいひら様、お加減はいかがでしょうか?

療養中、もしくは病み上がりでしたら大変申し訳ありません。
十分に回復なさってから目を通していただければと存じます。

トピック

ウィジェットを利用してページ内リンクを実装しようと試みたのですが、移動先のズレを修正することができず、難航しています。

不勉強で恐縮ですが、お心当たりなどございましたら、ご教授頂けないでしょうか?

手順

SNSボタン付近に移動先を指定したかったが、付近に適当なid属性が見当たらなかったので、ウィジェットから新たにid属性の追加を試みる

ウィジェット「投稿タイトル下」に「テキスト」を追加(内容は下記)

「読む価値ないわ」って人は<a href="#text-28">こちら</a>

ウィジェット「投稿SNSボタン上」に「テキスト」を追加(内容なし、下記はデベロッパーツール上での表示)

広告とSNSボタン

結果

移動後の表示位置の調整ができない(URL参照)

目的

本文下に広告を挿入する予定の為、SNSボタンと広告が画面中央に収まるように表示位置を調整したい(画像参照)

試したこと

CSSで以下のページの内容を試す

  1. ヘッダを固定している時のページ内リンクのズレ補正 | キタックCGソリューションセンター|Webマーケティング
  2. ヘッダ固定時のページ内リンクのズレをCSSだけで解消する3つのテクニック - わたしと納豆ごはん
  3. 簡単に調整できる。ページ内リンクの停止位置を調整 | いろどり
  4. ページ内リンクのジャンプ先の位置を調整する方法 | 大阪のホームページ制作会社YCOM

環境

URL:Hello world! | ニート生き方どうすれば


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17403
 

とりあえず、テキストウィジェットに何かテキストを入力して試すとどうなりますか?

あと出来れば、ソースコードが読みづらいので以下の方法で高速化を無効にしていただけたらと思います。
https://wp-cocoon.com/customize-consultation/


   
(@okura)
Trusted Member Registered
結合: 6年前
投稿: 53
トピックスターター  

お返事ありがとうございます。
また、ご不便をおかけしてしまい、申し訳ございませんでした。

内容を踏まえて、以下の作業を行いました。

  • テキストウィジェットに「出口」を入力
  • HTML、CSS、JavaScriptの縮小化を無効

試したこと

改めてトピック最初の「試したこと」を実行

結果

変化なし

お手数おかけしますが、ご確認いただけると幸いです。


   
(@akira)
Famed Member Registered
結合: 7年前
投稿: 1657
 

CSS でされるのなら、参考にされているページ内リンクのジャンプ先の位置を調整する方法の方法でいけると思います。

こんな感じです。値はご希望の状態になるようにご変更ください。30vh ~ 40vh にしないといけないかもしれません。

#text-28 {
  margin-top: -50vh;
  padding-top: 50vh;
}

ページキャッシュプラグインをお使いなので、何かしら変更された後は必ずプラグインのキャッシュ削除が必要です。


   
わいひら reacted
かうたっく
(@kautakku)
Illustrious Member Moderator
結合: 7年前
投稿: 4770
 

目的

本文下に広告を挿入する予定の為、SNSボタンと広告が画面中央に収まるように表示位置を調整したい(画像参照)

このようにありますけど、何をしたいのかがわからないんですよね。

手順

SNSボタン付近に移動先を指定したかったが、付近に適当なid属性が見当たらなかったので、ウィジェットから新たにid属性の追加を試みる

『SNSボタン付近』ですが具体的にどこなんだろ?って印象です。

 

もし広告を表示したいのであれば、広告ウィジェットを入れてそのIDでも良いように思ったりします。

Akiraさんがおっしゃる意図とあっていれば、この書き込みは不要だと思います!

※その場合。冒頭の『目的』である引用と、内容が私的にはかみ合わないので、私以外のかたが分かって解決したのであればオールOK!です^^


   
わいひら reacted
(@okura)
Trusted Member Registered
結合: 6年前
投稿: 53
トピックスターター  

解決できました!アドバイスを下さった方、どうもありがとうございました。

>>Akiraさん

キャッシュ系プラグインの仕様について、見落としていました。勉強になりました。

>>かうたっくさん

わかりづらくてすみません。「こういう構成にしたい」というイメージはあるのですが、作業や手続きが追いついておらず、伝えることが難しい状態です。
勿論、質問する時は出来る限り正確に伝えられるように努力しますが、もしわかりづらかった場合は指摘していただけると幸いです。


   
わいひら reacted
かうたっく
(@kautakku)
Illustrious Member Moderator
結合: 7年前
投稿: 4770
 

勿論、質問する時は出来る限り正確に伝えられるように努力しますが、もしわかりづらかった場合は指摘していただけると幸いです。

わたしも回答がおおいのですが、間違いのご指摘いただけたら嬉しい限りです!

 

そんな事より。

 

解決されたようで。何より良かったです^^


   
共有:

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

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

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

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

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

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

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

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