Twitter

ブログにツイートを貼り付けたい!ブログを書いてるとTwitterの情報をブログに取り入れたい時がありますよね?

しかし、やり方がイマイチわからない人や、なんとなくわかったがリンク埋め込みどっちを使えばいいの?って人に向けて説明していきます。

Twitterをブログに埋め込みする1番シンプルな方法とは?

ブログにツイートを埋め込むには2種類の方法があります。

  1. URLを取得して貼り付ける方法
  2. コードを取得して貼り付ける方法

そして1番シンプルで簡単な方法が①の[URLを取得して貼り付ける方法]になります。

2019/12現在、確認したところリンクをコピーが表示されなくなっていました。
原因を調べて報告したいと思います。

※追記;表示カ所が変わっただけと、わかりました

ではどのようにすればブログに貼り付けることができるのでしょうか

取得方法から貼り付け方まで説明していきます。

URLを取得し貼り付ける方法

ツイートをブログに簡単に埋め込みたいならリンクで貼り付ける方法がおすすめです。

URLを取得方法

Twitter

まずは、ブログに埋め込みたいツイートを表示させます。

ツイートの右上にのマークがあるので、それをクリックします。

Twitter

すると[ツイートのリンクのコピー]が表示れるのでクッリクしてコピーします。

あとはこれをブログに貼り付ければ完了です。

 

URLを貼り付ける

Twitter

リンクをコピーしたらブログに貼り付けるだけです。

ワードプレスでリンクを貼る場合にはビジュアルモードでも、テキストモードでもOKです。

私は自分のブログにツイートを埋め込むときは、この方法でやってます。
簡単が一番ですからね(*^^*)

2019/12現在、リンクをコピーが表示されなくなっています。
原因を調べて報告したいと思います。

ツイートをブログに表示させたい方は下記の【埋め込みコードのやり方】でお願いします。

※追記以前はツイートの右上からURLのコピーができていましたが、変更により右下のマークからURLのコピーができるようになりました。

 

埋め込みコードを貼り付ける方法

ブログにツイートを埋め込む、もう1つの方法に埋め込みコードを貼り付けて表示させる方法があります。

URLとコードの違い

では、先ほどのリンクを貼り付けるのと、コードを貼り付けるのは一体何が違うのでしょうか?

その違いはカスタマイズできるか、できないかです

コードを使用することで出来るカスタマイズは、右寄せ・センタリングなどの位置決めや、背景の色を変えたりすることができます。

埋め込みコードを取得する

Twitter

リンクを取得した時と同じく、マークからツイートをサイトに埋め込むを選択してコードを表示・コピーします。

Twitter

この長い文字列がコードになります

あとはコードを貼り付ければ完了です。

コードを貼り付ける

Twitter

 

リンクを貼り付ける場合はビジュアルモード・テキストモードどちらでも可能でしたが

コードの場合はテキストモードからのみの貼り付けとなります。

このコードの内容を変えることにより、カスタマイズすることが可能となります。

コードによるカスタマイズ方法

コードをカスタマイズすることにより、センタリングやリンクの色、背景色の変更などができるようになります。

自分のブログカラーに合わせて配色したい場合などに便利ですね。

カスタマイズ用のコード

次のカスタマイズ用のコードを[blockquote class="twitter-tweet"data-lang="ja"]のあとに追加でコードを入れるとカスタマイズされます。

左寄せ data-align="left"
センタリング data-align="center"
右寄せ data-align="right"
リンク色 data-link-color="#cc0000"
背景色 data-theme="dark"

<使用例>

カスタマイズなし

Twitterカスタマイズ

 

これに次のカスタマイズ用のコードを追加してみます。

  • センタリング
  • リンク色(レッド#ff0000)
  • 背景色(ダーク)

Twitterカスタマイズ

追加してみました

極端ですが、印象がかなり変わりますね

#ff0000は色のコードで、WEB色見本 原色大辞典ーHTMLカラーコードのサイトなどを参考にして下さい。

背景色は"dark"(黒)と"light"(白)の2種類です。黒背景にしたい場合だけ入力すればOKです。
(何も入力しない場合は白背景です)

Twitterをブログに埋め込む1番シンプルな方法はURLです。まとめ

  • とりあえず簡単に埋め込みたい人はリンク(URL)一択
  • 人と同じのは嫌って人は埋め込み
  • [blockquote class="twitter-tweet"data-lang="ja"]の後に追加する時に半角スペースを忘れずに!

埋め込み方わかりましたか?

ノーマルで埋め込むのもいいですし、カスタマイズして他のブログと差別化を図るのもいいですね。

ツイートを利用してどんどんブログに呼び込みましょう(*^^*)

 

 

おすすめの記事