現在「イノセンス」スキンを適用中です。

codepenプラグインでcodepenコードを埋め込むとスクロールする | 不具合報告 | 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)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。

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

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

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

スポンサーリンク
codepenプラグインでcodepe...
 
共有:
通知
すべてクリア

[解決済] codepenプラグインでcodepenコードを埋め込むとスクロールする


ゼスト
 ゼスト
(@ゼスト)
ゲスト
結合: 3か月前
投稿: 1
Topic starter  

投稿ページにて、codepenのコードをショートコードでいれて、

codepenのソースコードと実行結果を表示させたのですが、

表示はちゃんとできました。

しかし、表示記事にリンクで移動しましたら、

codepenの張り付けた場所まで、勝手にスクロールしてしまいました。

他のテーマを使っていた時は、勝手にスクロールしなかったのですが、

バグのように動いてしまい、困っています。

 

このページで問題が発生してます。

http://ranran2020.wp.xdomain.jp/2021/02/17/html%e5%9f%ba%e7%a4%8e-%e3%81%9d%e3%81%ae%ef%bc%93-%e7%94%bb%e5%83%8f%e8%a1%a8%e7%a4%ba%e3%83%bb%e3%83%aa%e3%83%b3%e3%82%af%e3%83%bb%e3%83%91%e3%82%b9/

 

問題解決のアドバイスをしていただけたら、助かります。

何卒、宜しくお願い致します。


未解決
ゼスト
 ゼスト
(@ゼスト)
ゲスト
結合: 3か月前
投稿: 10
 

投稿者メールアドレスが誤っていたので、修正のため、返信に追加します


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

前略、ゼスト さん

ちょっと、私もこれ、わからないのですが、codepen のところに「a id="html-link"」というIDがあるので、そこをめがけてリンクが飛んでいる、ということは、ないのでしょうか?(ほんと良くわかりません)

 

WordPressでは、記事のタイトルがURLの一部になるので、2バイト文字である、全角の文字はURLのスラッグには使用しない方が無難だということぐらいしかわからないです。(半角のローマ字、数字、ハイフンを使った方が良いような気がします。)

 

試すとすれば、URLのスラッグを日本語にするにしても、「html」から始まらない文字列にしてみるとかでしょうか?

 

でも、他テーマでは、問題なかった、というのも私には説明できないですし、よくわかりません。

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

わいひら 件のいいね!
ゼスト
 ゼスト
(@ゼスト)
ゲスト
結合: 3か月前
投稿: 10
 

以前使ったことがあるテーマで、「simplicity2」というものがあり、

このテーマは正常にcodepenのプラグインが動きました。

 

今回のブログは、simplicity2で作ったブログを閉じ、

cocoonテーマで作り直してます。

以前のブログでも同タイトルで同じブログの記事を書いておりましたので、

私としても、どうしてよいかわかりません。

 

他のテーマで、リニューアルするしかないかどうかを悩んでます。

 

後、

codepen のところに「a id="html-link"」というIDがあるので、そこをめがけてリンクが飛んでいる、ということは、ないのでしょうか?

→これの内容がよくわかりません。

 wpの投稿に貼ったcodepenのembedにも「a id="html-link"」は記載しておりません。

 

すいませんが、なにか助言があれば、お願いします。

 

何卒、宜しくお願い致します。

 


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

ゼストさん

もし、URLのスラッグを変更してもかまわない、ということでしたら、半角ローマ字、数字、ハイフンの組み合わせにして、どのようになるか試してみる、とかでしょうか?

 

例えば以下のような感じに翻訳っぽいスラッグにするとか・・

 

html-basics-part3-image-display-link-path

 

ただ、これでも html で始まっちゃうので、どうなるか、やってみないと、私にもわかりません。

 

ちなみに、私も Simplicity2 からの乗り換えです。

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

わいひら 件のいいね!
ゼスト
 ゼスト
(@ゼスト)
ゲスト
結合: 3か月前
投稿: 10
 

リフィトリー様

 

スラッグを「part3-image-display-link-path」で試しましたが、

codepenの記事をスクロールしてしまいます。

 

スラッグのhtmlが原因ではなさそうです。

 

他のアドバイスがあれば、是非ともお願い致します。

 

大変申し訳ありませんが、ご助力していただきたいです。

 


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

ゼストさん

「a id="html-link"」というのはソースコードを見たら有った、というだけです。

 

