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

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

ブログカードがサイトの投稿のURLがは...
 
共有:
通知
すべてクリア

[解決済] ブログカードがサイトの投稿のURLがはみ出てしまう

24 投稿
3 ユーザー
17 Reactions
208 表示
(@pokkon)
Active Member Registered
結合: 2か月前
投稿: 8
トピックスターター  

不具合・カスタマイズ対象ページのURL: https://ansin-movie.com/%e5%8f%97%e9%a8%93%e7%94%9f%e7%94%b7%e5%ad%90%e3%81%ab%e3%83%97%e3%83%ac%e3%82%bc%e3%83%b3%e3%83%88%e4%bd%95%e3%82%92%e8%b4%88%e3%82%8c%e3%81%b0%e3%81%84%e3%81%84%ef%bc%9f%e3%83%a1%e3%83%b3%e3%82%bf/

相談内容: ブログカードが正確に表示されない

不具合の発生手順:ブログ力ードを選択し、その中にURLを入力すると、投稿ページ内では正しく表示される。しかし、別タブで投稿を表示すると、正確に表示されない。

解決のために試したこと:cocoon設定から、ブログカードの設定で「表示する」に設定している。プラグインは一度全て無効化した。テーマを有効化していたのを無効化した。

初心者ゆえ、何かミスがあるかもしれませんが、何卒よろしくお願いいたします。

環境情報:----------------------------------------------
サイト名:癒しグッズの案内所
サイトURL: https://ansin-movie.com
ホームURL: https://ansin-movie.com
コンテンツURL:/wp-content
インクルードURL:/wp-includes/
テンプレートURL:/wp-content/themes/cocoon-master
スタイルシートURL:/wp-content/themes/cocoon-child-master
親テーマスタイル:/wp-content/themes/cocoon-master/style.css
子テーマスタイル:/wp-content/themes/cocoon-child-master/style.css
WordPressバージョン:6.6.2
PHPバージョン:8.3.2
ブラウザ:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.3 Safari/605.1.15
サーバーソフト:Apache
サーバープロトコル:HTTP/1.1
エンコーディング:gzip, deflate, br
言語:ja
----------------------------------------------
テーマ名:Cocoon
バージョン:2.4.3
カテゴリ数:20
タグ数:4
ユーザー数:1
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:1.1.3
style.cssサイズ:845バイト
functions.phpサイズ:203バイト
----------------------------------------------
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
----------------------------------------------
利用中のプラグイン:
Advanced Ads 1.54.1
All-in-One WP Migration 7.86
ConoHa WING コントロールパネルプラグイン 1.2
ConoHa WING 自動キャッシュクリア 1.0.0
Contact Form 7 5.9.8
EWWW Image Optimizer 7.9.0
Jetpack 13.9.1
Pochipp 1.15.0
SiteGuard WP Plugin 1.7.8
Site Kit by Google 1.136.0
TypeSquare Webfonts for ConoHa 2.0.4
WP Sitemap Page 1.9.4
----------------------------------------------


   
(@pokkon)
Active Member Registered
結合: 2か月前
投稿: 8
トピックスターター  

ブログカードを表示しているのは、H3の「アロマディフューザーとエッセンシャルオイル」という部分です。


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8004
 

pokkonさん

まずは、別件の方から。

投稿者:: @pokkon

テーマ名:Cocoon
バージョン:2.4.3

pokkonさんがご利用の親テーマはとても古く、2022年4月頃のものです。(約2年半前のバージョン)

この親テーマのバージョンの当時は、WordPress 5.9.2の頃です。
現在の最新のWordPressに対応したものではないです。

投稿者:: @pokkon

WordPressバージョン:6.6.2

 

親テーマのバージョンアップを強くお勧めします。

ちなみに、現在ダッシュボードからアップデートできるバージョンは、Cocoon 2.7.8だと思います。


   
わいひら reacted
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8004
 

pokkonさん

恐れ入りますが、ご質問の内容が、私には分からないところがございます。
詳しくご説明いただきたいです。

投稿者:: @pokkon

相談内容: ブログカードが正確に表示されない

不具合の発生手順:ブログ力ードを選択し、その中にURLを入力すると、投稿ページ内では正しく表示される。しかし、別タブで投稿を表示すると、正確に表示されない。

ご提示いただいた投稿ページでは、以下のように表示されているかと思います。

 
そして、リンク先は、フロントページのようです。
https://ansin-movie.com/
 
