<景品表示法に基づく表記> 本サイトのコンテンツには、商品プロモーションが含まれている場合があります。

カスタマイズ

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

admin

このブログではもうツイートを埋め込んでいませんが、ブログサイトにツイートを埋め込みたい人はコチラもご参考ください。

参考文献(Xヘルプセンター)
https://help.twitter.com/ja/using-twitter/embed-twitter-feed

2023年8月現在、x.com は twitter.com にリダイレクトされます。herf 部分はそのままで運用可能です。

スポンサーリンク

X(旧Twitter)の埋め込みURLのデフォルト設定

アカウントのタイムラインを表示させたい場合、「@」以降のアルファベットや記号数字を含む文字列を直接指定します。その後、フォーマットを指定します。

Embeddid Timeline を押すと、リンクとプレビューが表示されます。

X(旧Twitter)のデフォルトURL表示結果

かなり幅広く、大きく表示されます。

縦幅と横幅の設定方法

たくさんつぶやいたときにレイアウトがだんだん崩れてくることがあります。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>

表示結果

まとめ

CSS等の別方法を試されている方もいらっしゃいますが、環境により反映されないケースも多々あるようです。個人的にはこの設定だと初心者も採用しやすく、後から調整もしやすいのでおススメですよ。

ではでは、素敵なブログライフを応援しております!

あわせて読みたい
【HTML】X(旧Twitter)のツイートの埋め込み位置を真ん中にする方法
【HTML】X(旧Twitter)のツイートの埋め込み位置を真ん中にする方法

ー fin ー

スポンサーリンク
ABOUT ME
加藤ミサ
加藤ミサ
katomisa (かとみさ) / 美容家SEのママキャリ女子
美容家SEのママキャリ女子。主に言葉や文章を通して「スキ」を育てたい、発信したいという人を応援している当ブログ「朝ライフ」の運営者。個人ブログの制作方法や、ブログに使えるストック素材も販売しています。note には考察エッセイやITコラム、ワーママ視点での仕事観や子育て、美容情報を執筆。無料記事の一部は当ブログでもご紹介しています。

・ブログガイド
 https://asalife.jp/blog-guide-top
・かとみさイラスト制作室
 https://katomisaillust.asalife.jp
・note
 https://note.com/katomisa3
記事URLをコピーしました