ブログ運営

【初心者向け】ブログにTwitterのタイムラインを表示する方法【画像付きで詳しく解説】

ブログにTwitterを表示する方法

悩んでる人
ブログにTwitterを埋め込んでる人多いけどどうやってやるんだろう

Twitterのタイムラインをブログに表示したい


こんなお悩みを解決します。

kawateru
こんにちは、かわてるです!(@kaz_lion)

今回はTwitterのタイムラインをブログに表示する(埋め込む)方法を、

初心者向けに画像多めで紹介していきます。

 

本記事のテーマ

【初心者向け】ブログにTwitterのタイムラインを表示する方法【画像付きで詳しく解説】

 

↓こんなやつです。


 

 

本記事の内容

  • ブログにTwitterのタイムラインを表示する方法
  • タイムラインの幅を調整して表示する方法
  • ダークモードでタイムラインを表示する方法

 

ブログにTwitterのタイムラインを表示する方法

Twitter表示の流れ

  • 自分のTwitterのプロフィールページURLをコピー
  • publish.twitter.comにアクセスする
  • 1でコピーしたURLを貼り付け
  • 表示されたコードをコピー
  • ブログに貼り付け

順番に解説していきます。

 

自分のTwitterのプロフィールページURLをコピー

Twitterプロフィール

まずは自分のTwitterにログインしてプロフィールページに行きましょう。

プロフィールページが表示されたらURLをコピーします。

 

TwitterのプロフィールページはこのようなURLになっています。

https://twitter.com/○○○(ID名)

このURLをコピーしておきましょう。

 

publish.twitter.comにアクセスする

Twitterをタイムラインに

次にpublish.twitter.comにアクセスします。

publish.twitter.comは英語のサイトですが、

タイムラインに限らずTwitterをブログに表示する際には

非常に便利なサイトなのでブックマークしておきましょう。

 

>>publish.twitter.com

 

①でコピーしたURLを貼り付け

タイムラインをブログに

赤枠部分に先ほどのURLを貼り付けると

右側が矢印に変わるのでクリック

 

タイムラインを選択

すると上記のような表示が出てきます。

今回はツイッターのタイムラインを埋め込むので左側の

「Embedded Timeline」をクリックします。

 

注意ポイント

ブログに表示するTwitterタイムラインの幅や高さ、

ダークモードでの表示もカスタマイズできます。

変更する必要がある方は先に記事下の

  • タイムラインの幅を調整して表示する方法
  • ダークモードでタイムラインを表示する方法

をご覧ください。

 

表示されたコードをコピー

Twitterコードをコピー

すると上記の画像のようになるので右側にある

「Copy Code」をクリックしましょう。

 

ブログに貼り付け

最後にWordPressなどのブログの管理画面から、

Twitterのタイムラインを表示したい箇所のHTML部分に

先ほどのコードを貼り付けます。

 

kawateru
次の項目で詳しく説明します

 

記事内とサイドバーにタイムラインを表示する方法

記事内とサイドバーなどに表示する場合とで

流れが違いますので別々に見ていきましょう。

 

Twitterタイムラインを記事内に表示する場合

テキストモードに切り替え

WordPressを例に見ていくと

記事編集画面の右上にテキストモードに切り替えるタブがあるのでクリック。

あとは先ほどのコードを貼り付けて終了です。

 

記事編集画面➜テキストモード➜コード貼り付け

 

Twitterタイムラインをサイドバーに表示する場合

テーマごとに少し違うかもしれませんのでご了承ください。

※当ブログではAFFINGER5を使用しています。

 

WordPress管理画面から

外観➜ウィジェット➜カスタムHTMLをドラッグ➜右側の表示したい項目ににドロップ

 

クリックじゃなくてクリックしながら引っ張ってドロップしましょう。

 

するとこんな画面が出てくるので

内容の所に先ほどのURLを貼り付けて保存を押すと完了です。

 

ブログに表示するTwitterタイムラインのカスタマイズ方法

Twitterタイムラインのカスタム

ここではブログに表示する際のTwitterタイムラインの幅や高さ、

ダークモードで表示する方法を解説していきます。

 

上記画像の赤枠部分をクリックするとカスタマイズ画面が表示されます。

 

タイムラインの幅を調整して表示する方法

タイムラインのカスタマイズ方法

一番上のボックス2個が高さと幅です。

  • Height 高さ
  • Width 幅

サイドバーだと300pxや250pxが一般的だと思います。

高さは指定してあげないとかなり長いタイムラインが表示されるので指定してあげましょう。

ブログに表示する際は400~600pxぐらいで設定している人が多いです。

 

ダークモードでタイムラインを表示する方法

タイムラインのカスタマイズ方法

次にライトモードとダークモードですが、

真中のボックスの下向き矢印をクリックすると

  • ライトモード(白)
  • ダークモード(黒)

を選択することができます。

 

最後の項目は表示する言語を変更する設定になるのであまり気にする必要はありません。

最後にUpdateをクリックして「表示されたコードをコピー」の流れに戻りましょう。

 

まとめ「ブログにTwitterのタイムラインを表示する方法」

Twitterとブログを連携することで

相乗効果が得られるのでブログにタイムラインを表示するのは非常におすすめです。

 

ただし、

Twitterをブログに埋め込むのは難しくありませんが、

サイトスピードが少し低下してしまうので注意してください。

kawateru
初めはKawateru blogでもツイッターを埋め込んでいましたが今は外しています。

 

おすすめASP

  • この記事を書いた人
  • 最新記事

kawateru

【ブログ運営】×【Twitter運用】×【エンジニア】 3月からWordPressに移行しました。 4年間ブラック飲食→MGになるも28歳で退職→未経験から開発エンジニアに転職→最短でフリーランス目指す‼ ●大阪出身 ●28歳 ●1児のパパ

-ブログ運営
-, ,

Copyright© Kawateru blog , 2020 All Rights Reserved Powered by AFFINGER5.