目次
X(旧Twitter)のウィジェットとはXのポスト一覧)の表示方法class名やドメインをxに変えてはいけないaタグ内のテキストを消してはいけないborderや背景色は消せるnoscrollbarを指定したら別途CSSで調整するX(旧Twitter)のウィジェットとはXのウィジェットとはWebサイトにXのポスト一覧を埋め込むためのものです。
↓要はWebサイトでよく埋め込まれているこれのことです。
X Posts by @iwbjpアニメのWebサイトだと、Xのポスト一覧をWebページ内に表示させていることが多いので、アニメ好きの方だと見たことがあると思います。(例: アニメ『【推しの子】』公式サイト)
class名がtwitter-timelineとなっていますが、ポストの一覧はタイムライン(時間順)ではなくXのオススメ順で表示されます。(いいねが多いポストは上に表示されやすい。表示順の変更は不可)
※ 固定ポストは従来通り一番上に表示されます。
Xのポスト一覧)の表示方法Xのポスト一覧を表示するには以下のコードを貼り付けるだけです。
HTMLX Posts by @iwbjp例として@iwbjpのアカウントを表示させましたが、例えば@cssniteを表示したい場合は「iwbjp」部分を「cssnite」に置換すれば、@cssniteのXのポスト一覧が表示されます。
幅と高さはdata-widthとdata-heightで指定します。data-chrome="noheader nofooter" はウィジェットのヘッダーとフッターを非表示にするための指定です。ウィジェットのヘッダーとフッターはあっても意味がないのでほとんどのWebサイトで非表示が指定されています。
一見簡単そうに見えますが、カスタマイズするにはノウハウが必要なのと、Webサイトによっては間違った使い方をしているケースがあるので注意が必要です。
class名やドメインをxに変えてはいけないclass名に「twitter-timeline」、ドメインに「twitter.com」が使用されていますが、これを「x-timeline」や「x.com」に変えてしまうとポスト一覧を読み込まなくなるので変更してはいけません。
HTML