紅蓮ブログ

アフィリエイトのことが全く分からないあなたに超簡単に詳しく、実戦形式でお話していくブログです

はてなブログをTwitterに埋め込む方法を解説【スマホも】

f:id:slash1196:20210404193554j:plain

f:id:slash1196:20200520205950j:plain
はてなブログでTwitterを埋め込みたい人

はてなブログで書いていて最近思うんだけど、Twitterの記事とかを貼って記事を作っている人多いよね。

私もはてなブログにTwitterを埋め込みたい。

でも方法がわからないから教えてほしいなあ。

 

こんなお悩みにお答えします。

 

今回の記事でわかること

  • はてなブログにTwitterを埋め込む方法について
  • Twitterは必要に応じて埋め込むようにしよう

 

こんにちわ。

紅蓮です。

 

ブログを書いていてインターネットで調べてみるとTwitterを記事中に表示したり、サイドバーにタイムラインを入れたりしているサイトって結構ありますよね。

 

ああいうのを見ると自分もやってみたいと思ったりしますよね。

 

今回はそんなあなたに、はてなブログでTwitterの埋め込み方法をお話します。

この記事を読み終わるころには、Twitterの埋め込み方法がわかっていることでしょう。

 

この記事を書いている僕ははてなブログは3年目。

カスタマイズ方法をいろいろググって問題解決をしてきました。

 

ですから安心して最後までお読みくださいね。

では行ってみましょう。

Here We Go!!

はてなブログにTwitterを埋め込む方法について

f:id:slash1196:20210404195053j:plain

ではさっそくここでははてなブログにTwitterを埋め込む方法についてお話していきましょう。

 

埋め込む方法は2つ

はてなブログにTwitterを埋め込む方法は2つあります。

以下の通り。

 

  • 方法①記事中にTwitter記事を埋め込む方法
  • 方法②サイドバーにタイムラインを埋め込む方法

 

1つずつ見ていきましょう。

 

方法①記事中にTwitter記事を埋め込む方法

はてなブログにTwitterを埋め込む方法の1つ目は、記事中にTwitterの記事を埋め込む方法ですね。

 

これは記事の中にTwitter記事を掲載させることができるで、読者にもTwitterの内容を見せることができ、読者にもフォロワーになってもらうこともできます。

 

記事とTwitter記事を連携させることで記事に深みが増すというポイントもあります。

方法②サイドバーにタイムラインを埋め込む方法

はてなブログでTwitterを埋め込む方法の2つ目はサイドバーにタイムラインを埋め込む方法ですね。

 

この方法はサイドバーにTwitterのタイムラインを埋め込むことができるため、Twitterに読者がアクセスしなくてもブログ上であなたがツイートしたのがわかります。

 

ただ、ブログ上には返信機能がないのでコミュニケーションをとるにはアクセスが必要という問題がありますね。

 

方法①はてなブログの記事中にTwitter記事を埋め込む手順

ここでははてなブログの記事中にTwitter記事を埋め込む手順についてお話していきましょう。

 

こちらはPC操作の時とアプリで操作バージョンがあります。

先にPC捜査の時から行きますね。

 

PCで作業をするときに、はてなブログの記事中にTwitter記事を埋め込む手順

ツイートの通りですね。


①入れたいTwitter記事を選び、横の・・・ボタンをクリック

PCで作業ではてなブログの記事中にTwitter記事を埋め込む手順の1つ目は、入れたいTwitter記事を選び、横の・・・のボタンをクリックすることです。(前はVボタンでしたがアップデートされて・・・のボタンになりました)

f:id:slash1196:20210404195212j:plain

 

②ツイートを埋め込むをクリック

PCで作業ではてなブログの記事中にTwitter記事を埋め込む手順の2つ目は、ツイートを埋め込むをクリックすることです。

 

f:id:slash1196:20210404195328j:plain



③Twitter埋め込み画面に移行するので、「コードをコピーする」をクリック。

PCで作業ではてなブログの記事中にTwitter記事を埋め込む手順の3つ目は、Twitter埋め込み画面に移動するので、「コードをコピーする」をクリックすることです。

 

