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

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

中央揃えの画像・キャプションが左寄せに...
 
共有:
通知
すべてクリア

[解決済] 中央揃えの画像・キャプションが左寄せになりました

31 投稿
4 ユーザー
46 Reactions
4,235 表示
(@yoko51)
Eminent Member Registered
結合: 5年前
投稿: 18
Topic starter  
お世話になっております。Cocoonで楽しくブログ運営をしています。

【不具合】

昨日、Cocoonを最新版にアップデートしたところ
中央揃えにしていた画像(ブログの記事幅よりも小さい画像は全て中央揃えにしています)が、
すべて左に寄ってしまいました。
 
キャプションも中央揃え・横書きだったものが、左寄せ・縦書きで表示されるようになりました。
*モバイルは、キャプションのみ左寄せ

【解決のために試したこと】
高速化設定の「CSSを縮小化する」を無効にすると元の状態に戻りました。
 
 
【相談内容】
アップデート前のように「CSSを縮小化する」にチェックを入れたままで、
中央揃えにすることはできますか?
 
【対象のページのURL】
現在、高速化を無効にしているため、画像・キャプションは中央揃え
になっています。
不具合の状況を直接見たいという場合には、高速化にチェックを入れますので、お知らせください。
 
 
どうぞよろしくお願いいたします。

----------------------------------------------
サイト名:さらば、思うだけ
サイトURL:https://yoko51.com/&source=gmail&ust=1632105739459000&usg=AFQjCNEgk-z9PwATtSurl6uhWhy-aQCPU A"> https://yoko51.com
ホームURL:https://yoko51.com/&source=gmail&ust=1632105739459000&usg=AFQjCNEgk-z9PwATtSurl6uhWhy-aQCPU A"> https://yoko51.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バージョン:5.8.1
PHPバージョン:7.4.13
ブラウザ:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.4577.82 Safari/537.36
サーバーソフト:Apache
サーバープロトコル:HTTP/1.1
言語:ja,en-US;q=0.9,en;q=0.8
----------------------------------------------
テーマ名:Cocoon
バージョン:2.3.6
カテゴリ数:12
タグ数:0
ユーザー数:1
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:1.0.8
style.cssサイズ:27457バイト
functions.phpサイズ:4565バイト
----------------------------------------------
Gutenberg:1
AMP:0
PWA:0
Font Awesome:4
Auto Post Thumbnail:0
Retina:1
ホームイメージ:/wp-content/uploads/2019/10/OGP_04.jpg
----------------------------------------------
ブラウザキャッシュ有効化:1
HTML縮小化:0
CSS縮小化:0
JavaScript縮小化:0
Lazy Load:1
WEBフォントLazy Load:1
----------------------------------------------
利用中のプラグイン:
Ad Invalid Click Protector 1.2.5.2
Advanced Rich Text Tools for Gutenberg 1.2.0
Akismet Anti-Spam 4.1.12
Aurora Heatmap 1.5.3
Category Order and Taxonomy Terms Order 1.5.7.7
Code Snippets 2.14.2
Contact Form 7 5.4.2
Edit Author Slug 1.8.3
EWWW Image Optimizer 6.2.5
Google XML Sitemaps 4.1.1
Jetpack 10.1
SiteGuard WP Plugin 1.6.0
SNS Count Cache 1.1.3
WP Multibyte Patch 2.9
WP SVG Icons 3.2.3
----------------------------------------------


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

前略、Yoko51さん

とりあえず、プラグインのGutenbergは停止することをオススメします。

 

いま出先なので詳しくみれませんが、高速化設定をoff にすると改善するというのは、ご自身で記述したコードのどこかに不備がある場合が多いです。

 

css の括弧が足りないなどがよくある事例です。

 


   
わいひら and yoko51 reacted
(@yoko51)
Eminent Member Registered
結合: 5年前
投稿: 18
Topic starter  

リフィトリー@leafytree さま

 

