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

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

Facebookページの記事埋め込みと...
 
共有:
通知
すべてクリア

[解決済] Facebookページの記事埋め込みとJetpackプラグインの干渉

17 投稿
3 ユーザー
3 Reactions
6,082 表示
(@bassy)
Active Member Registered
結合: 7年前
投稿: 17
トピックスターター  

お世話になります。

Jetpackのプラグインを使用しているブログの投稿記事内に、Facebookページの記事を埋め込み(貼りつけ)したページをモバイル(スマートフォン)から閲覧すると、ページ全体が右横に広がってしまう不具合を確認いたしました。

モバイルメニューや上に戻るボタンも画面からはみ出してしまっています。

http://easygoz.xsrv.jp/2018/05/28/17927/

Android7.0のGoogle Chromeと、iOS 8.1のSafariで確認しております。

----------------------------------------------
サイト名:easygoz.xsrv.jp
サイトURL: http://easygoz.xsrv.jp 
ホームURL: http://easygoz.xsrv.jp 
コンテンツURL: http://easygoz.xsrv.jp/wp-content 
インクルードURL: http://easygoz.xsrv.jp/wp-includes/ 
テンプレートURL: http://easygoz.xsrv.jp/wp-content/themes/cocoon-master 
スタイルシートURL: http://easygoz.xsrv.jp/wp-content/themes/cocoon-child-master 
Wordpressバージョン:4.9.6
PHPバージョン:7.1.4
ブラウザ:Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.181 Safari/537.36
サーバーソフト:Apache
サーバープロトコル:HTTP/1.1
言語:ja,en-US;q=0.9,en;q=0.8
----------------------------------------------
テーマ名:Cocoon
バージョン:0.6.4
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:0.0.2
----------------------------------------------
利用中のプラグイン:
Jetpack by WordPress.com 6.1.1
----------------------------------------------

 

Jetpackプラグインを停止すると右横に広がる不具合は解消されるので、プラグインと干渉してしまっていると思われます。

停止したページ→ https://easygoz.net/bznews/2018/05/22-2306.php

 

Facebookページの埋め込みをしているブログは稀かも知れませんが、Jetpackプラグインの利用者は多いかと思いますので、ご確認いただければと思います。

恐れ入りますがよろしくお願い致します。


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

お疲れ様です。例えばjetpackの機能を停止して、CocoonのFB機能を使うとどうなりますか?

外観よりウィジェット、[C] Facebookボックス でしたら以下画像のような位置に置くことが可能です。

https://gyazo.com/d2edcc8b7a54ad423a38f86c934024f8


   
(@bassy)
Active Member Registered
結合: 7年前
投稿: 17
トピックスターター  

かうたっく様

ご連絡ありがとうございます。

例えばjetpackの機能を停止して、CocoonのFB機能を使うとどうなりますか?

外観よりウィジェット、[C] Facebookボックス でしたら以下画像のような位置に置くことが可能です。

設定してみました。→ https://easygoz.net/bznews/2018/05/22-2306.php

スマートフォン(Android・iOSともに)からの閲覧だと、Facebookボックスは表示されていますが、サムネイル画像が表示されない状態でした。(添付のキャプチャー画像ご確認ください)

パソコンからだとFacebookボックス・サムネイル画像ともに正常に表示されていました。(Windows7・Google Chrome)


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

Cocoonバージョン:0.6.4を使用されてるようですね。少し古いバージョンをみてたので気付きませんでしたが、そのバージョンでしたら

『[C] Facebookバルーン』が、[C] Facebookボックスのすぐ上にあると思います。

アイキャッチを利用したFBページへの良いねを表示する…と説明書きがあるので表示すると思われます。『[C] Facebookバルーン』お試しいただけたらと。


   
(@bassy)
Active Member Registered
結合: 7年前
投稿: 17
トピックスターター  

かうたっく様

Facebookバルーン設置してみました。

こちらはスマートフォンからの閲覧でもアイキャッチが表示されています。

ちなみに、Jetpackプラグインを停止しているブログのCocoonテーマのバージョンは、0.6.3.2です。


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

解決されたようで何よりです。


   
(@bassy)
Active Member Registered
結合: 7年前
投稿: 17
トピックスターター  

いえ、解決しておりません。

右横に広がる表示の崩れの不具合に関しては、なにも改善されていません。

http://easygoz.xsrv.jp/2018/05/28/17927/

Facebookバルーンやボックスの不具合についてはこちらから特に言及しておりません。ご確認お願い致します。

 


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

バルーンで表示されてますけど、Cocoon機能は使わないということですか?

https://gyazo.com/16592c7bec004274c2db7cbaa649161d

上のほうのFBバルーンは表示されているけど、それでは不満が残るということでしょうか?

しかもCocoon機能のFBページ系ウィジェットについてどちらも正常ですので、その機能を使うことで問題が解消されたのかと?

言葉の感じがおかしいとは思いましたが、Cocoon機能の不具合がないので言及する要素がみあたりません。


   
(@bassy)
Active Member Registered
結合: 7年前
投稿: 17
トピックスターター  

かうたっく様

言葉足らずがありましたら申し訳ありません。

