連載第119回
2015年8月22日
twitterのつぶやきを埋め込んでセンターに配置したい(CSSのワイルドカード「*」)

 先日『この世界の片隅に』特報1公開に合わせてブログを書いていた時、片渕須直監督のツイートをページに埋め込んでいて、あることに気づきました。
 当ブログでは基本的に、テキストや画像などはセンター配置としています。そんなわけでこれまでは、当然のことながらツイートの埋め込みもセンターに揃えたいと思い、CSSでは<iframe>タグに対して次のように設定していました(埋め込みコード取得時の<blockquote class〜>は<iframe id 〜>に変換されてしまうので)。

以前のツイート埋め込みセンター配置

iframe#twitter-widget-0 {
	margin: 40px auto !important;
	width: 580px;
}

1行目:埋め込みコードには<blockquote class=”twitter-tweet” lang=”ja”>とあるけど、ブラウザで表示される際には<iframe>になる。

 こんな感じに、センターに配置されます(↓)。 

 従来はこれで問題なかったのだけれど、たまたま偶然、先日のそのブログ記事で片渕須直監督のツイート2個目を同ページ内に埋め込んだとき、その2個目はセンター配置にならずに左寄せになってしまいました。
 毎度のようにしばらく「???」が脳内に浮かんでいたのですが、ソースを見てみたらその2個目に埋め込んだツイートは「twitter-widget-1」になっていました。「0」の箇所が「1」に、つまり連番になっていたのです。

CSSの「*」ワイルドカード?

 ツイートを埋め込んだ順番にtwitter-widget-×の数値が変わるので、CSSでレイアウトを指定する際は、その×の箇所がどんな数値であっても良いようにワイルドカードにしないといけないな…と思ったのですが「そもそもCSSにワイルドカードってあったっけ?」と再び「???」が頭上で舞い踊りました。で、ググったら下記のサイトがとても参考になりました。ありがとうございます。

外部サイト参考記事
CSSセレクタにワイルドカードや正規表現を使いたいとき(西澤直木のIT講座ブログ)

 記事を上から下まで目を通して「CSSにもワイルドカード使えるんだ!」という新鮮な驚きを覚えつつ、下記のように修正。

twitter-widget-×のワイルドカード対応

iframe[id*="twitter-widget-"] {
	margin: 40px auto !important;
	width: 540px !important;
}

1行目:参考記事を踏まえて言えば「id属性が「twitter-widget-」で始まるiframeタグ」という意味になります。

 そして、2個以上のツイートを埋め込んでも、無事に全てセンター配置にすることが出来ました。偉大なるかなアスタリスク。

 今日この記事を書いている時、またソースを見てみたら連番の箇所が乱数っぽい感じの数値に変更されていて、まあ偶然だけど早めに気付いて修正しておいて良かったなあ、と思いました。