お忙しい中、お返事ありがとうございます。

 
プラグインのGutenbergを停止し、高速化をONにしてみましたが、不具合は改善されませんでした。
 
 
画像・キャプション関係で私自身が記述したコードは以下のもののみです。
 
 
/* Block Image Caption画像下の文字を小さく中央に */
.wp-block-image figcaption {
  color: #555d66;
  text-align: center;
  font-size: 13px;
}
 
 
HTML & CSS初心者なのでコードに不備があるかもしれませんが、括弧の抜けはないようです。

   
さる子
(@saruko)
Reputable Member Moderator
結合: 5年前
投稿: 482
 
投稿者:: @yoko51

画像・キャプション関係で私自身が記述したコードは以下のもののみです。

画像・キャプション関連以外の場所の括弧が抜けていても画像・キャプションに影響が出ることがあります。

 

/* スマホメニューを横スクロール*/
@media screen and (max-width: 768px) {
#header-container .navi-in > ul li {
   height: auto;
   font-weight: 600;
   line-height:1.3;
}

627行目のメディアクエリの閉じ括弧が足りないようです。

684行目から686行目に閉じ括弧が1つ余分にあるので、恐らく627行目の閉じ括弧が下に来てしまっているのだと思います。


リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

@yoko51 さん

WordPress5.5辺りから画像の遅延読み込み機能がWordPressに組み込まれたので、プラグイン(JetpackやEWWW Image Optimizeなど)の lazy load(画像の遅延読み込み)機能 は、OFFにしておいた方が無難かと思います。

あと、プラグインの「WP Multibyte Patch」は日本語環境でWordPressを利用する場合はインストール
必須だそうです。

 

インストールしておいた方が無難かもしれません。


   
yoko51 reacted
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

@yoko51 さん

あと、Cocoon バージョン2.3.6 では、画像ブロックを「中央寄せ」にした場合、キャプションも画像の左右幅の中央に配置されるように仕様が変わっているかと思います。(以前は、全てキャプションは画像の幅の左寄せ)

 

以下のトピックをお読みいただくと、経緯がわかるかと思います。

 

[解決済] タイトルの位置が変更されず、画像のキャプション位置もずれてしまいます

https://wp-cocoon.com/community/postid/56007/


   
わいひら and yoko51 reacted
(@yoko51)
Eminent Member Registered
結合: 5年前
投稿: 18
Topic starter  

さる子@saruko さま

お忙しい中、コードの確認ありがとうございます。 

ご指摘いただいたコードの不備を修正し、高速化をONにしてみましたが、不具合は改善されませんでした...

 

【修正内容】

①627行目のメディアクエリの閉じ括弧を、657行目に追加、

②684行目から686行目の閉じ括弧を1つ削除


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

@yoko51 さん

他にもあるのかもしれませんね。


   
yoko51 reacted
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

@yoko51 さん

ちょっと時間がとれないので、とりあえず。

115行目→全角の空白2つ

194行目→全角の空白2つ

884行目→px数値指定ない

 


   
わいひら and yoko51 reacted
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

@yoko51 さん

ざっと見ただけなので、見逃しているかもしれません。

インデント等の記述が揃っていないので、判読しづらいです。

親テーマに切り替えてみると、ご自身で記述した影響がないので、ご自身で記述したCSSの影響かどうかがわかるかもしれません。

また、他の原因も含めて調べる必要があるかもしれません。

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

   
yoko51 reacted
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

Yoko 51さん

表示を確認するときは、ブラウザのキャッシュを都度削除するようにしてください。


   
yoko51 reacted
(@yoko51)
Eminent Member Registered
結合: 5年前
投稿: 18
Topic starter  

リフィトリー@leafytree さま

 
お忙しい中、判読しずらいコードを確認していただき、本当に本当にありがとうございます。
ご指摘いただいた箇所は、修正いたしました。
 
 
プラグインの説明も丁寧にありがとうございます。
早速、lazy loadはOFFにしました。「WP Multibyte Patch」は、確認したところすでにインストール済でした。
 
 
 
教えていただいた「親テーマに切り替えてみる」を試してみたところ、
 
高速化設定をON→画像もキャプションも左寄りに表示
 
高速化をOFF→中央揃え
 
という結果になりました。

   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

@yoko51 さん

親テーマに切り替えても症状が出るということは、CSSの記述以外の可能性があるかもしれません。

