男子社会人のひとりよがり

名前:わたMAN   職業:大学生  時事ネタや自分の趣味などさまざまなジャンルを書くかもしれませんがお許しください。

【徹底解説】はてなブログでTwitterのツイートを記事内に埋め込む方法

スポンサーリンク

f:id:herawata:20180820013455p:plain

こんにちは!わたMANです。

 

本記事ではタイトルの通り、はてなブログでTwitterのツイートを記事内に埋め込む方法について解説していきたいと思います。

ブログをより多くの人に読んでもらうために、ブログとTwitterを連携することは必須です。

Twitterで日頃つぶやいていると、そのツイートの内容をそのままブログのネタに使えたりするので、ネタ作りに困ることもありません。

 

また、Twitterのツイートをそのままブログに埋め込むことができたら、ブログを書くスピードが物凄く早くなります。

ぜひこの記事を読んで、ブログとTwitterを上手く連携して使えるようになってください。

 

はてなブログの機能を活用してツイートを埋め込む

 1.はてなブログの編集画面を開きます

f:id:herawata:20180820003506p:plain

 

2.右側のメニュー画面からTwitterのアイコンをクリック

f:id:herawata:20180820003713p:plain

 

3.記事内に埋め込みたいツイートを選択

f:id:herawata:20180820003828p:plain

 

4.選択したツイートを貼り付けをクリック

 

めっちゃ簡単にできましたーーー

f:id:herawata:20180820004230p:plain

自分のツイートだけではなく、自分がいいねを押したツイートやタイムラインに流れているツイートも貼り付けることができます。

 

 Twitterのアカウントからツイートを埋め込む方法

 Twitterを埋めこむ方法としては1つ目のはてなブログの機能を使用してやる方法で大体OKです。

しかし、自分がフォローしていない人のツイートを埋め込みたい場合や、

お気に入りやタイムラインからツイートを探すのが面倒な時は、

Twitterアカウントから埋め込む方法の方が便利です。

 

1.埋め込みたいツイート主のプロフィール画面に行く

f:id:herawata:20180820005050p:plain

 

2.埋め込みたいツイートの右上の下三角をクリック

f:id:herawata:20180820005249p:plain

 

3.ツイートをサイトに埋め込むをクリック

f:id:herawata:20180820005730p:plain

 

4.リンクをコピー

f:id:herawata:20180820005836p:plain

 

5.はてなのHTML編集画面に貼り付け

f:id:herawata:20180820010224p:plain

 

できましたー

やはりTwitterからの方が少し手間がかかりますが、はてなブログの機能でツイートが見つけにくいときはこちらの方法を使用してみてください。

 

ツイートの埋め込みを中央寄せにする方法 

デフォルトの貼り付けだと、左揃えになってしまいます。

 

f:id:herawata:20180820010654p:plain

僕は大雑把な人間なので、左揃えのままで投稿してしまうことも多いですが、

体裁を良くするためには中央揃えにした方がいいかもしれません。

 

中央揃えにする方法は2種類あります。

・ツイートのリンクのコードを変更する

・HTMLのセンタータグを使う方法

があります。

 

ツイートのリンクのコードを変更する

f:id:herawata:20180820005836p:plain

先ほどのこのコードを一部変更することで中央寄せにすることができます。

コードを取得しはてなブログの編集画面で「HTML編集」欄に直接貼ります。

この時、コード内のクラス(class="twitter-tweet")部分を、(class=”twitter-tweet tw-align-center”)に変更することでセンタリングできます。

 

おーーーできたーーー 

 

HTMLのセンタータグを使う方法

上記の方法は、Twitterの公式サイトからツイートをもってきた場合のみの方法です。

はてなブログの機能からツイートを埋め込んだ場合は方法が異なります。

 

HTMLの編集画面で下記のようにコードを変更してみてください。

f:id:herawata:20180820012229p:plain

<p></p>のところをセンタータグ(<center></center>)で括ってください。

 

できたーーー

簡単なのでぜひ試してみてください。 

 

まとめ

今回は、はてなブログでTwitterのツイートを記事内に埋め込む方法について解説していきました。

冒頭にも言いましたが、ブログでツイッターを活用することで記事執筆の高速化させることができます。

Twitterとブログは大きく重なる部分があるので、Twitterをやってない人はぜひ始めて見てください。

 

最後まで読んでくれてありがとうございました。

よかったら読者登録よろしくお願いします。