Twitterのタイムラインを表示させているブログが増えてきましたね。

ブログの見栄えも良くなりますし、つぶやきを見てもらって、親近感を持ってもらえたり、

興味を持ってフォローして頂ければ、

ブログの更新情報をいち早くお届けする事もできますので、是非チャレンジしてみてくださいね^^

Twitter

 

今回は、上の画像のように、

WordPressブログにTwitterのタイムラインを表示させる方法について

図解入りで詳しく解説していきます^^

Twitterで埋め込み用のコードを取得しましょう

 

まず、Twitterにログインしておきます。

画面の右上にある、プロフィール画像をクリックします。

 

リストが表示されるので、【設定とプライバシー】をクリックします。

 

画面が切り替わりますので、

左下の【ウィジェット】をクリックします。

 

ウィジェットの作成と管理の画面に切り替わります。

①【新規作成】をクリックし

②表示されたリストの中から【コレクション】をクリックします。

 

こんな画面が出てきます。

※ここから英語の画面になりますが、頑張って行きましょう!

【何を埋め込みたいですか?】と聞いてくるので

①あなたのTwitterアカウントを入力します。

②をクリックします。

 

表示オプションを選択する画面に切り替わるので

【Embedded Timeline】(埋め込みタイムラインという意味)をクリックします。

 

さらに画面が切り替わるので

【set customization options】をクリックします。

※埋め込むTwitterのタイムラインの大きさやデザインをカスタマイズできます。

 

オプション設定の画面に切り替わります。

①埋め込むTwitterタイムラインの高さ(長さ)を数字で設定します。

②同様に、タイムラインの幅を設定します。

③デザインを、【Light】と【Dark】の2種類から選択します。

※設定画面の下にプレビュー(実際にどのように表示されるか)が表示されるので
 プレビューを確認しながら設定していきましょう。
 下の画像では、仮に高さ600、幅300、デザインはLigntにしています。
 この設定は、後からでも変更できます。

④設定ができたら【Update】をクリック。

 

埋め込み用のコードが表示されるので、

【Copy Code】をクリックしてコードをコピーします。

 

【コピーが出来ました!】という表示が出るので

【×】をクリックして閉じます。

Twitterでの操作はここまでになります(#^.^#)

 

 

WordPressのウィジェットにコードを貼りつけましょう

いよいよ、WordPressにTwitterのタイムラインを表示させて行きます。

WordPressのダッシュボードにログインしておきましょう。

※テンプレートは賢威7を使っています。他のテンプレートの場合は、多少画面が異なります。

①【外観】にマウスを合わせ、出て来たリストから

②【ウィジェット】をクリックします。

Twitter

 

ウィジェットの管理画面が表示されたら

【テキスト】をクリックします。

Twitter

 

クリックすると下のような表示になりますので

①【サイドバー】にチェックが入っていることを確認し

②【ウィジェットを追加】をクリックします。

Twitter

 

右側のサイドバー欄にテキストウィジェットが追加されます。

タイトルを入力し、

下のテキスト入力部分に

コピーしたコードを貼りつけます(Ctrlキー+V)

Twitter

 

こんな感じになります^^

貼り付けが出来たら【保存】をクリックします。

Twitter

 

プレビューを見て見ましょう。

あなたのTwitterのタイムラインがサイドバーに表示されました♪♪

Twitter

 

ここで、タイムラインの高さや幅がちょっと・・・・・という時は

これまでの操作を繰り返して頂いて、

設定画面の所で数値を変更することで調整が出来ます♪♪

 

まとめ

今回の解説では賢威7のテンプレートを使用していますので

他のテンプレートですとウィジェット設定の画面が多少異なる場合がありますが

ほぼ同じ手順で設置できるので試してみてくださいね^^

 

ウィジェットをフッターに配置出来るテーマ(テンプレート)であれば、

タイムラインをフッターに表示させる事もできます。

 

自分のつぶやきがブログ上で見られるとなると、

つぶやきにも力が入りますね(#^^#)

また、タイムラインが流れる事で、ブログに動きが出て、

見栄えも良くなりますので、

Twitterアカウントをお持ちの方は、是非活用してみてください(#^.^#)

 

それでは、今回は、このへんで。