CocoonテーマのFacebook機能ではなく、Cocoonテーマを使用したブログの記事内に他所のFacebookページの投稿を貼り付けた場合の表示の不具合に対するご依頼です。

Facebookバルーンやボックスの表示については問題にしておりません。

症状は最初に記載した内容の通りです。

Jetpackのプラグインを使用しているブログの投稿記事内に、Facebookページの記事を埋め込み(貼りつけ)したページをモバイル(スマートフォン)から閲覧すると、ページ全体が右横に広がってしまう不具合を確認いたしました。

モバイルメニューや上に戻るボタンも画面からはみ出してしまっています

元々Wordpressのテーマはsimplicity2を使用していましたが、今回のような表示の不具合の症状は出ていなかったので、CocoonテーマとFacebookページ、Jetpackプラグインの相性の問題と考えています。

Cocoonテーマの不具合ではないというのであれば、改善策はないということでしょうか?


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

そうでしたか。

たとえ話からの話の流れでプラグイン機能を停止して試していただき、画像もキチンと表示されたとの事で、ものすごく簡単に言えば私が勝手に勘違いをしてしました^^;

代用機能でも対応OKのかたなのかと、やり取りする中で変わってしまったようです。

すごく興味のある内容ですが、今回のレスはこれにてオヤスミしますね❦


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

修正してみました。
https://github.com/yhira/cocoon/archive/master.zip
これで、Simplicityと同等くらいまでにはなったのではないかと思います。


   
(@bassy)
Active Member Registered
結合: 7年前
投稿: 17
トピックスターター  

わいひら様

ご連絡ありがとうございます。

zipファイルのテーマ適用してみましたが、残念ながら改善されず、右横に広がって表示されたままでした。(添付の画像)

http://easygoz.xsrv.jp/2018/05/28/17927/

パソコンやタブレット端末で閲覧するとちゃんと画面内に収まっている(SNSシェアボタンの内側に表示されている)ので、画面幅が広くないスマートフォンからの閲覧のみでの不具合ということかと思います。

いろいろと申し訳ありません。なにか改善策があればご教授ください。

 

かうたっく様も、いろいろとご相談に乗っていただきありがとうございました。


   
(@bassy)
Active Member Registered
結合: 7年前
投稿: 17
トピックスターター  

たびたび申し訳ありません。

zipファイルのテーマファイル適用後、Jetpackプラグインをいったん停止してから再度有効化したところ、右横にはみ出さずに表示できました。

確認不足で申し訳ございません。

おそらくこれで問題なく表示されたと思います。これでしばらく様子を見させていただきたいと思います。

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

 

 


   
(@bassy)
Active Member Registered
結合: 7年前
投稿: 17
トピックスターター  

本当にたびたび申し訳ありません。

zipファイルのテーマファイル適用後、Jetpackプラグインをいったん停止してから再度有効化したところ、右横にはみ出さずに表示できました。

ブログのダッシュボードのプラグインページからJetpackプラグインを有効化、までは表示は崩れないのですが、

その後「Jetpack を WordPress.com に接続する」の画面から、WordPress.comのページでJetpackを有効化(緑色のApproveボタン)をした後にスマートフォンから閲覧すると、右横にずれる症状が再発生してしまいました。

(分かりづらい表現で申し訳ございません)

Jetpackプラグインをオフにすれば表示は崩れないので、やはりテーマとプラグインが干渉してしまっていると思われます。


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

同様にして、Simplicityで試してみたのですが、Simplicityでも動作していないようですよ。
https://simplicity.sample.mixh.jp/hello-world/

なので、Simplicityと同じ対策ではダメなようです。

本来は、サポート対象外のものにもあるようにプラグインに起因する不具合はサポート外ではあります。

ただ、Jetpackと言ったら、準公式プラグインみたいなものなので、一応対応させてみました(少なくとも僕のテスト環境では正常動作している)。

https://github.com/yhira/cocoon/archive/master.zip

これでおそらくうまくいくのではないかなと思います。多分。


   
(@bassy)
Active Member Registered
結合: 7年前
投稿: 17
トピックスターター  

わいひら様

遅い時間までご対応いただいてありがとうございます。

再修正のzipファイルを適用させていただいてJetpackを有効化したところ、無事に表示されることができました。本当にありがとうございます。

サポート外のところいろいろとお手を煩わせてしまい申し訳ございませんでした。

 

simplicityのデモサイトでの検証までしていただいてありがとうございます。デモサイトを拝見したところ、こちらの環境下では確かに同じような表示の崩れが確認できました。

弊サイトでsimplicity(バージョン2.6.8)を適用してみたところ、こちらでは表示の崩れは発生しなかったです。(添付の画像)

何が原因なのかいまいちはっきりしませんが、とりあえずこれで様子を見させていただきたいと思います。

ブログ記事内にFacebookページの埋め込みということ自体あまり需要がないのかも知れませんが、柔軟なご対応いただき本当にありがとうございました!


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

動作確認ありがとうございますます!
Jetpackにはなるべく対応させるつもりですので、大丈夫です。

ちょっとSimplicity動作については、実物を見てみないと、何とも言えないかもしれませんね。
ただ、今回の修正でうまくいったようなので、良かったです。


   
bassy reacted
共有:

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

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

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

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

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

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

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

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