はてなブログのサイドバーにTwitter（ツイッター）のタイムラインを表示できるウィジェットを設置してみました。
はてなブログのサイドバーにTwitterのタイムラインを表示することができるTwitterウィジェットを設置してみましたのでその方法を記録しました。
自身のブログにTwitterウィジェットを設置するのは難しいと思っていましたが、行ってみると意外と簡単でした。これで僕のはてなブログも少しにぎやかになりました。
まずは、ツイッターのアカウントにログインし「設定」を押します
パソコンでツイッターの公式サイトにログインをしたら、右上にある「歯車」のマークをクリックします。クリックすると自身のアイコンとともに各種メニューが表示されますので、下から2番めの「設定」をクリックします。
※今はツイッターの仕様が変わり「歯車」が表示されなくなったので、右上にある自身のアイコンをクリックします。
「新規作成」を選択します
再度、画面が切り替わるので右上の方にある「新規作成」をクリックします。
「ウィジェット作成」を選択します
こちらで自身のブログに合わせて細かくカスタマイズできますが、特にカスタマイズすることがなければこのままでの仕様でよいと思います。
（僕のはてなブログの右のサイドバーに貼ってあるツイッターウィジェットのはそのままの設定です。）ちなみに「ユーザタイムライン」のタブでは以下の項目が設定できます。
- ユーザー名
- ＠ツイートを除外する
- 画像を自動的に開く
- 高さ（初期設定は600ピクセル）
- テーマ（明るいと暗いで選択）
- リンクの色（初期設定は青）
そのほかにもタブがあり、自身の「お気に入り」ツイートを表示したり、「リスト」「検索」「コレクション」など色々選択できるようです。
コードをコピーします
「新規作成」をクリックすると、右下にコードが表示されますので「このコードをコピーして、あなたのwebサイトのHTMLに貼り付けてください。」と記載があるようにこちらのコードをコピーします。
「すべてを選択」でコピーすると簡単です
コピーする枠が狭くコードが何行にも連なっています。マウスを上から下まで操作して選択するのは手間がかかるので、マウスを右クリックすると「取り消し」「やり直し」とメニューが出てきます。
メニューの真ん中より下にある「すべてを選択（A）」をクリックすると一連のコードがすべて青く選択された状態になるので、もう1度マウスを右クリックして今度は上から4番めの「コピー（C）」をクリックします。
これでコピーができましたので「変更を保存」をクリックします。
はてなブログの「デザイン」の設定でコードを貼り付けます
Twitterのサイトでの操作が終わりましたので、次ははてなブログでの設定になります。
「デザイン」を選択します
「設定」をクリックすると上から「設定」「デザイン」「アクセス解析」と表示されますので、2番目にある「デザイン」をクリックします。（※左側サイドバーにある「デザイン」からも同様の操作ができます。）
「カスタマイズ」を選択します
左側にあるサイドバー上部にある「カスタマイズ」のタブ（スパナのマーク）をクリックします。
「サイドバー」を選択します
「カスタマイズ」をクリックし表示が切り替わりましたら、中央くらいにある「サイドバー」をクリックします。
「＋モジュールを追加」を選択します
一番下に「＋モジュールを追加」がありますのでクリックします。
「HTML」を選択します
クリックすると左側に「プロフィール」「検索」など並んでいますので、下から2番目にある「HTML」を選択します。
コピーしたコードを貼り付けます
右側に「タイトル」など薄いグレーのテキストで表示されている枠があるので、真ん中の枠内に先ほどツイッターのサイトでコピーしましたコードを貼り付けます。
「タイトル」は記入してもしなくても大丈夫のようです。貼り付けましたら「適用」をクリックします。
ツイッターウィジェットの位置を決めます
先ほど追加しましたモジュールの右側に「編集」「削除」と表記されている右横に三本線の「≡」のマークがあります。こちらのマークをマウスでドラッグするとサイドバーに表示させる順番を変えることができますので表示させたい順番の場所に移動します。
「変更を保存する」で設置を終了します
サイドメニュのさらに右側にプレビュー画面が表示されていますので、実際のブログに表示をされた画面を確認します。確認しよければ左側サイドメニューの「変更を保存する」をクリックし設定を終了します。
