TT2テーマでTwitter埋め込み時に中央揃えができないのを解消する方法

公開日:2022(令和4)年9月8日/最終更新日:

Twenty Twenty-Two Theme Customize | Personal WP Customization Notes (PWCN)

【景品表示法に基づく表記】ページ内のコンテンツには、商品プロモーションが含まれています

直前に公開した「Cocoonテーマはエックスサーバーに事業譲渡されたんだって」を書いた際にTwitterの埋め込みブロック使ったら、中央寄せできないじゃないの!!という事態が発生!

TT2テーマの仕様?それともWordPress自体のバグ?、それともカスタマイズ方法がよくなかった? よくわからないけど、当たってるCSS調べたら、左右中央寄せ時にはきちんと寄るようにスタイルコードがあるものの、親のfigureタグのクラスに幅の指定がない(=幅は100%)ので、100%幅のものを寄せろって言ってもねぇ..という形になっていました。

しかも左右の場合には「幅400px 最大幅100%」と指定されていて、中央揃えの時だけ何もなしの状況。

左右寄せの時は幅が狭くなって寄せられ、中央の時には何も寄らないという形でした。

まあ、左右寄せ時も特に幅を狭くする必要もないので、以下のコードをCSSへ追加して左右中央とも幅500pxのまま寄るようにしました。

TT2子テーマを使っている方は、style.cssへ追加するだけで問題解消できます。

>>私が作ったTT2の子テーマでよければこちらで配布してます。

/* 埋め込みの幅を指定(中央揃えを効かす、左右寄せの幅が狭くならなくする) */
.wp-block-embed {
    max-width: 500px!important;
    width: 100%;
}

私は埋め込みをほとんど使わないので、たまたま気づきましたが、他のテーマでも起こってるかも知れませんし、上記コードで改善できるかも知れません

Lolipop ServerMoshimo Ad x-serverMoshimo Ad

WordPress Trouble Shooting and Repair | Personal WP Customization Notes (PWCN)
画像ブロックで左右寄せの動作が編集画面と閲覧画面でうまく機能しないときのチェックと対処方法(メモ)