仮に、Cocoonで使っているJavaScript関連のトラブルだとしたら、私には解決できそうにありません。

 

 


mofumofu
(@mofumofu)
Trusted Memberサイト
結合: 6か月前
投稿: 73
 

@ゼスト さん

私はcocoonの内部構造を理解しているわけではないので的外れな意見かもしれませんが、挙動的にはload="lazy"が何かしらの機能と競合して読み込まれたタイミングで移動しているように見えます。

動き的に他のJSと競合しているのだとは思うのですが、それがcocoonのものなのかその他プラグインのものなのかまでは分かりません。。


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

ゼストさん

スラッグを「part3-image-display-link-path」で試しましたが、

codepenの記事をスクロールしてしまいます。

 

スラッグのhtmlが原因ではなさそうです。

わいひらさん、もしくは、詳しい方が診てくださると何かわかるかもしれません。

 

わいひらさんがフォーラムにいらっしゃるのは、いつも夜になってからですね。

 

他にもスキルの高い方がいらっしゃるのでもう少しお待ちになってみてもいいような気がします。


ゼスト
 ゼスト
(@ゼスト)
ゲスト
結合: 3か月前
投稿: 10
 

リフィトリー様

 

丁寧かつ迅速なご対応感謝します。

わいひら様や他のレベルの高い方のご助力を待ちます。

 


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

ゼストさん

mofumofu さんのアドバイスをうけて、月並みですが、環境情報を貼り付けていただくと良いかもしれません。

 

Cocoonは、環境情報がまとめて取得できるようになっています。

 


わいひら 件のいいね!
ゼスト
 ゼスト
(@ゼスト)
ゲスト
結合: 3か月前
投稿: 10
 

環境情報を記載致します。

 

Cocoon環境に関する情報です。

----------------------------------------------
サイト名:Web Study Kit
サイトURL: http://ranran2020.wp.xdomain.jp 
ホームURL: http://ranran2020.wp.xdomain.jp 
コンテンツURL:/wp-content
インクルードURL:/wp-includes/
テンプレートURL:/wp-content/themes/cocoon-master
スタイルシートURL:/wp-content/themes/cocoon-master
親テーマスタイル:/wp-content/themes/cocoon-master/style.css
スキン:/wp-content/themes/cocoon-master/skins/skin-tecurio-sky/style.css
WordPressバージョン:5.6.1
PHPバージョン:7.4.13
ブラウザ:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.150 Safari/537.36
サーバーソフト:Apache
サーバープロトコル:HTTP/1.1
言語:ja,en-US;q=0.9,en;q=0.8
----------------------------------------------
テーマ名:Cocoon
バージョン:2.2.7
カテゴリ数:3
タグ数:0
ユーザー数:1
----------------------------------------------
Gutenberg:1
AMP:0
PWA:0
Font Awesome:4
Auto Post Thumbnail:0
Retina:0
ホームイメージ:/wp-content/themes/cocoon-master/screenshot.jpg
----------------------------------------------
ブラウザキャッシュ有効化:0
HTML縮小化:0
CSS縮小化:0
JavaScript縮小化:0
Lazy Load:0
WEBフォントLazy Load:0
----------------------------------------------
利用中のプラグイン:
All in One SEO 4.0.15
All In One WP Security 4.4.6
CodePen Embedded Pens Shortcode 1.0.0
Easy Smooth Scroll Links 2.22
Pz-LinkCard 2.4.2.2
Table of Contents Plus 2002
----------------------------------------------

不具合報告の際には以下の情報を添えてもらうと助かります。

 

----------------------------------------------
サイト名:Web Study Kit
サイトURL: http://ranran2020.wp.xdomain.jp
ホームURL: http://ranran2020.wp.xdomain.jp
コンテンツURL:/wp-content
インクルードURL:/wp-includes/
テンプレートURL:/wp-content/themes/cocoon-master
スタイルシートURL:/wp-content/themes/cocoon-master
親テーマスタイル:/wp-content/themes/cocoon-master/style.css
スキン:/wp-content/themes/cocoon-master/skins/skin-tecurio-sky/style.css
WordPressバージョン:5.6.1
PHPバージョン:7.4.13
ブラウザ:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.150 Safari/537.36
サーバーソフト:Apache
サーバープロトコル:HTTP/1.1
言語:ja,en-US;q=0.9,en;q=0.8
----------------------------------------------
テーマ名:Cocoon
バージョン:2.2.7
カテゴリ数:3
タグ数:0
ユーザー数:1
----------------------------------------------
Gutenberg:1
AMP:0
PWA:0
Font Awesome:4
Auto Post Thumbnail:0
Retina:0
ホームイメージ:/wp-content/themes/cocoon-master/screenshot.jpg
----------------------------------------------
ブラウザキャッシュ有効化:0
HTML縮小化:0
CSS縮小化:0
JavaScript縮小化:0
Lazy Load:0
WEBフォントLazy Load:0
----------------------------------------------
利用中のプラグイン:
All in One SEO 4.0.15
All In One WP Security 4.4.6
CodePen Embedded Pens Shortcode 1.0.0
Easy Smooth Scroll Links 2.22
Pz-LinkCard 2.4.2.2
Table of Contents Plus 2002
----------------------------------------------

 

 

 


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

