Exception Code.

iPhone、Macと読書が大好き。iPhone・Mac・書評を中心に好きな事を書いていました。今は『ほーくブログ』でブログを書いています。

ブログにTwitterのツイートを貼り付ける時に中央表示させる方法

      2013/08/24

C777 PCwosawarukoibito500

しれっとWordPressのテーマを作り直しました。これまであまりにも内部を含めたデザインにこだわりが無かったことを反省してます。一番痛かったのはh1タグの次がh3タグだったことです。奴はとんでもないものを盗んでいきました。h2です。

そんなわけでこれからはきちんと綺麗に見えるブログを書きたいと思っています。綺麗に見せる第一弾として、ツイートをブログに綺麗に中央寄せで貼り付けるというのが個人的命題になっておりましたが、結構ややこしかったのでやり方をメモ。

ツイートを中央寄せする方法

まずツイートを持ってこなければ話になりません。なので持ってきます。
ブラウザで貼り付けたいツイートを見つけ、その他から「ツイートをサイトに埋め込む」を選択。

Twitter HawkA

埋め込み用コードが表示されるのでコピーしてブログ編集画面に貼り付けます。

ほーくえーす hawk a さんはTwitterを使っています

ちなみにWordPressはツイートのURL貼り付けるだけで自動的にツイートを表示してくれますが、その場合の中央寄せできないのと、ツイートのURL持ってくるより埋め込むコード持ってくる方が楽なのでこのやりかたを取ってます。

んで、埋め込みコードの

class="twitter-tweet"

のところを

class="twitter-tweet tw-align-center"

に変えてやると…

この通り。これをTextExpanderとかでスニペット登録などしとくと、とっても楽になります。個人的にはもっと楽でプラグインに頼らない方法がある気がしてならないんですが、なんかないかなー。miwaのライブ楽しみ。

参考:WordPressにTwitterのTweetを埋め込んで、左寄せ、中央揃え、右寄せする手順まとめ |ウェブシュフ

TextExpander for Mac

3,000円
(2013.08.23時点)
posted with ポチレバ

 - WordPress

  関連記事

WordPressプラグイン「YARPP」で関連スコア設定を変えても関連記事が表示されないときの対処法

関連記事へのリンクを画像つきで表示してくれるのに加えて、ものすごい細かい設定も可 …

【WORDPRESS】iPhoneで見られないだとっ…WPtouchが上手く作動しないときの対処法

パンダ見てきた。 WORDPRESSに移行した途端におでかけしたりおでかけしたり …

WPtouchを使っててもGoogleAnalyticsのアクセス解析の設定をする必要があるようなので血眼になって設定したからやり方書いたよ!

ブログをやってると、やっぱりどれくらいの人が見てくれてるのか気になっちゃう僕。 …

[WordPress]ブログのデザイン改造なう。デザイナーに尊敬の眼差し

最近のGoogleアルゴリズムの変更によるアクセス減や、現在のデザインがちょっと …

WordPressのテーマをちょこっとバージョンアップしました

まだ完成には至っていない、本ブログの自作テーマ。 ちょこっとバージョンアップでき …

[WordPress]いつ、どのブログ記事にアクセスされたかがすぐわかるプラグイン「Post Views」

ブログを書いていると、どうしても気になってしまうのがアクセス数。 主にアクセス解 …

[WordPress]All in One SEOとMarsEditを組み合わせて使っている人が気をつけるべきこと

本ブログはSEO対策としてAll in One SEOを使用しています。 Las …

[WordPress]BackWPupの「No destination correctly defined for backup! Please correct job settings.」エラー対処法

WordPressのデータベースを手軽にバックアップできるプラグイン「BackW …

【WordPress】IEで見たときにブログが中央表示されないのでいろいろ考えてみる

CSS Carved Pumpkin / mauricesvay CSS!CSS …

[Mac]WordPressの本番環境をそのままローカルに移行する方法

そろそろブログテーマが化石と化してきたので、テーマでも作ってみようかと思い立ちま …