実際に、このブログカードをクリックすると、ブラウザの別タブで、フロントページが開きました。
これが、お問い合わせにある以下の部分と、どう異なるのか、私には分かりませんでした。
投稿者:: @pokkon

別タブで投稿を表示すると、正確に表示されない。

何が正確ではないのでしょうか。
具体的に、何がどのように正確でないのか異なるのか、ご教示いただけますでしょうか。

 

また、件名に入力いただいた以下とも、お問い合わせ内容が一致しないというのか、どう繋がるのか私には分かりませんでした。

ブログカードがサイトの投稿のURLがはみ出てしまう

何かがはみ出しているのでしょうか。
先の「正確に表示されない」というものと、繋がりが見えませんでした。

恐れ入りますが、詳しくお問い合わせ内容について、ご教示いただけますと幸いです。


   
わいひら reacted
(@pokkon)
Active Member Registered
結合: 2か月前
投稿: 8
トピックスターター  

m k 2様、拙い説明になってしまい、本当に申し訳ございません。

別件についてありがとうございました。無事アップデートできました。

 

詳しく説明させていただきます。

 

私は送付させていただいたURL( https://ansin-movie.com/%e5%8f%97%e9%a8%93%e7%94%9f%e7%94%b7%e5%ad%90%e3%81%ab%e3%83%97%e3%83%ac%e3%82%bc%e3%83%b3%e3%83%88%e4%bd%95%e3%82%92%e8%b4%88%e3%82%8c%e3%81%b0%e3%81%84%e3%81%84%ef%bc%9f%e3%83%a1%e3%83%b3%e3%82%bf/)

の投稿において、関連記事を内部リンクとして貼りたいと思いました。

そこで、ブログカードを追加し、そこに「 https://ansin-movie.com/%E6%81%8B%E4%BA%BA%EF%BC%88%E5%BD%BC%E6%B0%8F%E3%83%BB%E5%BD%BC%E5%A5%B3%EF%BC%89%E3%81%AB%E3%82%A2%E3%83%AD%E3%83%9E%E3%82%AA%E3%82%A4%E3%83%AB%E3%82%92%E3%83%97%E3%83%AC%E3%82%BC%E3%83%B3%E3%83%88/ 」こちらのURLを貼りました。

投稿管理ページには以下スクショのように表示されたのですが、いざ別タブで投稿を表示すると、先ほど写真で送っていただいたような、「フロントページ」のみが表示されてしまい、「 https://ansin-movie.com 」以降の「恋人(彼氏・彼女)にアロマオイルをプレゼント/」この部分が反映されず、下のブロックにはみ出てしまっている状況です。

 

よろしくお願いいたします。

この投稿は2か月前ずつわいひらに変更されました

   
(@pokkon)
Active Member Registered
結合: 2か月前
投稿: 8
トピックスターター  

こちらが、別タブで投稿を表示した時の写真です。


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8004
 

pokkonさん

つまり

  • 投稿ページに、内部リンクのブログカードを設定した
  • プレビュー表示、もしくは、公開した投稿ページでは、何故入力したURLがリンク先にならず、フロントページになっている
    (入力したURLとは、別のリンク先)

上記のようなお問い合わせということです?

いまいち、下にはみ出す辺りが分かっていません。


   
わいひら reacted
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8004
 

pokkonさん

とりあえず、私の環境で何種類か試しましたが、すべて正しく表示されました。

私からは別ドメインですので、おそらく問題ないのだと思います。

 
 
そこで、以下2点をお試しください。
 
①以下プラグインをインストール&有効化
 
WP Multibyte Patch
 
WordPressは、海外製CMSで、日本語のようなマルチバイト文字の扱いが得意ではありません。
そのため、WordPressの日本語環境において、上記プラグインは、必須と言えるものです。
 
インストール&有効化を強くお勧めします。
 
 
②ブログカードの入力方法
 
pokkonさんのように、日本語をURLに含む場合、以下のようにURLを括弧[]で囲んでみてください。
 
[]は、半角です。
中のURLとの間にスペースなどは含まないようにしてください。
 

   
わいひら reacted
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8004
 

1つ上のようには書きましたけれど・・・。

 

投稿者:: @pokkon

投稿管理ページには以下スクショのように表示されたのですが、いざ別タブで投稿を表示すると、先ほど写真で送っていただいたような、「フロントページ」のみが表示されてしまい、「 https://ansin-movie.com」以降の「恋人(彼氏・彼女)にアロマオイルをプレゼント/」この部分が反映されず、下のブロックにはみ出てしまっている状況です。

よろしくお願いいたします。

 

これって、投稿の編集画面ということですよね。
こういう表示になりましたでしょうか・・・。

ちなみに、どのような入力をなさっているのか、お知らせいただけますか。

ブログカードであれば、以下のような感じだと思うのですけれど。

 
 
右下のマークが気になります。
(Cocoonでは、表示していないような・・・)

   
わいひら reacted
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8004
 

pokkonさん

投稿者:: @pokkon

「恋人(彼氏・彼女)にアロマオイルをプレゼント/」この部分が反映されず、下のブロックにはみ出てしまっている状況です。

はみ出すというのは、途中で切れて、ブログカード外に表示されているということですね、きっと。
(以下の赤枠・赤矢印部分?)

 
私の環境で、確認すると、先にも書きましたが問題ないです。
 
 
こんな感じで「ブログカード」ブロックに入力したものです。
 
 
ご利用のブロックや入力したテキストの状態が分かるようなキャプチャ画像(スクリーンショット)を添付していただけますでしょうか。
(直上に私が添付したようなもの)
 
繰り返しになりますが、以下の表示が、ちょっと引っかかるのですよね。

   
わいひら reacted
はる
(@haruinoue)
Noble Member Moderator
結合: 4年前
投稿: 1089
 

投稿者:: @pokkon

 a3adbb12902ec16ca9b56d79d17d696e.png

これはWordPress本体の「埋め込み」ブロックですね。
Cocoonのブログカードではありません。

私の環境でも、埋め込みブロックを使用した際に投稿の編集画面では添付画像のように表示されるのに、プレビューではCocoonのブログカードとして表示されるのを確認しました。

URLが変わるのは再現できませんでしたが……。


「埋め込み」ブロックの表示が編集画面と実際の投稿で異なるのはCocoonの不具合っぽい(もしくは仕様とするか)気がします。

URLが変わってしまうのは分かりませんが、pokkonさんが「ブログカード」と仰っているものはCocoonのブログカードではないので、一旦Cocoonのブログカードを試してみると良いと思います。

 


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8004
 

はるさん

投稿者:: @haruinoue

これはWordPress本体の「埋め込み」ブロックですね。

投稿者:: @haruinoue

私の環境でも、埋め込みブロックを使用した際に投稿の編集画面では添付画像のように表示される

 

そうなんですか。

私の環境だと、埋め込みブロックは以下のように「このコンテンツは埋め込めませんでした」となり・・・。

 
でも、投稿ページでも表示自体は、ブログカードなんです。
 
何かが違うのでしょうね・・・。
(同じにできなくて、少し悲しい・・・)


   
わいひら reacted
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8004
 

pokkonさん

ちなみにですが。

投稿者:: @pokkon

EWWW Image Optimizer 7.9.0

上記プラグインの遅延読み込み(Lazyload)機能をご利用ではないでしょうか。

もし、ご利用でしたら、無効化することを、強くお勧めします。
(プラグインを無効化するのではなく、このプラグインの遅延読み込み(Lazyload)機能を無効化する)

 

WordPress 5.5以降は、ネイティブLazyLoadに対応しており、プラグインの遅延読み込み(Lazyload)機能を必要としません。

むしろ、コンフリクト(機能衝突)するためか、不具合が発生することが多いです。
(このフォーラムでも、このプラグインの遅延読み込み機能による、不具合報告が多数あります)


   
わいひら reacted
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8004
 

現在の様子。

 
「ブログカード」ブロックをご利用みたいですが、pタグが中にあるような・・・。
 
やはり1度、エディタ画面にどのような入力をなさっているのか、見せていただいた方が良いような気はします。

   
わいひら reacted
(@pokkon)
Active Member Registered
結合: 2か月前
投稿: 8
トピックスターター  

mk2さんありがとうございます。

プラグインと[]の挿入しましたが、改善は見られませんでした。

 

ブログカードが縦長になっている表示(埋め込み)についてなのですが、非常に説明が難しんですが、ブログカードの中にカーソルを合わせるのではなく、ブログカードの縁を選択した状態でURLをペーストすると、先ほどの縦長のブログカードが表示されました。

 

現在、投稿編集のページはこのような感じです↓


   
(@pokkon)
Active Member Registered
結合: 2か月前
投稿: 8
トピックスターター  

はるさん、ありがとうございます!

 

先ほど、コクーンのブログカードで試みてみましたが、うまく反映されませんでした。


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8004
 

pokkonさん

投稿者:: @pokkon

現在、投稿編集のページはこのような感じです↓

これ、おかしいと思います。
漢字がそのまま見えますよね。

そうではなく、URLはパーセントエンコードされたもののはずでは?
(Safariをご利用?みたいですけれど、Safariだとそうなるのでしょうか・・・)

ちょっと今から試してみます。

 

括弧をつける場合は、私の例のように、リンクになっていてはダメだったと思います。

投稿者:: @mk2_mk2

こんな感じで「ブログカード」ブロックに入力したものです。

 


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8004
 

pokkonさん

試しました。

コツは、リンク先のURLを、ブラウザのアドレスバーから直接貼ることだと思います。

 
上記3パターン試しました。
  1. ブラウザのアドレスバーから直接貼った状態
    (リンク形式になると思います)
     
  2. ブラウザのアドレスバーから貼った後に、リンクを削除した状態
    (URLはテキストの状態です)
     
  3. 上記項番2を、括弧[]で囲ったもの

 

結果は以下でした。
3つとも表示される。

 
 
環境によっては、日本語のURLを正しく認識しない場合があるようです。
(かなり前ですが、やはりそういう方のお問い合わせがありました。)
 
その場合には、項番3のようにする必要がありました。
しかし、通常は、項番1や2の方法で問題ないはずです。

   
わいひら reacted
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8004
 

ちなみに、リンクのまま括弧で囲った場合も試しました。

 
ブログカードにはならないですね。
1番下です。
括弧[]で囲まれたショートコードの中が、テスキトではないので、上手くいかないと思います。
 
 
URLがパーセントエンコードされないのは、なぜなのでしよう・・・。
アドレスバーから貼りつけても、漢字になるのでしょうか?
 
今回は、それ以前に括弧で囲まれた中が、リンクになっているのが問題だと思います。
1つ前の返信の例のように、項番1から順番に試してみてください。
(ブラウザのアドレスバーから直接貼ってください)

   
わいひら reacted
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8004
 

投稿者:: @pokkon

ブログカードが縦長になっている表示(埋め込み)についてなのですが、非常に説明が難しんですが、ブログカードの中にカーソルを合わせるのではなく、ブログカードの縁を選択した状態でURLをペーストすると、先ほどの縦長のブログカードが表示されました。

上記ですが、おそらく以下のようなことかと思います。
(私の環境では、埋め込みはエラー?になってしまうので、表示は「埋め込み」ブロックのままで、カード形式には変換されません)

 
 
私の環境では、マウスでURLの貼り付けをすると、ブロック内に貼りつくために、ショートカットキーで貼りつけました。
 
上記は、見ていただくとお分かりいただけると思うのですが・・・。
 
「ブログカード」ブロックを、上書いてしまっています。
つまり、「ブログカード」ブロックが削除されて、「埋め込み」ブロックに置き換わった状態です。
 
右側の「設定パネル」に、どのブロックか表示される(上記GIFに表示させています)と思いますので、そこをご確認いただくと、分かるのではないかと思います。

   
わいひら reacted
(@pokkon)
Active Member Registered
結合: 2か月前
投稿: 8
トピックスターター  

m k 2さん本当にご丁寧にありがとうございます。

項番3の手順で行ったら、無事正確に表示することができました。

 

本当にありがとうございました。


   
わいひら reacted
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8004
 

pokkonさん

無事できたようで、良かったです。

後学のために、教えていただきたいのですけれど。

Safariだと、URLを貼り付けると、日本語は漢字のままなのでしょうか?

私は、Safariの環境を持っていないため、よろしければ教えてください。
(今後のフォーラムの回答に役立てたいと思います)

 

なお、当方にてこのトピックを「解決済」とさせていただきました。


   
(@pokkon)
Active Member Registered
結合: 2か月前
投稿: 8
トピックスターター  

はい、Safariの場合は日本語は漢字のままでした!

 

なので、こちらのフォーラムでURLをコピペしたときに見たことないURLの表示のされ方だったので「?」となりました。


   
mk2 reacted
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8004
 

pokkonさん

ありがとうございます。

1つ勉強になりました。

Windowsで貼りつけた場合は、以下みたいなパーセントエンコードされたものになるんですよね。
(Windowsだと、むしろこちらの表示しか見ない)

投稿者:: @mk2_mk2

 

コピー元のアドレスバーは、ちゃんと日本語なんですけれど。


   
わいひら reacted
共有:

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

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

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

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

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

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

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

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