ツイッターのウィジェットをブログに貼り付けてタイムラインをサイドバーやフッターに表示する方法

シェアボタンを押して情報を共有しましょう。

twitter-720970_1920

ども~!どもどもども~!どうも、こんにちは!橋尾渡で~す!

もうすっかりと桜が満開になりましたね~!お花見シーズンで桜の咲いている場所は人で混雑しそうです。あなたはもうお花見に行かれましたか?僕は人混みが嫌いなので行ってません。

桜と言えば桜餅ですね、桜餅には2種類あるって知ってました?長命寺(関東風)と道明寺(関西風)という形の違う桜餅が存在するんですよ!僕は道明寺(関西風)しか知らなかったので驚きましたね!(笑)

さて本題に入りましょう!今回は各ブログサービスで使えるツイッターのウィジェット機能をご紹介いたします!僕はワードプレスをメインで使っているのでワードプレスを使って説明していきますね。

まずは実際にウィジェットを使った例をご覧ください。

@hashio_logさんのツイート

このようにツイッターのタイムラインが表示されます。スクロールもできるので過去のツイートを見ることができます。お気に入りボタンやシェアボタンも付いているので便利ですね。この機会に橋尾渡をフォローしてもいいですよ^0^/

ツイッターのウィジェットを使うことによりサイトの見た目をより華やかにすることができますので、なにかが物足りないという人は是非ウィジェットを付けてみましょう!あなたのリアルタイム情報を見せることによってファンになってくれる人がいるかもしれません♪

スポンサーリンク
レクタングル(大)広告

ウィジェットの使い方

スクリーンショット_040416_110153_PM

まずは公式Twitterのホームページを開きます、すると基本画面がでてきましたね。では右上にあるプロフィール写真を押してみましょう。

WS000099

右上のプロフィール写真を押したらメニューがでてきますので、「設定」を選びます。

スクリーンショット_040416_110736_PM

設定画面に移りました。左側に設定できるメニューがいくつか表示されているので、その中から「ウィジェット」を選びましょう。

スクリーンショット_040416_111100_PM

ウィジェットの作成と管理ができる画面がでてきましたね。今回は新しくウィジェットを作りたいので、「新規作成」ボタンを押します。

スクリーンショット_040416_112729_PM

新規作成ボタンを押したらウィジェットの初期設定画面がでてきました。ここであなたの好みに合わせて色や大きさなどを設定することができるので詳しく見ていきましょう!

ウィジェットの設定

それではツイッターウィジェットの設定をこれから始めます。必要に応じてウィジェットを増やしたり細かな設定を変えていきましょう。まずはユーザー名から説明していきますね。

ユーザー名

スクリーンショット_040516_125016_AM

ユーザー名ではタイムラインに表示したい人物を設定できます。今は「hashio_log」になっていて僕、橋尾渡が表示されていますが、例えば「hikakin」と記入すればYOUTUBERのヒカキンさんが表示されます。

スクリーンショット_040516_125255_AM

このように表示させたい人物のウィジェットを増やしていけばコンテンツ作りに役立ちますね。サイドバーなどに有名人のタイムラインを表示させておくのも面白いかもしれません。気になったら是非IDを変えて表示させてみましょう!

オプション

スクリーンショット_040516_012206_AM

オプションのチェック欄では他のツイッターユーザーとの会話を見せるか見せないかを設定できます。初期設定では見せない設定になっています。チェックを外すと…。

スクリーンショット_040516_013113_AM

「@ユーザー名」との会話が表示されていますね。他人との会話も含めウィジェットで表示したい場合はこのチェックを外しておきましょう。僕の場合は誰かとの会話をあまり見られたくないのでチェックを入れたままにしています。断っておきますが決してやましい会話はしていませんよ(笑)

高さ

スクリーンショット_040516_020108_AM

高さとはウィジェットの縦の長さを指定することができます。初期設定では600ピクセルで表示されます。600ピクセルだと凄く大きく感じたハシオは300ピクセルで表示することにしました。まぁ、ここは好みで大きさを変えてください。300~500くらいが適度な大きさではないでしょうか。

テーマ

スクリーンショット_040516_062043_PM

テーマは2種類あってデフォルトが「明るい」になっています。テーマを「暗い」にすると上図のようにタイムラインの色が全体的に黒くなりましたね。あなたのサイトに相性がいい色を選択してあげましょう!

リンクの色

スクリーンショット_040516_063157_PM

リンクの色では、タイムラインに表示されているリンクの色を変えることができます。デフォルトでは青色になっていますね。一度オレンジにでもしてみますか。

スクリーンショット_040516_063417_PM

このようにリンクの色が変わりました。いい感じですねぇ~♪それからもう一つ自分の好きな色を指定することができます。

スクリーンショット_040516_063814_PM

上に表示されていた「+」マークを押すとカラーコードを入力する欄がでてきます。ここに好きな色のコードを入れてあげましょう!

色を指定したい人は、ここを参考にしてみてください。【カラーコード表

ウィジェットを貼り付ける手順

それでは設定が終わりましたので、あなたのサイトにツイッターウィジェットを貼り付ける作業に取り掛かりましょう。

スクリーンショット_040516_065029_PM

では、背景が青く設定されて一番目立つ「ウィジェット作成」ボタンを押してみてください。

スクリーンショット_040516_065937_PM

すると、タイムラインの下にウィジェットを表示するコードがでてくるのでそれをコピーしてください。

ここからなんですが、僕はワードプレスでコードを貼り付けます。各ブログやホームページによってやり方が変わるので、貼り付ける場所はあなた自身で調べてください。

スクリーンショット_040516_072229_PM

まず、ワードプレスの管理画面へ行き「ウィジェット」を選択しましょう。

WS000100_040516_074103_PM

ウィジェット内に「テキスト」という要素があるので、それを選び貼り付けたい場所を決めたら「ウィジェット追加」ボタンを押します。

WS000101_040516_074820_PM

次に、追加した「テキストウィジェット」が表示されているのでタイトルを決めて内容の部分にコードを貼り付けてあげましょう。そして保存を押す。

スクリーンショット_040516_082120_PM

保存を押してからサイトを確認しにいくと、サイドバーにツイッターのタイムラインが表示されています。横幅は置く場所によって自動的に調整されるので安心してください。

これでツイッターのウィジェットをサイトに貼り付けるまでの流れは終わりです。けっこう簡単にできたでしょ?(笑)

まとめ

表示したいタイムラインを指定していろいろ貼り付けてみるのも面白いですね。よかったら僕のタイムラインを表示してもいいですよ♪

それではそろそろツイッターウィジェットの作り方と貼り付けるまでの記事を終わりたいと思います。ありがとうございました!

スポンサーリンク
レクタングル(大)広告
レクタングル(大)広告

シェアボタンを押して情報を共有しましょう。

フォローする