LOGzeudon

名古屋で働いているWebデザイナーのブログです

Twitterウィジェット(タイムライン表示)をサイドに設置する / はてなブログ

f:id:rokuzeudon:20141116190747p:plain

このブログも設置しております、「Twitterウィジェット」。(大きめディスプレイPCだと右、小さめディスプレイやタブレットだと下、スマホだと表示無し)

数年前にあたらしくなって、設定方法も変わっています。

難しくないので、Twitterやってる方は設置してみると良いかと。

Twitterの公式サイトに行く

Googleで「twitter widget」と検索してください。

多分一番上に出てきます。

f:id:rokuzeudon:20141116185152p:plain

Twitterにログインする

すでにログインしていれば表示されないですが一応。

ログイン失敗しないよう…

f:id:rokuzeudon:20141116185257p:plain

ウィジェットを作成する!

下のイメージは自分の場合の表示です。

英語表示になってますが、ただのカッコつけでやってるだけですので気にしないでください。モザイクも気にしないでください。

f:id:rokuzeudon:20141116185410p:plain

初めての場合は、「まだ何もありません」的な表示がされると思うので、右上の「作成」ボタンからとっとと進みます。

f:id:rokuzeudon:20141116185623p:plain

こんな画面になります。英語だと分かりにくいですね。

基本的にこのページでウィジェットの設定は管理します。高さはここで設定しておきましょう。

いまは横幅は気にしなくて良いです。

入力したら、右下の部分…

f:id:rokuzeudon:20141116185805p:plain

ここ!をクリック、コピーしておきます。

はてなブログの方で設定する!

はてなブログに戻ります。

管理画面、「デザイン」よりいつものページへ。

f:id:rokuzeudon:20141116190000p:plain

カスタマイズのところで、「モジュール追加」をクリック。

f:id:rokuzeudon:20141116190215p:plain

(なんとなくモザイクかけてますが気にしないでください)

こんな画面になるので、「HTML」を選択、さっきコピーしたコードを貼り付けます。貼り付けるだけ。横幅は、自動的にサイドの幅に調整されます。

 

あとは適用、忘れずに保存しておしまいでーす。