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

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

 

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

はじめに

 

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

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

 

20171207165722

 

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

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

 

Twitterウィジェットを作成

 

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

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

 

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

 

20171207161600

 

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

 

20171207161654

 

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

 

20171207161804

 

 

20171207161831

 

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

 

What would you like to embed?

 

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

 

20171207165749

 

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

 

20171207165813

 

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

 

20171207165843

 

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

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

 

20171207165903

 

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

 

20171207163115

 

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

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

 

はてなブログに設置する

 

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

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

 

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

 

20171207163412

 

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

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

 

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

 

20171207163620

 

20171207163623

 

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

 

20171207170012

 

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

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

 

20171207170024

 

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

 

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

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

 

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

 

まとめ

 

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

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

 

 

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

ではまた。

関連記事

この記事が気に入ったら
フォローしよう

最新情報をお届けします

Twitterでフォローしよう