f:id:slash1196:20210404195444j:plain

 

④コードをはてなブログ編集画面のHTML編集にペースト。

PCで作業ではてなブログの記事中にTwitter記事を埋め込む手順の4つ目は、コードをはてなブログ編集画面のHTML編集にペーストすることです。

 

f:id:slash1196:20210404195425j:plain

 

⑤プレビューで確認。

PCで作業ではてなブログの記事中にTwitter記事を埋め込む手順の5つ目は、プレビューで確認することです。

せっかく貼っても、うまく表示されているかがわからないので確認しておきましょう。

 

f:id:slash1196:20210404195512j:plain


スマホではてなブログの記事中にTwitter記事を埋め込む手順

ツイートの通りですね。

1つずつ見ていきましょう。

 

①好きなところで、画面の下部の</>埋め込みボタンをタップ

スマホではてなブログの記事中にTwitter記事を埋め込む手順の1つ目は、記事の好きなところで、画面下部の埋め込みボタンをタップします。

 

f:id:slash1196:20210404164507j:plain

 

②Twitterを選択

スマホではてなブログの記事中にTwitter記事を埋め込む手順の2つ目は、Twitterを選択します。

f:id:slash1196:20210404164526j:plain

 

③好きな記事を選び、選択したツイートを貼り付けをタップ

スマホではてなブログの記事中にTwitter記事を埋め込む手順の3つ目は、好きなTwitter記事を選んで、選択したツイートを貼り付けをタップします。

 

f:id:slash1196:20210404165240j:plain

 

④プレビューを確認

スマホではてなブログの記事中にTwitter記事を埋め込む手順の4つ目は、プレビューで確認します。

 

方法②サイドバーにタイムラインを埋め込む方法

次はサイドバーにタイムラインを埋め込む方法の手順ですね。

以下ツイートの通り。

なおこの方法は、PC版でしか使えないのであしからず。

 

では一つずつ見ていきましょう。

 

①自分のTwitterのトップページにアクセスしURLをコピー

サイドバーにタイムラインを埋め込む手順の1つ目は、自分のTwitterのトップページにアクセスしてURLをコピーします。

f:id:slash1196:20210404195604j:plain

 

②好きなTwitter記事に行って…マークをクリック

サイドバーにタイムラインを埋め込む手順の2つ目は、好きなTwitter記事に行って…マークをクリックすることです。

 f:id:slash1196:20210404195256j:plain

 

③ツイートを埋め込むをクリック

サイドバーにタイムラインを埋め込む手順の3つ目は、ツイートを埋め込むをクリックします。

 

f:id:slash1196:20210404195709j:plain


④コピーしたURLを貼り付け→をクリック

サイドバーにタイムラインを埋め込む手順の4つ目は、コピーしたURLを検索窓に張り付貼り付けて、→マークをクリックします。

 f:id:slash1196:20210404195634j:plain

 

⑤埋め込まれたタイムラインをクリック

サイドバーにタイムラインを埋め込む手順の5つ目は、埋め込まれたタイムラインをクリックします。

 

→マークを押すと下に移動して、表示オプションが選択できます。

左の埋め込まれたタイムラインを選択しましょう。

 

f:id:slash1196:20210404195842j:plain

 

⑥カスタマイズオプションを設定するをクリック

サイドバーにタイムラインを埋め込む手順の6つ目は、カスタマイズオプションを設定するをクリックします。

 

カスタマイズオプションを設定するところが出てきたら、カスタマイズオプションを設定するというところをクリックしましょう。

 

f:id:slash1196:20210404195903j:plain

 

⑦好きな大きさを入力して更新を押す

サイドバーにタイムラインを埋め込む手順の7つ目は、好きな大きさを入力して更新ボタンを押しましょう。

 

大きさですが、幅はそのままで全然かまわないんですが、高さに関しては大体600pxから800pxの間でいいと思います。

 

長いと思ったら適宜変更をするようにしましょう。

 

f:id:slash1196:20210404195929j:plain

 

