Wordpressでサイト運営 コラム 自分でホームページを作ろう

たった3分!自分のブログにTwitter表示する方法

先日、アメブロのサイドメニューのtwitter表示の方法を変更してみました。
今までは『Tweets Wind』というブログパーツを利用していましたが、twitter公式のものを利用することにしました。
わずか3分でブログへTwitterを表示できちゃいましたので、その方法を詳しくご紹介します。とっても簡単ですよ。

1.とにかくまずはログインから

Twitterのページへ行き、ログインします。

ログインしなきゃ、何も始まりませんね。

2.『設定とヘルプ』ボタン選択

左上のぜんまいマークが『設定とヘルプ』ボタンになります。

ヘルプ、ログアウト、何か設定を変更したい時など、困ったらぜんまいマークと覚えておきましょう。

スクリーンショット_2014-01-28_11_54_31 のコピー

3『設定』メニューを選択

スクリーンショット 2014-01-28 13.10.47
ぜんまいマークをクリックしたら表示されるメニューから『設定』を選んでクリック

4.『ウィジット』メニューをクリック

twitter2

『設定』メニューをクリックすると、設定画面が表示されます。
左の設定メニューの一番下の『ウィジット』 をクリックします。

5.ウィジットの新規作成とカスタマイズ

twitter3
右上の新規作成ボタンを押すとウィジット設定画面になります。

スクリーンショット 2014-01-28 13.12.49

すでにユーザー名など必要なものは入力されている状態です。
このまま使用するなら、左下の『ウィジットを作成』ボタンを押すだけでウィジットの完成です。
『高さ』が600pxに初期設定されているので、もっと高くしたり低くしたい場合は『高さ』にお好みの数値を入力します。
スクリーンショット 2014-01-28 13.13.18

『テーマ』を『暗い』にすると、こんなデザインになります。
スクリーンショット 2014-01-28 13.13.36

明るい白ベースのテーマも、この暗いダークグレーベースのテーマも、どちらも洗練されていてそのまま十分使えるデザインだと思います。
設定を変更すると、すぐに右側にプレビューで表示されているので、確認しながら作業を進められるのも安心ですね。
お好みの設定になったら、『ウィジットの作成』ボタンをクリックします。

twitter4

6.ブログの表示したい場所にウィジットを貼り付け

twitter5

右下に作成されたウィジットのコードが表示されます。
すでに全選択されている状態なので、コピーします。
Winなら「Ctrl+C」、Macなら「⌘(Cmd)+C」のショートカットキーを使えば簡単。
最後に『設定を保存』ボタンをクリックして、保存しておくことを忘れずに。

また、ブログへ貼り付けが完了するまで、このページは表示したままにしておくことをオススメします。
高さを再調整したり、コピーが上手く行かなかった場合に戻ってくる必要があります。

7.ブログへ貼り付け

ここからブログの方へ移動しての作業になります。
今回はアメブロのサイドメニューを設定していきます。

8.アメブロへログイン

ameblo1
アメブロIDとパスワードでログインします。

9.『マイページ』から『ブログ』へ移動

amebko3
いつもブログを書かれている方ならお馴染みの手順ですね。『アメブロ』メニューをクリックしてアメブロ画面へ移動します。

10.サイドメニューの設定・変更

ameblo4
左のメニューの下の方の『サイドバー』の下の『設定・管理』をクリック

11.『フリープラグイン』の『編集』から編集画面へ

ameblo5
『編集』をクリックすると、フリープラグインの編集ページへ移動します。

12.Twitterウィジットの貼り付け

ameblo6
クリップボードにコピーされているはずなので、そのまま貼り付けます。
winの方は「Ctrl+V」、Macな方は「⌘+V」のショートカットキーで簡単に。
クリップボードに残っていなかった場合は、Twitterのウィジットページに戻って再コピーしましょう。

これでTwitterのつぶやきをブログに表示するための全工程はおしまい。
ちゃんとイメージ通りに表示されているか確認してみましょう。
ameblo7

上手くいきましたか?

今回は誰でもわかるように全工程を1ステップずつレクチャーしていきました。
そのため長い文章になってしまいましたが、ものの3分で終わる内容です。
不必要な部分は飛ばしつつ、チャレンジしてみて下さいね。

[amazonjs asin=”4881668579″ locale=”JP” title=”Twitterでビジネスを加速する方法”]

この記事がお役に立てたら
いいね ! で最新情報を手に入れましょう

Previous Post Next Post

Related Posts

No Comments

Leave a Reply