おしブロ from STONEWEB

おしい県でWebに携わって働く人のブログ from ストーンウェブ。IT&Web界隈に関する役に立ちそうなことをまとめていきます。2013年1月運営開始。

移転しました。

約3秒後に自動的にリダイレクトします。

Twitterのつぶやきを「はてなブログ」のサイドバーに設置する方法

f:id:lord_cashew:20140128095430p:plain

少し前に、このブログのサイドバーにTwitterのつぶやき(ウィジェット)を表示(設置)してみたのですが、その設置方法をまとめてみました。 

 

Twitterのウィジェットを作成する

Twitterにログインした状態でウィジェット作成画面(https://twitter.com/settings/widgets/new/user)に移動します。 

f:id:lord_cashew:20140128094723p:plain

 

右の「プレビュー」を見ながら各項目を設定していきます。設定が完了したら「ウィジェットを作成」ボタンをクリックします。

f:id:lord_cashew:20140128094948j:plain

 

画面右下の「このコードをコピーして・・・」という文章の上のエリアに「コード」が表示されていますので、この「コード」を全てコピーします。 

 

はてなブログに設置する

管理画面左のメニューから「デザイン」をクリックします。

f:id:lord_cashew:20140128093439p:plain

 

「カスタマイズ」タブをクリックして、さらに「サイドバー」をクリックします。

f:id:lord_cashew:20140128093500p:plain

 

現在設置しているウィジェットの一覧が表示されますので、一番下の「モジュールを追加」をクリックします。

f:id:lord_cashew:20140128093827p:plain

 

「モジュールを追加」のポップアップウィンドウが表示されますので、一番下の「HTML」をクリックします。

f:id:lord_cashew:20140128093912p:plain

 

上の「タイトル」エリアにサイドバーに表示するタイトル名(ここでは”つぶやき”にしています)を入力します。下のエリアに、作成しておいたTwitterウィジェットのコードを貼り付けます。完了したら「適用」ボタンをクリックします。

f:id:lord_cashew:20140128094017j:plain

 

作成したウィジェットを配置したい場所までドラッグして「変更を保存する」ボタンをクリックします。

f:id:lord_cashew:20140128094232p:plain

 

これで設置完了です。ブログのサイドバーにTwitterのつぶやきが表示されるようになりました。

f:id:lord_cashew:20140128094319p:plain

 

*追記*
この書籍は「はてなダイアリー」について書かれている書籍なのですが「はてな」の公式本なので「はてなブログ」を使っている方は一読してみても良いかもです。

「はてな」ではじめるブログ生活―はてな公式ハンドブック

「はてな」ではじめるブログ生活―はてな公式ハンドブック

 

 

© STONEWEB