サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2024年10月15日 17:04
相談内容： ブログカードが正確に表示されない
不具合の発生手順：ブログ力ードを選択し、その中に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
----------------------------------------------
Topic starter
2024年10月15日 17:06
ブログカードを表示しているのは、H3の「アロマディフューザーとエッセンシャルオイル」という部分です。
2024年10月15日 18:12
pokkonさん
恐れ入りますが、ご質問の内容が、私には分からないところがございます。
詳しくご説明いただきたいです。
相談内容： ブログカードが正確に表示されない
不具合の発生手順：ブログ力ードを選択し、その中にURLを入力すると、投稿ページ内では正しく表示される。しかし、別タブで投稿を表示すると、正確に表示されない。
ご提示いただいた投稿ページでは、以下のように表示されているかと思います。
そして、リンク先は、フロントページのようです。
https://ansin-movie.com/
https://ansin-movie.com/
実際に、このブログカードをクリックすると、ブラウザの別タブで、フロントページが開きました。
これが、お問い合わせにある以下の部分と、どう異なるのか、私には分かりませんでした。
これが、お問い合わせにある以下の部分と、どう異なるのか、私には分かりませんでした。
別タブで投稿を表示すると、正確に表示されない。
何が正確ではないのでしょうか。
具体的に、何がどのように正確でないのか異なるのか、ご教示いただけますでしょうか。
また、件名に入力いただいた以下とも、お問い合わせ内容が一致しないというのか、どう繋がるのか私には分かりませんでした。
ブログカードがサイトの投稿のURLがはみ出てしまう
何かがはみ出しているのでしょうか。
先の「正確に表示されない」というものと、繋がりが見えませんでした。
恐れ入りますが、詳しくお問い合わせ内容について、ご教示いただけますと幸いです。
わいひら reacted
Topic starter
2024年10月15日 22:22
m k 2様、拙い説明になってしまい、本当に申し訳ございません。
別件についてありがとうございました。無事アップデートできました。
詳しく説明させていただきます。
の投稿において、関連記事を内部リンクとして貼りたいと思いました。
そこで、ブログカードを追加し、そこに「 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 」以降の「恋人（彼氏・彼女）にアロマオイルをプレゼント/」この部分が反映されず、下のブロックにはみ出てしまっている状況です。
よろしくお願いいたします。
This post was modified 1か月前 by わいひら
Topic starter
2024年10月15日 22:23
こちらが、別タブで投稿を表示した時の写真です。
2024年10月15日 22:35
pokkonさん
つまり
- 投稿ページに、内部リンクのブログカードを設定した
- プレビュー表示、もしくは、公開した投稿ページでは、何故入力したURLがリンク先にならず、フロントページになっている
（入力したURLとは、別のリンク先）
上記のようなお問い合わせということです？
いまいち、下にはみ出す辺りが分かっていません。
わいひら reacted
2024年10月15日 22:37
pokkonさん
とりあえず、私の環境で何種類か試しましたが、すべて正しく表示されました。
私からは別ドメインですので、おそらく問題ないのだと思います。
そこで、以下2点をお試しください。
①以下プラグインをインストール＆有効化
WP Multibyte Patch
WordPressは、海外製CMSで、日本語のようなマルチバイト文字の扱いが得意ではありません。
そのため、WordPressの日本語環境において、上記プラグインは、必須と言えるものです。
そのため、WordPressの日本語環境において、上記プラグインは、必須と言えるものです。
インストール＆有効化を強くお勧めします。
②ブログカードの入力方法
pokkonさんのように、日本語をURLに含む場合、以下のようにURLを括弧[]で囲んでみてください。
[]は、半角です。
中のURLとの間にスペースなどは含まないようにしてください。
わいひら reacted
2024年10月15日 22:52
1つ上のようには書きましたけれど・・・。
投稿管理ページには以下スクショのように表示されたのですが、いざ別タブで投稿を表示すると、先ほど写真で送っていただいたような、「フロントページ」のみが表示されてしまい、「 https://ansin-movie.com」以降の「恋人（彼氏・彼女）にアロマオイルをプレゼント/」この部分が反映されず、下のブロックにはみ出てしまっている状況です。
よろしくお願いいたします。
これって、投稿の編集画面ということですよね。
こういう表示になりましたでしょうか・・・。
ちなみに、どのような入力をなさっているのか、お知らせいただけますか。
ブログカードであれば、以下のような感じだと思うのですけれど。
右下のマークが気になります。
（Cocoonでは、表示していないような・・・）
（Cocoonでは、表示していないような・・・）
わいひら reacted
2024年10月15日 23:59
pokkonさん
「恋人（彼氏・彼女）にアロマオイルをプレゼント/」この部分が反映されず、下のブロックにはみ出てしまっている状況です。
はみ出すというのは、途中で切れて、ブログカード外に表示されているということですね、きっと。
（以下の赤枠・赤矢印部分？）
私の環境で、確認すると、先にも書きましたが問題ないです。
こんな感じで「ブログカード」ブロックに入力したものです。
ご利用のブロックや入力したテキストの状態が分かるようなキャプチャ画像（スクリーンショット）を添付していただけますでしょうか。
（直上に私が添付したようなもの）
（直上に私が添付したようなもの）
繰り返しになりますが、以下の表示が、ちょっと引っかかるのですよね。
わいひら reacted
2024年10月16日 00:07
これはWordPress本体の「埋め込み」ブロックですね。
Cocoonのブログカードではありません。
私の環境でも、埋め込みブロックを使用した際に投稿の編集画面では添付画像のように表示されるのに、プレビューではCocoonのブログカードとして表示されるのを確認しました。
URLが変わるのは再現できませんでしたが……。
「埋め込み」ブロックの表示が編集画面と実際の投稿で異なるのはCocoonの不具合っぽい(もしくは仕様とするか)気がします。
URLが変わってしまうのは分かりませんが、pokkonさんが「ブログカード」と仰っているものはCocoonのブログカードではないので、一旦Cocoonのブログカードを試してみると良いと思います。
2024年10月16日 00:22
pokkonさん
ちなみにですが。
EWWW Image Optimizer 7.9.0
上記プラグインの遅延読み込み（Lazyload）機能をご利用ではないでしょうか。
もし、ご利用でしたら、無効化することを、強くお勧めします。
（プラグインを無効化するのではなく、このプラグインの遅延読み込み(Lazyload)機能を無効化する）
WordPress 5.5以降は、ネイティブLazyLoadに対応しており、プラグインの遅延読み込み(Lazyload)機能を必要としません。
むしろ、コンフリクト（機能衝突）するためか、不具合が発生することが多いです。
（このフォーラムでも、このプラグインの遅延読み込み機能による、不具合報告が多数あります）
わいひら reacted
2024年10月16日 02:20
現在の様子。
「ブログカード」ブロックをご利用みたいですが、pタグが中にあるような・・・。
やはり1度、エディタ画面にどのような入力をなさっているのか、見せていただいた方が良いような気はします。
わいひら reacted
Topic starter
2024年10月17日 17:40
ｍｋ２さんありがとうございます。
プラグインと[]の挿入しましたが、改善は見られませんでした。
ブログカードが縦長になっている表示（埋め込み）についてなのですが、非常に説明が難しんですが、ブログカードの中にカーソルを合わせるのではなく、ブログカードの縁を選択した状態でURLをペーストすると、先ほどの縦長のブログカードが表示されました。
現在、投稿編集のページはこのような感じです↓
Topic starter
2024年10月17日 17:48
はるさん、ありがとうございます！
先ほど、コクーンのブログカードで試みてみましたが、うまく反映されませんでした。
2024年10月17日 18:00
pokkonさん
試しました。
コツは、リンク先のURLを、ブラウザのアドレスバーから直接貼ることだと思います。
上記3パターン試しました。
- ブラウザのアドレスバーから直接貼った状態
（リンク形式になると思います）
- ブラウザのアドレスバーから貼った後に、リンクを削除した状態
（URLはテキストの状態です）
- 上記項番2を、括弧[]で囲ったもの
結果は以下でした。
3つとも表示される。
環境によっては、日本語のURLを正しく認識しない場合があるようです。
（かなり前ですが、やはりそういう方のお問い合わせがありました。）
（かなり前ですが、やはりそういう方のお問い合わせがありました。）
その場合には、項番3のようにする必要がありました。
しかし、通常は、項番1や2の方法で問題ないはずです。
わいひら reacted
2024年10月17日 18:10
ちなみに、リンクのまま括弧で囲った場合も試しました。
ブログカードにはならないですね。
1番下です。
括弧[]で囲まれたショートコードの中が、テスキトではないので、上手くいかないと思います。
URLがパーセントエンコードされないのは、なぜなのでしよう・・・。
アドレスバーから貼りつけても、漢字になるのでしょうか？
今回は、それ以前に括弧で囲まれた中が、リンクになっているのが問題だと思います。
1つ前の返信の例のように、項番1から順番に試してみてください。
（ブラウザのアドレスバーから直接貼ってください）
（ブラウザのアドレスバーから直接貼ってください）
わいひら reacted
2024年10月17日 18:48
ブログカードが縦長になっている表示（埋め込み）についてなのですが、非常に説明が難しんですが、ブログカードの中にカーソルを合わせるのではなく、ブログカードの縁を選択した状態でURLをペーストすると、先ほどの縦長のブログカードが表示されました。
上記ですが、おそらく以下のようなことかと思います。
（私の環境では、埋め込みはエラー？になってしまうので、表示は「埋め込み」ブロックのままで、カード形式には変換されません）
私の環境では、マウスでURLの貼り付けをすると、ブロック内に貼りつくために、ショートカットキーで貼りつけました。
上記は、見ていただくとお分かりいただけると思うのですが・・・。
「ブログカード」ブロックを、上書いてしまっています。
つまり、「ブログカード」ブロックが削除されて、「埋め込み」ブロックに置き換わった状態です。
つまり、「ブログカード」ブロックが削除されて、「埋め込み」ブロックに置き換わった状態です。
右側の「設定パネル」に、どのブロックか表示される（上記GIFに表示させています）と思いますので、そこをご確認いただくと、分かるのではないかと思います。
わいひら reacted
Topic starter
2024年10月17日 19:01
m k 2さん本当にご丁寧にありがとうございます。
項番3の手順で行ったら、無事正確に表示することができました。
本当にありがとうございました。
わいひら reacted
2024年10月17日 19:05
pokkonさん
無事できたようで、良かったです。
後学のために、教えていただきたいのですけれど。
Safariだと、URLを貼り付けると、日本語は漢字のままなのでしょうか？
私は、Safariの環境を持っていないため、よろしければ教えてください。
（今後のフォーラムの回答に役立てたいと思います）
なお、当方にてこのトピックを「解決済」とさせていただきました。
Topic starter
2024年10月17日 19:08
はい、Safariの場合は日本語は漢字のままでした！
なので、こちらのフォーラムでURLをコピペしたときに見たことないURLの表示のされ方だったので「？」となりました。
ｍｋ２ reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。