3歩進んで2歩更に進む。

筋トレで克己心を高め投資に活かしたい。平成生まれのアスリート系エンジニアのブログ

MENU

AD


twitterウィジェットをはてなブログに埋め込んでみた(カスタマイズも可)

f:id:ktkooon:20160831215448p:plain

そろそろネタがなくなって来ましたが、最近はじめたtwitterはてなブログに埋め込んでみたので、 その方法を備忘録的にまとめておこうと思います。

twitterをはじめた経緯についてはこちら

ktkooon.hatenablog.com twitterアカウントをお持ちの方今すぐにフォローミー!

ちなみに今回参考にしたのはこちら

route53.hatenablog.com

完成形はこのブログの右下にありますが、twitterのつぶやきなどをウィジェットとして配置できます。 こんな感じです。 f:id:ktkooon:20160904234555p:plain

Twitterウィジェットの準備

ウィジェットの種類はいくつかあります。 f:id:ktkooon:20160904232859p:plain

  • プロフィール
  • いいね
  • リスト
  • コレクション
  • 検索

今回は、twitterのタイムラインを表示したかったのでプロフィールを選びました。 検索では、特定の検索結果を常に表示するタイムラインがカスタマイズできます。 微妙に文言が違いますが、プロフィール以外何が表示されるかは下記の公式ページが役立ちます。

dev.twitter.com

検索以外を押すと、真っ青な画面に飛びます。 f:id:ktkooon:20160904234047p:plain

自分のtwitterのプロフィールアドレスを入れます。 ちなみに自分はこちら → https://twitter.com/kitakinblog 次に、ボタン形式かリスト形式かを選べます。今回はリスト形式にしてみました。

f:id:ktkooon:20160904234253p:plain

そして、最後にembedを出力できるのでこれをコピーしておきます。 f:id:ktkooon:20160904234340p:plain

ブログに表示

正直ここは一瞬でおわります\(^o^)/ ブログ管理画面から、デザイン画面へ行きカスタマイズ画面へ。 f:id:ktkooon:20160904234543p:plain

基本ここにあるものであれば、ほぼどこにでも配置できますが見えやすくかつ、 記事のじゃまにならないサイドバーが良いと思います。 サイドバーのモジュールの追加で、先ほどtwitterウィジェット画面よりコピーしたタグをコピペします。 f:id:ktkooon:20160904234720p:plain

あとは、最後に保存を忘れずにしたら完成です!

おわりに

ちなみにこのtwitterウィジェットですが、幅やリンクの色などカスタマイズできるらしいです。

dev.twitter.com

ブログデザインにあわせて調整すると良さそうですね。 おわり。