時間がとれたら、もう少し調べてみます。


   
yoko51 reacted
(@yoko51)
Eminent Member Registered
結合: 5年前
投稿: 18
Topic starter  

リフィトリー@leafytree さま

お忙しい中、優しいお返事ありがとうございます。

どうぞよろしくお願いいたします。

 


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

@yoko51 さん

ローカルのテストサイトで高速化設定をONにしてみたのですが、症状が再現できないでいます。 ? 

 

ということは、しばらくの間、高速化をONにしていただくのが手掛かりを掴む手段かもしれません。

 

わいひらさんは、だいたい19時~20時30分ぐらいにフォーラムにいらっしゃることが多いようです。

 

症状が見れる方が良いかもしれません。

 

もしかしたら、わいひらさんがOFFにしてください、などご案内するかもしれません、そのときはわいひらさんのご案内どおりが良いと思います。

This post was modified 3年前 2回 by リフィトリー

   
yoko51 reacted
(@yoko51)
Eminent Member Registered
結合: 5年前
投稿: 18
Topic starter  

リフィトリー@leafytree さま

高速化をONにしてみました。

いろいろ本当にありがとうございます。


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

今拝見すると、以下のものが当たっている気がします。

.wp-block-image .aligncenter>figcaption, .wp-block-image .alignleft>figcaption, .wp-block-image .alignright>figcaption {
    display: table-caption;
    caption-side: bottom;
}

 

上記は、以下のようす。

 https://c0.wp.com/c/5.8.1/wp-includes/css/dist/block-library/style.min.css 

Jetpack絡みのような気がしますが。。。
(確証はないですけど。)

これだけの影響ではないんでしょうけれど…。


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

キャプションのみならず、画像が以下のアドレスになっています。

src="https://i1.wp.com/yoko51.com/wp-content/uploads/2021/08/01_yozakuraB.jpg

画像も、Jatpackt絡み?の機能で表示していると思われます。
(CDN?)

Jetpackっぽいと疑うのですが。。。他にあるでしょうか。。。

 

あ…突然現れてすみません。


   
わいひら and yoko51 reacted
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

@yoko51 さん

figure要素が display: table;でないといけないのに、なぜかdisplay: block;に指定されちゃってますね。

.body .aligncenter {
    display: block;
    margin-right: auto;
    margin-left: auto;
}

 

通常ですと、原因切り分けのため、プラグインを全て停止してみる、というのを先ず試してみたいところでしょうか。(プラグインの影響かどうかを見極めるという意味で)

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

   
わいひら and yoko51 reacted
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

@mk2_mk2 さん

投稿者:: @mk2_mk2

画像も、Jatpackt絡み?の機能で表示していまっていると思われます。
(CDN?)

確かに、CDNっぽいURLですね。


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

リフィトリーさん

はい、Jetpackを疑います。

以下の辺りのような気はします。

 
Jetpackをローカル環境にインストールしてみたところ、日本語化されず見づらいですが…。
 
 
まずは、リフィトリーさんの仰る通り、全プラグイン停止を試すのが良さそうに思います。

   
わいひら reacted
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

@mk2_mk2 さん

Jetpackにはそのような機能があるんすね。

 

@yoko51 さん

CDNであることと別のCSSが適用されていることは、少し違うのかもしれないですが、一旦、停止してみるとやはり、何かわかるかもしれません。


   
yoko51 reacted
(@yoko51)
Eminent Member Registered
結合: 5年前
投稿: 18
Topic starter  

mk2 @mk2_mk2 さま 

リフィトリー@leafytree さま

 

丁寧なご回答ありがとうございます。

 

HTMLもCSSも初心者なので、細かい内容はあまり理解できていないのですが...

Jetpackを停止したら、中央揃えで表示されました!

 

JetpackをONにしたまま、中央揃えで表示することはできるのでしょうか?


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

リフィトリーさん
yoko51さん

Jetpackに「サイトアクレセレーター」という高速化機能があるようで、そのヘルプページに、今回のドメインが記載されています。
https://jetpack.com/support/site-accelerator/


   
わいひら and yoko51 reacted
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

@yoko51 さん

「Jetpack」は必要性を感じないので、一度も使ったことがありません。

 