⑧コードをコピーする

サイドバーにタイムラインを埋め込む手順の8つ目は、コードをコピーするを押しましょう。

するとコードがコピーされます。

 

⑨はてなブログの管理画面からデザインをクリック

サイドバーにタイムラインを埋め込む手順の9つ目は、はてなブログの管理画面からデザインをクリックします。

 

f:id:slash1196:20210404200119j:plain

 

⑩カスタマイズをクリック

サイドバーにタイムラインを埋め込む手順の10つ目は、カスタマイズボタンをクリックします。

f:id:slash1196:20210404200005j:plain

 

⑪サイドバーをクリック

サイドバーにタイムラインを埋め込む手順の11つ目は、サイドバーをクリックします。

f:id:slash1196:20210404200219j:plain

 

⑫+モジュールを追加をクリック

サイドバーにタイムラインを埋め込む手順の12つ目は、+モジュールを追加をクリックします。

 f:id:slash1196:20210404200300j:plain

 

⑬</>HTMLをクリックし、コピーしたコードを貼り付ける

サイドバーにタイムラインを埋め込む手順の13つ目は、</>HTMLをクリックしコピーしたコードを貼り付けます。

f:id:slash1196:20210404200332j:plain

 

⑭適用をクリック

サイドバーにタイムラインを埋め込む手順の14つ目は、適用を押します。

 

⑮変更を保存するをクリック

サイドバーにタイムラインを埋め込む手順の15つ目は、変更を保存するをクリックします。

f:id:slash1196:20210404200500j:plain

 

⑯プレビュー画面で確認する

サイドバーにタイムラインを埋め込む手順の16つ目は、プレビュー画面で確認しましょう。

せっかく入れてもできていなければもったいないですからね。

しっかりと確認しましょう。

f:id:slash1196:20210404200934j:plain

 

以上がTwitterをはてなブログに埋め込む方法でした。

 

Twitterは必要に応じて埋め込むようにしよう

f:id:slash1196:20210404195117j:plain

ここまではTwitterの埋め込み方に関してお話してきました。

ここではTwitterを埋め込むときには必要に応じて埋め込むようにしようというお話していきましょう。

 

Twitterを埋め込む前に知っておきたいこと

まずTwitterを埋め込む前に、知っておきたいことがあります。

注意点は以下の通り。

 

①Twitterのタイムラインは、実は重たくなる可能性がある

②表示速度が遅くなるので注意

 

特にタイムラインは、ツイートが多くなればなるほど更新されるような仕組みになっています。

そのために重く重くなっていきます。

 

そのために必要なのかをしっかりと考えたうえで、設置しましょう。

 

Twitterを埋め込む理由を考えよう

そもそもTwitterを埋め込む理由は何でしょうか。

その理由を考えてみましょう。

たぶん理由は以下のような感じではないでしょうか。


①読者にとって楽になるから
②記事が深くなる

 

確かにそうですよね。

ブログが利便性が高ければ高いほど、評価が高くなります。

 

ですから利便性のいいブログを作るためにもやった方がいいです。

 

とはいえTwitterをまずは使い倒そう

とは言えTwitterの内容が全く更新されていないのにブログのサイドバーにタイムラインを入れても意味がありません。

 

むやみに入れてもTwitterが更新されていないのは、読者にとっては

「なんでこれ入れてるのかわかんない」

という感じになってしまいますよね。

 

そうなってしまわないようにTwitterを更新しつつ、タイムラインを入れていくようにしましょう。

 

 

■まとめ|はてなブログにTwitterを埋め込んで読者のためのブログを作ろう

お疲れさまでした。

ここまではてなブログにTwitterを埋め込む方法に関してお話してきました。

 

Twitterを埋め込むことによってブログにいてもこんなツイートをしたのかなという事がわかりますよね。

 

そしてツイート自体が証拠になってどんどん深い記事が書けます。

ぜひお使いになってみてくださいね。

 

そのことが読者のためになるからです。

 

あなたのブログライフが最高のものになる明日を願って。

今回はこの辺で。

また次回に。