ツイッターのタイムラインをブログ(ワードプレス)に埋め込む方法：旧

ツイッターのタイムラインをブログ(ワードプレス)に埋め込む方法

新しくツイッターを立ち上げましたので、今後はそちらで更新情報をご紹介していきます。

さて、今回はツイッターの新着情報などのタイムラインを、ワードプレスのブログなどに埋め込む方法をご紹介します。

埋め込み方が、以前と変わっているので、ちょっとだけ面倒になったツイッターの埋め込み方法。

画像付きで、解説していこうと思います。

ツイッターのタイムラインをブログに埋め込む方法

では、タイムラインの埋め込み方法ですが、まず、こちらにアクセスして下さい。

Twitter Publish

すると、こんな画面が現れます。

そうしたら、この部分に、自分のツイッターのアドレスをコピペします。

ツイッターのホームのアドレスではなく、自身のツイッターの書き込みのページ(https://twitter.com/●●●)という感じのページですね。

それをコピペすると…

今度は、こんな画面が現れます。

そうすると、下の方にツイッターの「Copy Code」とでるのでクリックします。

例えば、私の場合は、ワードプレスを使っているので、外観→ウィジェットで、サイドバーに表示しています。

ウィジェットに表示するには、ウィジェットのページに飛び、「テキスト」もしくは「カスタムHTML」を選択します。

そこに埋め込みのコードをコピペするだけで、OKです。

こんな感じですね。

ただ、このままだと、下の方にずらっと、もっと言えば、長く表示されてしまうので、大変不便です。

ですので、今度は、この埋め込んだ情報の高さと幅を調節する方法をご紹介しますと。

高さと幅を変更するには、この二つを追加して下さい。

width=”●●px”(幅の変更に使うコードです。)

height=”●●px”(高さの変更に使うコードです。)

上の画像にもありますが、私の場合は、高さを400PXに幅を300PXにしてみました。

<a class=”twitter-timeline” width=”300px” height=”400px” href=”https://twitter.com/otaku_josi4″>Tweets by otaku_josi4</a> <script async src=”//platform.twitter.com/widgets.js” charset=”utf-8″></script>

他にも、カスタマイズの方法がありますので、そちらもご紹介すると。

基本は、コードを追加していくイメージです。

では、以下にご紹介していきます。

ツイッターのタイムライン埋め込みカスタマイズ方法

境界線の色の変更

「data-border-color=”#●●●”」を追加することで、可能となります。

ちなみに、これから先のご紹介でも、かっこの部分は(「」の部分)要りません。

●の部分には、色を#f5deb3のように設定することで出来ます。
例えば、暗めの黒にしたいなら、#999999などに設定します。

リンクの色の変更

「data-link-color=”#●●●”」を追加して下さい。
●の部分には、境界線の時と同じく、カラー番号をいれます。

テーマ色の変更

「data-theme=”dark”」を追加して下さい。

これは、ツイッターのタイムラインを埋め込む時に、デフォルトでは、「明るい」が選択されています。
これを黒っぽい「暗い」に変更する方法です。
ただ、私のブログでは、イメージに合わないので、デフォルトの明るいを使っています。

レイアウトのコード

他にも、細かくある程度の変更が可能なので、最後にそちらをご紹介しようと思います。

「data-chrome=”noheader”」 →　ヘッダーを非表示にする
「data-chrome=”nofooter”」 →　フッターを非表示にする
「data-chrome=”noborders”」 →　境界線を消す
「data-chrome=”noscrollbar” 」 →　スクロールバーを非表示にする
「data-chrome=”transparent”」 →　背景を透明にする

という感じに、ツイッターでのタイムラインを、ブログやホームページに表示する方法をご紹介しました。

参考になりましたら、幸いです。