【簡単】はてなブログにツイッターのタイムラインを埋め込む方法

スポンサードリンク
この記事は約4分で読めます。
スポンサードリンク

f:id:a720b720c720:20190524225031j:plain

どうも。

 

ブログにでよく見るTwitterのタイムライン。みなさん表示させていますか?

 

 ちなみにこのブログではこんな感じです。

f:id:a720b720c720:20190525073721p:plain

 

意外とはてなブロガーさんの中には、Twitterはやっているけど、表示させていない方がいるみたい。

 

今日は簡単にタイムラインをはてなブログのサイドバーに埋め込む方法をご説明します!

 

TwitterのタイムラインのHTMLコード取得

まずはタイムラインのHTMLコードを取得します。たった4つの手順で完了します。流れはこんな感じ。

 

  1. Twitter Publishへ
  2. Embeded Timelineを選択
  3. TwitterのURLを貼り付ける
  4. HTMLコードを取得

 

それでは1つずつ説明していきます。

1.Twitter Publishへ

Twitter Publish」から取得できますので、リンク先へ。

publish.twitter.com

 

こんな画面が出てくると思いますので、少し下にスクロール。

f:id:a720b720c720:20190525071130p:plain

2.Embeded Timelineを選択

どんな形式のHTMLコードを取得するかを決めます。

今回はタイムラインですので、真ん中赤枠の「Embeded Timeline」をクリックしてください。

f:id:a720b720c720:20190525071440p:plain

3.TwitterのURLを貼り付ける

下の画面が表示されます。

赤枠の中にあなたのTwitterのURLをコピペで貼り付けてください。

f:id:a720b720c720:20190525071840p:plain

 

コピペ後に「Preview」をクリックしてください。

TwitterのURLの取得は

TwitterのURLはあなたのTwitterのホームから取得してください。

または、赤字の部分にあなたのIDを入力したものが、TwitterのURLになります。「@」は含みませんので注意して下さい。

 

 

ちなみに僕のIDは「a720b720c720」なので、以下のようになります。

https://twitter.com/a720b720c720

 

4.HTMLコードを取得

プレビュー画面が表示されます。赤枠内「Copy Code」をクリック。

 

f:id:a720b720c720:20190525072125p:plain

 

下の画面が出たらHTMLコードがコピーされ、取得完了です。

f:id:a720b720c720:20190525072015p:plain

はてなブログのサイドバーにタイムラインを設置する

 さて、では次にはてなブログのサイドバーにTwitterのタイムラインを設置します。

 

流れは以下です。

 

  1. サイドバーへ
  2. モジュールを追加する
  3. HTMLコード貼り付け

 

こちらも、1つずつ説明していきます。

 

1.サイドバーへ

ダッシュボード→カスタマイズ(スパナマーク)→サイドバーの順

f:id:a720b720c720:20190525072615p:plain

 2.モジュールを追加する

 サイドバーを開くと下部にモジュールを追加するボタンがあります。クリックしてください。

 

f:id:a720b720c720:20190525072747p:plain

3.HTMLコード貼り付け

下記のようなウィンドウが開きます。左側のメニューから、HTMLを選択してください。

 

タイトルはお好みでOK。「Twitter」でも「ツイッター」でも「ツイート」でも。

 

そして最後に先ほど取得したHTMLコードを下の画像の場所へ貼り付けるだけ。

f:id:a720b720c720:20190525073213p:plain

あとは、「適用」をクリックすれば完了。これでサイドバーにTwitterのタイムラインが埋め込まれました。

サイドバーのタイムラインをカスタマイズする

ほぼほぼ完成しましたが、そのままコードを貼り付けるとこんな感じになります。

 

f:id:a720b720c720:20190525074323p:plain

 

縦にめちゃくちゃ長い…

 

無駄に伸びてしまっているので、整えてあげましょう。

サイズを変える

<a class=”twitter-timeline”width=”320px” height=”400px”

href=”https://twitter.com/a720b720c720?ref_src=twsrc%5Etfw“>Tweets by souken_blog</a> <script async src=”//platform.twitter.com/widgets.js” charset=”utf-8“></script>

 
コードの””twitter-timeline”の後ろにwidth=”320px” height=”400px”を追加してあげてください。
 
ちなみに

 

  • width=幅
  • height=高さ(長さ)

です。

 

赤の数字の部分をいじっていただければ、お好みのサイズにカスタマイズしていただけます。

カスタマイズ参考記事

このサイドバーのカスタマイズは以下の記事を参考にさせていただきました。

souken-blog.com

最後に

以上が、ブログにTwitterのタイムラインを埋め込む方法です。

 

ブログ運営とツイッターはもはや2つで1つですね。まだの方はすぐに始めて、ブログにタイムラインを表示させてみましょう。

 

ブログっぽさがグンと増しますよ。

コメント

タイトルとURLをコピーしました