【WordPress】Twitter(X)の埋め込みコンテンツを左右方向に中央揃えする方法

目次

概要

WordPressにはTwitter (X)のコンテンツを埋め込む機能が用意されています。
今回、デフォルトの状態では埋め込みコンテンツの大きさが小さく、中央に配置されなかったため、私なりの対処法を備忘録として残しておきます。

結論
  • Twitterの埋め込みコンテンツそのもののサイズを完全にコントロールするのは、CSSだけでは難しそう
  • 埋め込みコンテンツをラップしている要素の幅を指定したうえで、左右のmarginの指定をautoにすることで中央揃えすることは可能

CSS

最終的に、下記のようにCSSを設定することで、左右方向の中央揃えだけは実現できました。

CSS
.wp-block-embed-twitter{
	max-width: 550px;
	margin: 0px auto!important;
}

解説

いろいろ試行錯誤した結果、Twitterの埋め込みコンテンツの幅や高さを支配しているのは、iframe要素であることがわかりました。
そのため、CSSだけで埋め込みコンテンツの幅を完全にコントロールするのは難しく、JavaScriptやjQueryを駆使する必要があります。
筆者にそこまでの技量はないので、今回は妥協して左右方向に中央寄せすることだけを考えました。

iframeをラップしている要素としてwp-block-embed-twitter要素（使用しているテーマによって違うかも）があったため、これにCSSを設定していきます。
幅の指定は、iframe要素の最大幅が550px (※1)のようでしたので、max-width:550px;と記述しています（550pxまでであれば任意の数値でOKです）。
また、margin: 0px auto!important;で左右方向に中央に寄せます（上下のmargin指定はお好みで結構です）。

※1　もう少し具体的にいうと、0px〜550pxまでの範囲であればwp-block-embed-twitter要素に合わせてiframe要素の幅が変化しますが、550px以上の数値を指定してもiframe要素の幅は550pxで打ち止めになる、という仕様のようです。