「Jetpack」にも独自のCSSを適用させないような設定があるような気もしますが、そこは「Jetpack」に詳しい方に回答いただいた方が良いと思います。

 

ところで、「JetPack」を使い続けたい主な理由というのは何でしょうか?

いままで、フォーラムを拝読しているとJetpackの不具合って結構多いんですよね。

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

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

yoko51さん
リフィトリーさん

Jetpackのようですね。

JetpackのサイトアクセラレーターをOFFにするとどうでしょう?

 
赤枠部分です。
 
青枠は遅延読み込みで、こちらもOFFが良いですが、こちらはこのトピックで既に触れられていたと思います。

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

ところで、「JetPack」を使い続けたい主な理由というのは何でしょうか?

いままで、フォーラムを拝読しているとJetpackの不具合って結構多いんですよね。

こちらには、確かに…と思います。

昔はJetpackが必要だったのかもしれませんが、今となってはWordPress自身も進歩していたり、Cocoonの場合は、Cocoonの機能で十分かも…と思えるところもあります。

 

Jetpackも多機能で、いろいろな機能があるんですよね。
(Jetpackが追加するブロックもあるみたいです。)

お使いになる場合は、1つ1つ、WordPressやCocoon、その他のプラグインなどと機能が重複しないか、確認なさるのが良い気がします。
(重複している場合は、どれか1つを選択する。)

 

隠しメニュー的に下部の「モジュール」という部分を選択すると、1つ1つの機能のON・OFFをコントロールできるようです。

ただ、ローカル環境だと、全部の機能が表示されないみたいです。
(Jetpackって、ユーザー登録が必要なんですよね、確か。)


   
yoko51 and わいひら reacted
(@yoko51)
Eminent Member Registered
結合: 5年前
投稿: 18
Topic starter  

リフィトリーさま

mk2さま

 

わいひらさんの「Cocoonテーマとあわせて使用するのにお勧めなプラグインまとめ」という記事

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

 

「Jetpack」

 

が紹介されていたので、入れて使っていました。

Jetpackの統計機能を用いてアクセス状況を管理者に表示する機能が便利でよくみていたので、引き続き使えたらいいな、と思っています。


   
さる子 reacted
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 7949
 

yoko51さん

投稿者:: @yoko51

Jetpackの統計機能を用いてアクセス状況を管理者に表示する機能が便利でよくみていたので、引き続き使えたらいいな、と思っています。

上記であれば、私の添付した画像の「サイト統計機能」のみをONにしておけば良いと思います。
(添付画像は、ホワイトアウトされてしまっていますが。。。ローカル環境ですので。)

他の機能はOFFで良いかもしれません。

 

「サイトアクセラレーター」のOFFだけで、画像やキャプション表示が戻るのであれば、それだけでも良いかもしれないですね。


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

@yoko51 さん

投稿者:: @yoko51

Jetpackの統計機能を用いてアクセス状況を管理者に表示する機能が便利でよくみていたので、引き続き使えたらいいな、と思っています。

なるほど、アクセス解析にご利用になっているのですね。

 

フォーラムへのお問い合わせで、Jetpackが原因だったことも多く、個人的に良い印象がなかったため、伺いました。

 

きっとyoko51さんだけではなく、他の多くの方も、その機能を重宝しているのかもしれませんね。

 

Cocoonは非常に多機能なので、同様に多機能なJetpackと干渉し合ってしまうことも多いのかもしれません。

 

mk2さんのご案内のように、できるだけ必要な機能に絞って使う方が良いのかもしれません。

This post was modified 3年前 2回 by リフィトリー

   
さる子, わいひら, yoko51 and 1 people reacted
(@yoko51)
Eminent Member Registered
結合: 5年前
投稿: 18
Topic starter  

mk2 さま

リフィトリーさま

 

JetpackのサイトアクセラレーターをOFFにしたら、中央揃えになりました!

 

Jetpackを使い続けるか、やめるかは即決できないので、お二人の意見を参考に決めたいと思っています。

 

迅速に対応していただきまして本当にありがとうございました。とても助かりました。

 

 

 


   
rinrin, mk2, さる子 and 2 people reacted
共有:

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

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

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

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

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

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

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

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