ゼストさん

プラグインの「Easy Smooth Scroll Links」を一旦停止してみる、というのは試してみられましたか?


ゼスト
 ゼスト
(@ゼスト)
ゲスト
結合: 3か月前
投稿: 10
 

リフィトリー様

 

Easy Smooth Scroll Linksを停止しましたが、

誤動作が改善できなかったため、再起動させてました。

 

一旦、Easy Smooth Scroll Linksは停止させます。

まだ誤動作してそうなので、私のページを見て確認していただけたらと思います。

 

http://ranran2020.wp.xdomain.jp/2021/02/17/part3-image-display-link-path/

 

お手数ばかりかけてしまい、すいません。

 

何卒、宜しくお願い致します。


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

ゼストさん

やはり、codepen の左側の窓の中へ飛んでしまいますね。

 

わいひらさんなら、なにか心当たりがあるかもしれません。

 

解決するように!

 

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

ゼスト
 ゼスト
(@ゼスト)
ゲスト
結合: 3か月前
投稿: 10
 

リフィトリー様、mofumofu様、ありがとうございます。

 

わいひら様達のご助力を待つことにします。

 


ろこ
(@lococo)
Prominent Memberサイト
結合: 3年前
投稿: 823
 

同じページを別のテーマで試すと、その不具合は生じないのでしょうか?

CodePenは使用したことはありませんが、

CodePen Embedded Pens Shortcode 1.0.0

ショートコードで埋め込んでいる点が気になります。

少なくともGutenbergでは、確かCodePenのショートコード埋め込みを推奨していなかったと思うので、別の埋め込み方法を試してみた方がいいかもしれません。


わいひらリフィトリー 件のいいね!
ゼスト
 ゼスト
(@ゼスト)
ゲスト
結合: 3か月前
投稿: 10
 

ろこ様

 

アドバイス、ありがとうございます。

ショートコードが原因だったようです。

 

codepenでembed - 「HTML(recommended)」のテキストをワードプレスにて、

「カスタムHTML」で張り付けて、表示させたところ、

スクロールの誤作動がなくなりました。

 

codepenの公式サイトのembedで、「WordPress Shotcode」というものがあるため、

知識がない私の場合、wordpressには、こちらのショートコードが良いように見えました。

 

しかし、今回のろこ様のアドバイスにより、今後の対策がとれそうです。

 

ろこ様、誠にありがとうございます!!

そして、リフィトリー様、mofumofu様も、助言をしてくださり、

ありがとうございました!

 


わいひらリフィトリー 件のいいね!
ゼスト
 ゼスト
(@ゼスト)
ゲスト
結合: 3か月前
投稿: 10
 

皆様のおかげで助かりました。

解決済みのボタンも押しておきます。


リフィトリー 件のいいね!
ゼスト
 ゼスト
(@ゼスト)
ゲスト
結合: 3か月前
投稿: 10
 

解決サイトのURLをパーマリンク設定で変更しましたため、

新しいURLもここに残しておきます。

 

http://ranran2020.wp.xdomain.jp/?p=43

 

解決させていただき、ありがとうございました!


わいひらリフィトリー 件のいいね!
共有:
スポンサーリンク
わいひらをフォローする
おすすめサーバー(コスパ・バックアップ重視型)

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

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

サービス運営期間:2年9ヶ月

1年以上の契約をする場合は、クーポンコード入力でさらに10%割引(※2021/6/30まで)。

クーポンコード:PK4JK4RJ

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

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

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

サービス運営期間:2年7ヶ月

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

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

サービス運営期間:17年

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

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

サービス運営期間:4年

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

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

サービス運営期間:5年

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