クリアメモリ

プログラミングやガジェットレビュー、便利なアプリケーションなど雑多に記録するブログ

【はてなブログ】Twitterのタイムラインをサイドバーに設置する方法!

f:id:clrmemory:20171207165704p:plain

こんにちはクリアメモリです!

はてなブログTwitterタイムラインを表示させることで、ブログに訪れた方がフォロワーになってくれる機会も増えます。

そこで今回は、はてなブログのサイドバーにTwitterウィジェットを設置する方法を紹介します。

はじめに

 

今回紹介する内容は「はてなブログにTwitterのタイムラインを設置する方法」です。

実際に設置できると、以下のようになります。

 

f:id:clrmemory:20171207165722p:plain

 

色やサイズなどは調整できます。

では早速、Twitterのタイムラインを表示するための「ウィジェット」を作成していきましょう。

 

Twitterウィジェットを作成

 

まず、Twitterにアクセスします。

自分のページ(h ttps://twitter.com/User_ID)を表示してください。

 

自分のTwitterアイコンをクリックし、表示された項目の中から「設定とプライバシー」を選択しましょう。

 

f:id:clrmemory:20171207161600p:plain

 

ページが切り替わりますので、その中から今度は「ウィジェット」を選択します。

 

f:id:clrmemory:20171207161654p:plain

 

「ウィジェットの作成と管理」ページになるので、「新規作成」をクリックしてください。

 

f:id:clrmemory:20171207161804p:plain

 

f:id:clrmemory:20171207161831p:plain

 

ウィジェットの種類は「プロフィール」を選択。

 

What would you like to embed?

 

「What would you like to embed?」というページになったので、はてなブログに設置したいTwitterアカウントのページ(h ttps://twitter.com/User_ID)を入力します。

 

f:id:clrmemory:20171207165749p:plain

 

「Here are your display options」は左側の「Embedded Timeline」を選択しましょう。

 

f:id:clrmemory:20171207165813p:plain

 

英語とTwitterのタイムラインが表示されたかと思います。

 

f:id:clrmemory:20171207165843p:plain

 

デフォルトの状態でも使えるんですが、サイズや色をカスタマイズしたい場合は「set customization options.」をクリックしてください。

以下のようなカスタマイズ項目が表示されました。

 

f:id:clrmemory:20171207165903p:plain

 

項目名 動作
Height 高さ(px)
Width 幅(px)
Light 背景色(白or黒)
link color リンクの色
Automatic 言語

 

f:id:clrmemory:20171207163115p:plain

自分なりのタイムラインが完成したら「Update」を選択しましょう。

ちなみに今回は、「300 * 500」のTwitterタイムラインを作成してみました。

 

はてなブログに設置する

 

ここまでで、Twitterタイムラインのウィジェットは作成できました。

最後に、はてなブログのサイドバーにTwitterタイムラインを設置していきましょう。

 

先ほど作成したウィジェットのページに「Copy Code」と書かれた部分があります。

 

f:id:clrmemory:20171207163412p:plain

 

このコードは、はてなブログに埋め込む時に使用するのでコピーしておいてください。

はてなブログの「デザイン」に移動します。

 

「サイドバー」の中にある「モジュールを追加」ボタンをクリックしましょう。

 

f:id:clrmemory:20171207163620p:plain

f:id:clrmemory:20171207163623p:plain

 

表示された項目の中に「HTML」があるので選択してください。

 

f:id:clrmemory:20171207170012p:plain

 

この中に、先ほどコピーした「Twitterウィジェットのコード」を貼り付けて「適用」をクリック。

タイトルなどをつけたい場合は、合わせて編集してください。

 

f:id:clrmemory:20171207170024p:plain

 

サイドバー以外にも設置できる

 

今回紹介したTwitterタイムラインのウィジェットは、HTML形式のコードで生成されるので、サイドバー以外の場所にも簡単に設置できます。

もっと極端なことを言うと、記事内にも設置できちゃうってことです。

 

サイトのデザインに合わせてカスタマイズしてみてください。

 

まとめ

 

今回紹介したように、はてなブログにTwitterのタイムラインを設置するのは簡単です。

Twitterを設置しておくことで、フォロー・シェアされる機会が増えるので、自分のTwitterアカウントがある方は設置してみてはいかがでしょうか。

www.clrmemory.com

ぜひ参考にしてみてください。

ではまた。

新着記事