HCDコンサルティング(旧・中川勉社会保険労務士事務所FPウェブシュフ)のブログ

WordPressにTwitterのTweetを埋め込んで、左寄せ、中央揃え、右寄せする手順まとめ

2013-03-17_2227
By: JoshSemans

「Wordpressにツイッターのツイートを貼り付けるのはとても簡単」といってはばからなかった@web_shufuです。ですが、Centeringしようとして見事に躓いたたので手順をメモします。

Tweetを左寄せで埋め込む-1

まず、twitterに行って、埋め込みたいtweetの「開く」または「画像を表示する」を右クリックしてURLをコピーします。
2013-03-17_2227

後は以下のような形式のURLをwordpress編集画面に貼り付けるだけです。

https://twitter.com/web_shufu/status/313156504402395136

結構綺麗に整形されたtweetが左寄せで表示されます。

この方法はとても簡単です。でも中央揃えや右寄せが出来ません。

Tweetを左寄せで埋め込む-2

ところで、Tweetを左寄せで埋め込む方法にはもうひとつあります。

まず、埋め込みたいtweetの「その他」をクリック、その後「ツイートをサイトに埋め込む」をクリックします。

2013-03-17_2207

すると、コードが表示されるのでコピーします。
2013-03-17_2211

コード

コピーしたコードはこんな感じです。wordpress編集画面で、Tweetを埋め込みたい場所にコード貼り付けます。

<blockquote class="twitter-tweet" lang="ja"><p>本日更新記事: 事業用ではない、生活用口座の取引明細も仕訳帳に改造する <a href="http://t.co/qPJ6biM00u">http://t.co/qPJ6biM00u</a></p>&mdash; ウェブシュフ (@web_shufu) <a href="https://twitter.com/web_shufu/status/576365845728903168">2015, 3月 13</a></blockquote>

表示

すると以下のようにTweetが左寄せで表示されます。

最初に紹介した方法と全く同じ表示になりますが、この方法はワードプレス以外でも使えるオーソドックスな方法です。

これに少し手を加えるとセンタリングや右寄せが出来ます。

Tweetを中央に埋め込む

上のコードのclass=”twitter-tweet”をclass=”twitter-tweet tw-align-center”に変えると、Tweetが中央によります。

また、tw-align-centerをtw-align-rightに変えると、Tweetが右寄せになります。


投稿日

カテゴリー:

投稿者:

 最終更新日:

タグ: