【WordPress・ブログ】サイドバーにtwitter(ツイッター)のタイムランを表示(埋め込み)させる方法


スポンサーリンク


Pocket

自分のブログのサイドバーに、ツイッターの「タイムライン」を表示させたいと思う方も多いでしょう。

ツイッターといえば、スマートフォンからでも簡単に投稿できるのが魅力的です。

 

自分のリアルタイムの発言だったり、書き上げた記事がすぐに”誰か”の目に触れる集客では欠かせないツールの一つでもあります。

今では多くのブロガーの方々が、ツイッターのタイムラインを自分のブログのどこかしら(多くはサイド部分)に設置しています。

 

ツイッターのタイムラインは、既にツイッターのIDをもっている方であれば数分で作れてしまいますので、ぜひ自分のサイトに設置してみてはいかがでしょうか。

ここでは、ツイッターのタイムラインの「埋め込みコード」の作成について説明していきます。

「twitter(ツイッター)」設置用タイムラインの作成方法

まずはツイッターを開き、自分のページにログインしてください。

まだツイッターのIDを持っていない方は、この機会に作ってみてはいかがでしょうか。

ツイッタ⇒URL:https://twitter.com/

 

では、私のツイッターIDを使用して実際に設置用タイムラインを設定、そしてサイトに設置までしていきます。

 

設定方法

tw_tl_001

自分のページにログインしたら、右上のアイコン部分をクリックしてください。

そうするとメニューが出てきます。

その中の下方にある「設定」をクリックします。

 

tw_tl_002

設定をクリックすると、画面左側にズラリとメニューが沢山でてきます。

今度は、その中の下方にある「ウィジェット」をクリックしてください。

 

tw_tl_003

ウィジェットを開いたら、右上にある「新規作成」をクリックします。

 

tw_tl_004

新規作成をクリックすると、メニューが出てきます。

その中の「プロフィール」をクリックしてください。

 

tw_tl_005

プロフィールをクリックすると別ページに飛びます。

切り替わったページで少し下にスクロールすると、上の画像のものが目に入ってくるはずです。

4タイプありますが、赤枠で囲ったタイプを選択(クリック)してください。

 

tw_tl_006

先ほどの赤枠の部分をクリックすると、ツイッターIDを入力する画面が出てきます。

上記のは、私のブログのIDとなっております。

自分のIDが分からないという方は、一度ツイッターのトップページに戻って確認するといいでしょう。

IDを入力したら、右の「Preview」をクリックしてください。

 

tw_tl_007

「Preview」をクリックすると、この時点で埋め込みコードが作成されていますが、その前に赤枠で囲った「set customization options.」をクリックしてください。

ここで、設置するのに必要な細かな設定が出来ます。

 

tw_tl_008

上の画像を見て分かるように、様々な設定がここではできます。

特に「高さ」の設定は必須といえます。

 

もし、デフォルトのままでブログに設置すると、びっくりするくらい縦長になってレイアウト的にちょっと・・・という感じです。

なので、高さは必ず値を入力しましょう。

ちなみに、私のブログでは高さを「500」に設定してあります。

 

幅はサイドバーに設定するのであれば、特に入力する必要はありません。(デフォルトのままでOK)

記事内などに設定するときに、横幅の調節が必要なときくらいしか使わないでしょう。

 

「全体のカラー」と表示されているところでは、「明るいタイプ」と「暗いタイプ」の2種類から選べるようになっています。

tw_tl_011

ちなみに上の画像が「明るいタイプ(左)」「暗いタイプ(右)」です。

暗いタイプだと、ブログ全体のイメージがガラっと変わりそうですね。

ここら辺は、ブログ全体の色のバランスで選ぶといいでしょう。

 

「リンクカラー」に関しては、初期設定では青色となっています。

特に変更する必要はありませんが、青以外に様々なカラーが使用できるので、色を変えてみるのも面白いかもしれませんね。

 

一番下の「表示される語源」では、日本語表示にするときは「japanese」を選択するようにしましょう。

これら全ての設定が終わったら、「Update」をクリックしましょう。

 

tw_tl_009

画面が切り替わって、細かい設定をしたタグ(埋め込みコード)が出てきます。

タグの横にある青い「Copy Code」をクリックします。

 

tw_tl_010

「Copy Code」をクリックすると上の画像に切り替わりますが、この時点でコピーはされていますので、そのままブログのサイドバーに貼り付けて設置すれば完了です。

ワードプレスであれば、「外観」⇒「ウィジェット」のテキストにコピーして、サイドバーに設置すればOKです。

 


スポンサーリンク