X(旧Twitter)ウィジェットの埋め込み幅と高さを設定する方法

このブログではもうツイートを埋め込んでいませんが、ブログサイトにツイートを埋め込みたい人はコチラもご参考ください。
参考文献(Xヘルプセンター)
https://help.twitter.com/ja/using-twitter/embed-twitter-feed
X(旧Twitter)の埋め込みURLのデフォルト設定
アカウントのタイムラインを表示させたい場合、「@」以降のアルファベットや記号数字を含む文字列を直接指定します。その後、フォーマットを指定します。



X(旧Twitter)のデフォルトURL表示結果
かなり幅広く、大きく表示されます。
Tweets by KatoMisa3縦幅と横幅の設定方法
たくさんつぶやいたときにレイアウトがだんだん崩れてくることがあります。iPhone 上で横幅がはみ出て画面に収まらないことも。
この場合、ツイートの表示画面(ウィジェット)の出力幅を調整すればOK。
デフォルト設定
<a class="twitter-timeline" href="https://twitter.com/<アカウント名>?ref_src=twsrc%5Etfw">Tweets by <アカウント名></a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
縦幅は data-height
高さを指定します。方法は2種類あります。
- 件数を固定する(data-tweet-limit)
- 高さを固定する(data-hight)
件数を固定する方法の場合、ブログサイトにとどまった状態で過去のツイートを追うことができません。ブログサイトからの離脱を防ぐには、極力とどまってもらう方が閲覧者には優しいと思います。ですので、ここでは高さを固定する方法をご紹介します。
高さを固定するには、 data-hight =”500px” とサイズを明示的に指定します。500px くらいがPCサイトでもスマホ上でも一画面に収まりやすいと思いますが、サイトレイアウトにもよると思います。ご自身のサイトでちょうどよいと思うサイズに適宜調整してください。
横幅は data-width
横幅は、一択。
- 横幅のサイズを指定する(data-width)
レスポンシブを想定して 100% としてみましたが、こちらは正常に動作しませんでした。サイズを明示的に指定する必要があるようです。PCサイトでもスマホでもちょうどよいサイズを探すしかありません。私の場合、iPhone 7 で確認した結果、 data-width=”320px” を採用しました(過去の別サイトですが)。
実際の設定例
設定内容
カスタマイズhtml で、data-width と data-height を指定します。
<a class="twitter-timeline" href="https://twitter.com/<アカウント名>?ref_src=twsrc%5Etfw" data-width="320px" data-height="500px">Tweets by <アカウント名></a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
表示結果
Tweets by KatoMisa3まとめ
CSS等の別方法を試されている方もいらっしゃいますが、環境により反映されないケースも多々あるようです。個人的にはこの設定だと初心者も採用しやすく、後から調整もしやすいのでおススメですよ。
ではでは、素敵なブログライフを応援しております!

ー fin ー