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カスタマイズ依頼

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

解決済のトピックと重複しますが、a h...
 
共有:
通知
すべてクリア

[解決済] 解決済のトピックと重複しますが、a href="#title1"みたいな内部リンク動作について

10 投稿
4 ユーザー
3 Reactions
1,917 表示
インパラ
(@spike)
Trusted Member Registered
結合: 7年前
投稿: 89
Topic starter  

お世話になります。

こちらのトピックの内容はページ内リンクのことでしょうか?

読み返しているのですが、いまいちわからずトピックを立てました。

というのもページ内リンクを設定したいのですが上手くいきません。

リンク先URLは絶対パスでないとダメ?なんですかね?

そして、飛んでいく目的地は<a id=”title1″></a>タイトル1のようにidではだめ?なのでしょうか?

何か勘違いしていたらすいません。

設定方法を教えてください。

「ページ内ジャンプ設定方法」などで検索して試しているのですが上手くいきません。


   
(@anton)
New Member
結合: 7年前
投稿: 1
 

おたずねのスレッドを立てたものです。

まず、idに関しては問題ありませんよ。

僕が前のスレッドで書いた name 属性は古い仕様になっているようです。HTML5 からはインパラさんのおっしゃる様に id属性を使用しないといけないようです。

目的地︰<a id="title1">タイトル1</a>

公開されている版ではリンク元は絶対パスで指定しないと、「新しいタブ」で開いてしまいます。

  1. <a href="#title1"> これだと新しいタブで開いてしまう
  2. <a href="http://aaa.net/bbb.html#title1"> これなら同一ウィンドウでリンク先にジャンプできます。

Cocoonでは、hrefのURLから内部リンクと外部リンクを判別しています。
なので、hrefにサイトURLが含まれていなかったので、外部リンクと判別されてしまったようです。

ただ、1. の方法でも同一ウィンドウで開けるようにわいりらさんが対応してくれました。

#リンクを「リンク設定」から除外し対応したものを以下の場所にアップしておきました。
https://github.com/yhira/cocoon/archive/master.zip

これを使えば、相対パスで記述しても同一ウィンドウで開きますよ!!

わいりらさんに感謝です!!


   
わいひら reacted
(@anton)
Active Member Registered
結合: 7年前
投稿: 9
 

すみません、わいひらさんが、わいりらさんになっていました。

寝ぼけながら、慣れないタブレットで打ち込んだもので…申し訳ありません。 ? 


   
インパラ
(@spike)
Trusted Member Registered
結合: 7年前
投稿: 89
Topic starter  

antonさんありがとうございます!

それが僕のやり方が悪いのか、上手くいきません。

ちなみにこんな感じです。

「内部リンク設定」は特に何も変更していません。

リンク元は絶対パスで指定しています。


   
かうたっく
(@kautakku)
Famed Member Moderator
結合: 7年前
投稿: 4764
 

gyazo.com:キチンと表示されている様子の画像

キチンと表示されるけど、ログインしてるから上部のadminバーで隠れてるだけみたいにも思います。

<a href="#test">『testまで、とべ』</a>
<p id="test">『testここまでとんだ』</p>

とかでも良さそうな気がします。

もし飛んだ先の上にも余白が欲しい場合

<p id="test" class="jump">『testここまでとんだ』</p>

にして、.jump { padding-top: 20px; } とCSSで指定しても良いかと思います。

『testまで、とべ』

『testここまでとんだ』

  • ※『testここまでとんだ』上部の余白なし
  • ※以下はpadding-top: 20px;とCSSを追加して余白をつけたイメージです。

『とばされた』へGO!

『とばされた』

成功しますように…。


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

シークレットウィンドーなどで見るとキチンと反映しるのが確認できますよ。


   
インパラ
(@spike)
Trusted Member Registered
結合: 7年前
投稿: 89
Topic starter  

かうたっくさんありがとうございます!

余白の件、ありがとうございます。すごく気になっていたので。

 

「シークレットウィンドーなどで見るとキチンと反映しるのが確認できますよ。」

本当ですか?僕の環境では、どうもスクロールする動きが確認できないんですよね‥。

つまり、画面遷移するときのようなモッサリした動きになります。

antonさんのサンプルやかうたっくさんの『testまで、とべ』『testここまでとんだ』のような動きになりません。

気にしすぎですかね?

 


   
かうたっく
(@kautakku)
Famed Member Moderator
結合: 7年前
投稿: 4764
 

つまり、画面遷移するときのようなモッサリした動きになります。

antonさんのサンプルやかうたっくさんの『testまで、とべ』『testここまでとんだ』のような動きになりません。

Chromeで今確認しましたが、同じ動きをするようです。

ただ飛ぶまでの時間は多少ありますが、シークレットモードで別ウィンドーに表示した(キャッシュがない)ので移動するのにホンノリ遅い・ワンテンポ置いてから移動するのかなくらいに思いましたよ。

※移動時の挙動は同じに感じます。


   
かうたっく
(@kautakku)
Famed Member Moderator
結合: 7年前
投稿: 4764
 

移動時の挙動:画像

マウスを置いてからクリックしたら矢印ボタンになり、その後下へ飛ぶ感じです。個人的にはそれほど気になりませんが、時間があるときサイトの高速化を試してみるのが良いかもしれないですね。

Cocoonでもオススメしてるプラグインで何かあったように思います。

https://wp-cocoon.com/recommended-plugins/


   
わいひら reacted
インパラ
(@spike)
Trusted Member Registered
結合: 7年前
投稿: 89
Topic starter  

 ありがとうございます!

ちょっと気にしすぎだったのかもしれません。

プラグインをまだ設定していないので上記を参考にやってみようと思います!

ご迷惑おかけしました。


   
共有:

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

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

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

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

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

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

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

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