Twitterタイムラインの埋め込みを短く短縮する方法
Twitterタイムラインの埋め込みをブログやWEBサイトなどのページに、埋め込んでいる人も多くいると思いますが、Twitterタイムラインを埋め込んだ際に、ピクセル数にて６００以上に広がってしまい、予想以上にスペースを取られてしまったという人も多くいるのではないでしょうか？
今回は、これの埋め込み手順とデザインカスタマイズの解説です。
ツイッターのタイムラインの取得方法
まず、ツイッターのタイムラインの取得方法は、
にて、取得することができます。
タイムラインを表示したいツイッターアカウントのURLを入れて、エンターキ－か、矢印を押します。
次に、左側の「Embedded Timeline」をクリックします。
最後に、コードが表示されるのでこれをコピーして、ブログやWEBサイトに貼り付けます。
現状の確認（標準設定の場合）
標準設定だと、貼り付けを行った場合、以下のように表示されます。
およそ大きさは、
幅:360px、高さ:630pxほどの大きさになります。
標準設定の場合、非常に縦に長くなっています。
幅と高さの調整
現状がわかったところで、埋め込み用コードに手を加えていきます。
「“twitter-timeline”」の後ろに、調整用のコードを追加することで、自由にサイズ変更が出来ます。
幅と高さの調整の場合
幅：width=”＊＊px”
高さ：height=”＊＊px”
「＊＊」の部分に任意の数字を入れてください。
ちなみに幅は標準設定だと、極端な場合以外はwidth:100%になります。
追加する際は、必ず前後に半角スペースを空けてください。
当サイトの場合は
幅の調整は必要なく、width:100%でいいので、高さの調節の実「 height=”400px” 」で指定しました。
以上の場合を踏まえて、当サイトの場合のコードは、
<a class="twitter-timeline" height="400px" href="https://twitter.com/freesoft_waza">Tweets by freesoft_waza</a> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
境界線の色の変更
次に、境界線の色の変更の場合は、
「data-border-color=”#＊＊＊”」を追加します。
#＊＊＊の部分に6桁のカラー番号を入れてください。
カラーが分らない人は、こちらを参照
<a class="twitter-timeline" height="400px" data-border-color="#009933" href="https://twitter.com/freesoft_waza">Tweets by freesoft_waza</a> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
リンク色の変更
最後に、リンクの色の変更です。
「data-link-color=”#＊＊＊”」を追加します。
#＊＊＊の部分にカラー番号を入れてください。
<a class="twitter-timeline" data-link-color="#6633ff" href="https://twitter.com/freesoft_waza">Tweets by freesoft_waza</a> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
まとめ
上で上げたように、色々とカスタマイズして変えることが出来ます。上で上げた、すべての変更をしたい場合、<a class=“twitter-timeline”の後にどんどんコードを入れていけば出来ると思います。基本的には、幅を変えることで、整える形で、当サイトではやっていきたいと思っています。
