Twitterのタイムラインをサイドバーに表示する方法

今回はツイッターとの連携という事でサイトやブログのサイドバーにタイムラインを表示する方法を紹介していきます。

もちろんこのブログで紹介しているアメブロでもシーサーブログでもWordPressでも表示させる事ができるので、それぞれのやり方も解説してみます。

ツイッターとの連携で集客効果やフォロワーを増やせる可能性もありますし、設置も簡単です。必要なのはツイッターのアカウントだけ。ちなみに色は「明るい」のと「暗い」の2種類から選ぶ事ができます。

ツイッターサイド-5

これの設置方法を紹介していきます。

ツイッター設置の手順

ツイッターのタイムラインをサイドバーに表示するためにツイッターにログインしておきます。ログインしたら右上の歯車のマークをクリックして「設定」をクリック。

ツイッターサイド-15

クリックしたら左のサイドバーに「ウィジェット」という項目があるのでクリック。

ツイッターサイド-3

ここで「ウィジェット」の「新規作成」をクリックします。

ツイッターサイド-4

次の画面で各種設定ができます。

ツイッターサイド-6

画像を表示するかどうかや高さ、それから最初の画像で紹介したように「明るい」と「暗い」の2種類のテーマが選択できます。任意で変更をして「ウィジェット」を作成をクリックすると下にコードが表示されます。

ツイッターサイド-7

このコードをサイドバーに貼り付ければ完成です。

Seesaaブログの場合

シーサーブログの管理画面から「デザイン」⇒「コンテンツ」と進み、「自由形式」をサイドバーに追加してこのコードを追加。

ツイッターサイド-8

また、ブログで表示を確認してみて上や下のコンテンツとの余白が欲しい(詰まっている)場合はツイッターのコードの前後に改行タグ<br />を追加する事で上や下に余白を作る事もできます。

それから自由形式にタイトルを付けて表示したい場合、例えば「ツイッターのタイムライン」とかタイトルを表示したい場合はこの記事を参考にして下さい。
Seesaaブログの自由形式のタイトルを表示させる方法

アメブロに追加する場合

アメブロに追加する場合は「マイページ」右上の設定マークをクリックして「プラグインの追加」をクリック。

ツイッターサイド-9

プラグインの追加というページになるので「フリープラグイン」をクリックして取得したコードを追加して保存。

ツイッターサイド-10

「新たにプラグインの追加をした方→サイドバーに配置してください。設定はこちら」という表示がでるので「こちら」という部分のリンクをクリックします。

ツイッターサイド-11

それでコードを追加したフリープラグインをサイドバーの好きな位置に移動させれば完了です。

また、アメブロの場合もブログで表示を確認してみて上や下のコンテンツとの余白が欲しい(詰まっている)場合はツイッターのコードの前後に改行タグ<br />を追加する事で上や下に余白を作る事もできます。

ツイッターサイド-12

WordPressに追加する場合

WordPressの場合は管理画面から「外観」⇒「ウィジェット」と進みます。

ツイッターサイド-13

サイドバーに「テキスト」を追加してテキスト内にコードを追加して「保存」すればOK。

ツイッターサイド-14

WordPressの場合もブログで表示を確認してみて上や下のコンテンツとの余白が欲しい(詰まっている)場合はツイッターのコードの前後に改行タグ<br />を追加する事で上や下に余白を作る事もできます。

以上ブログのサイドバーにツイッターのタイムラインを表示する方法です。他にも任意のツイートを記事内で紹介する方法もあるので紹介しておきます。

最終更新日:2017/12/13

Twitterのタイムラインをサイドバーに表示する方法”に7件のコメントがあります。

コメントの反映には時間がかかる場合があります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

  1. りた

    しげぞう様

    りたです。先程の件ですが、時間が解決してくれました。
    また、PCのみタイムラインがみえる設定も完了いたしました。

    お騒がせして申し訳ございません。
    今後共、宜しくお願い致します。