ブログに埋め込んだツィートをセンタリングするスタイルシートの書き方

ブログに埋め込んだツィートをセンタリングするスタイルシートの書き方

 

Photo-Mix / Pixabay

ブログを書く動機付けの意味もあって、WordPressで使っているブログテーマを変更しました。Simplicityは素人の私にも内部構造がわかりやすいテーマでしたが、試用しているmodernizeはまだまだわからないことがたくさんあります。そのため、今のところは、カスタマイズしくいテーマという印象です。記事を書くことに力を入れるためにはベストな選択だったと言えると思います。

WordPressテーマ変更!シンプルなテーマ「modernize」を試用中
ブログ更新ができない状況からなかなか抜け出すことができません。 ブロガーでもないのに記事が書けないことを思い煩ったりしてしまう時もあり...

さて、そんなmodernizeですが、少しだけ手を入れることにしました。といっても、見出しをデザインを変えたり、SNSボタンを置いたりしただけなんですけど・・・その過程で悩んでしまったことがあったのですが、解決できたので備忘録として残しておきたいと思います。

埋め込みツイートをセンタリングする方法

課題となったのは、記事に埋め込みツイートがセンタリング表示できないということです。Simplicityを使っていた時は、センタリングができていたように思うのですが、新しいテーマで記事内容を確認していた時に気づいてしまいまいました。

Twitterの公式リファレンスでは、センタリングするためにソースコードに「align=”center”」を入れることが推奨されています。でも、できればスタイルシートで事前設定の方が簡単です。

そのため、今まではスタイルシートに次のような記述を書き加えていました。

記憶が曖昧なのですが、Simplicityを使っていた時は、これでセンタリングができていたと思います。ところが、この記述ではセンタリングができていないことに新しいテーマを使い始めて気づいたというわけです。

そこで、Google先生に聞いてみると、次のような記述をするとセンタリングできるということがわかりました。

このように記述を変更してみたら、次のように埋め込みツイートがセンタリング表示されました。こんな感じです・・・

埋め込みyoutubeをセンタリング表示する方法

ちなみにyoutubeのセンタリングは、次のようにして行っています。

スタイルシートでは・・・

HTMLでは・・・

この手順を踏むと、youtubeを次のような感じでセンタリング表示できます。

備忘録は以上です。

スポンサーリンク
Facebookページにいいね!をしよう
最新ニュース情報をチェックしよう!

オススメ記事