Twitterタイムラインの埋め込みとデザインカスタマイズの方法

Twitterタイムラインの埋め込みとデザインカスタマイズの方法

ブログやWEBサイトなどにツイッターのタイムライン(ウィジェット)を埋め込んでいる人も多いかと思います。

当ブログも遅まきながらツイッターアカウントを取得して、右サイドバー(PC表示の場合)に埋め込みました。

今回は、これの埋め込み手順とデザインカスタマイズの解説です。

タイムラインの埋め込み

まずはタイムラインの埋め込み方法です。

こちらのページに行き、

https://publish.twitter.com/#

タイムラインを表示したいツイッターアカウントのURLを入れて、エンターキーを押します。

URL、ちなみに当ブログの場合は以下です。
https://twitter.com/souken_blog

次に、左側の「Embedded Timeline」をクリックします。

最後に、コードが表示されるのでこれをコピーして、ブログなりWEBサイトなりに貼り付けます。

これでタイムランが表示されるようになります。

幅と高さの調整

さーて、カスタマイズ開始です。

デフォルトのままだと以下のように表示されます。
(*これは画像です↓)

縦に長いですね (^_^;)

ここから埋め込み用コードの「“twitter-timeline”」の後ろに、カスタマイズ用のコードを追加していきます。
追加する際は、必ず前後に半角スペースを空けてください。

まず、幅と高さの調整。
ちなみに幅はデフォルトだとwidth:100%になります。

幅:width=”**px”
高さ:height=”**px”

「**」の部分に任意の数字を入れてください。

当ブログの場合は
「width=”320px” height=”400px”」で指定しました。

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

だいぶ短くなりました。

境界線の色の変更

次に、境界線の色の変更です。

「data-border-color=”#***”」を追加します。
#***の部分に6桁のカラー番号を入れてください。
番号が分からない人はこちらのページを参考にされてください。

<a class="twitter-timeline" width="320px" height="400px" data-border-color="#f5deb3" href="https://twitter.com/souken_blog">Tweets by souken_blog</a> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

リンク色の変更

リンクの色の変更です。

「data-link-color=”#***”」を追加します。
#***の部分にカラー番号を入れてください。

<a class="twitter-timeline" width="320px" height="400px" data-border-color="#f5deb3" data-link-color="#e55937" href="https://twitter.com/souken_blog">Tweets by souken_blog</a> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

テーマ色の変更

テーマの色の変更なんてものもあります。

デフォルトは「明るい」になってますが、これを「暗い」に変更できます。

「data-theme=”dark”」を追加します。

<a class="twitter-timeline" width="320px" height="400px" data-border-color="#f5deb3" data-link-color="#e55937" data-theme="dark" href="https://twitter.com/souken_blog">Tweets by souken_blog</a> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

これは当ブログのカラーには合わないのでパスしますw

レイアウト全般のカスタマイズ

レイアウト関連のコードは複数あるのでまとめて記載します。
全て「data-chrome-“***”」で表します。

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

複数まとめて記入する場合は、たとえば、
「data-chrome=”noheader nofooter”」
と、半角スペースを空けて複数入れます。

当ブログでのカスタマイズ

ちなみに、当ブログに埋め込んだコードは、

<div style="text-align:center;">
<a class="twitter-timeline" width="320px" height="400" data-chrome="transparent nofooter" data-link-color="#e55937" href="https://twitter.com/souken_blog">Tweets by souken_blog</a> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>

としています。

タイムラインのコードをdivでくくって中央寄せにしています。