ブログ

【保存版】Twitterをブログに埋め込む方法

ブログを始めてしばらく経ちますが、ブログの設定は色々と覚えることが多くて大変です。

一生懸命に調べたことも、久しぶりにやってみると結構忘れてしまったりしていませんか?

私も思い出したときにメモに残すようにしてはいるのですが、なかなか上手くいかず。

ということで、自分なりのまとめ記事を残すことにしました。

Twitterをブログに埋め込もう

  • 特定のツイートを埋め込む方法
  • 3つの基本デザイン設定の方法


ブログとTwitterを連携させる場合、こういった場面が多々発生しますよね?

特定のツイートを自分のブログに埋め込む方法と3つの基本的なデザイン設定の方法をご紹介していきます。

えふまる
ぴー❤(やっと出番がキター)
エフマルはTwitter担当だったね!任せて!
ぴろり

 

特定のツイートを埋め込んでみよう

難しいことではありませんが、今回の最終的なイメージはこんな感じです。↓↓↓↓

 

 

簡単なことなのに忘れがちなので丁寧に解説していきたいと思います。

 

サイトを開いてIDを入力

まずはサイトを開きます ⇒ https://publish.twitter.com/#

ここでTwitter IDを入力します。

 

タイムラインの選択をします

 

対象のツイートを選択

 

リンクを埋め込む

右上の矢印をドロップダウンして『ツイートをサイトに埋め込む』を選択します。

 

『このツイートをサイトに埋め込む』という画面が表示されるので、表示コードをコピーします。

 

テキストモードでコードを貼り付ける

 

(モザイクがきつ過ぎてわかりにくいですが、ちゃんとコードをはりつけいます)

 

プレビューで表示を確認する

記事をプレビューをして表示を確認してみましょう。

↓↓↓ 以下のようにきちんと表示されていたらOKです ↓↓↓

 

 

これでいったんは完成ですが興味がある人はデザインをカスタマイズでしてみましょう。

 

デザインをカスタマイズしてみよう

ここでは基本的なデザイン変更について紹介したいと思います。

ただ埋め込むだけではなくちょっとはデザインを変更したい!という人は参考にしてください。

3つの基本デザイン設定

  • 位置を中央に寄せる
  • リンクの色を変更する
  • 背景を黒に変更する

位置を中央に調整する

この調整は多くの人が気になるところかと思いますが、やり方はとても簡単です。

↓↓↓ 完成イメージはこんな感じです ↓↓↓

 

それではやり方を説明していきます。

テキストに張り付けたコードを確認してみると下記のよな構成になっています。

<blockquote class="twitter-tweet" data-lang="ja">
<p lang="ja" dir="ltr">[ツイート本文]</p>
&mdash; [名前] (@[ユーザー名]) <a href="[該当ツイートへのURL]">[ツイート日時]</a>
</blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

 

そこで下記の赤文字のように align="center" と挿入するだけです。

<blockquote class="twitter-tweet" data-lang="ja" align="center">
<p lang="ja" dir="ltr">[ツイート本文]</p>
&mdash; [名前] (@[ユーザー名]) <a href="[該当ツイートへのURL]">[ツイート日時]</a>
</blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

後はプレビューできちんと表示されていることを確認してみて下さい。

右側に寄せる場合は align="right" 左側は align="left" を入力してね

 

リンクの色を変更する

リンクの色については『色コード』を使って好きな色に変更が可能です。

ここではわかりやすいように赤色の#ff0000』を使って変更してみます。

↓↓↓ 完成イメージはこんな感じですね ↓↓↓

 

下記の赤文字のように data-link-color="#ff0000" と挿入してみて下さい。

<blockquote class="twitter-tweet" data-lang="ja" data-link-color="#ff0000">
<p lang="ja" dir="ltr">[ツイート本文]</p>
&mdash; [名前] (@[ユーザー名]) <a href="[該当ツイートへのURL]">[ツイート日時]</a>
</blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

 

背景を黒に変更する

↓↓↓ 完成イメージはこんな感じですね ↓↓↓

 

下記の赤文字のように data-theme="dark" と挿入してみて下さい。

<blockquote class="twitter-tweet" data-lang="ja" data-theme="dark">
<p lang="ja" dir="ltr">[ツイート本文]</p>
&mdash; [名前] (@[ユーザー名]) <a href="[該当ツイートへのURL]">[ツイート日時]</a>
</blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

 

まとめて変更する場合

ここまで3つの基本カスタマイズを紹介しましたが、もちろんまとめて一緒にデザインを変更するこもできます。

 

3つまとめての場合はこれまでと同じように align="center" data-link-color="#ff0000" data-theme="dark" と全て入力して下さい。

<blockquote class="twitter-tweet" data-lang="ja" align="center" data-link-color="#ff0000" data-theme="dark">
<p lang="ja" dir="ltr">[ツイート本文]</p>
&mdash; [名前] (@[ユーザー名]) <a href="[該当ツイートへのURL]">[ツイート日時]</a>
</blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

 

おわりに

ブログに関するこの手の話はきっと数えられないくらいあります。

思い出すのが大変なときはこうやって記事にして残すほうが良いのかもしれません。

同じ悩みの人の参考になるかもしれないし、自分にも記事を書く練習になりますしね。

 

初歩的な内容ですが、特定ツイートを埋め込みたい人は参考にしてくださいね。

Twitterも更新しているのでよろしくお願いします
ぴろり
えふまる
ぴー❤(Twitter担当です)

 

 

-ブログ
-,

© 2020 ぴろり休憩中