目次
X(旧Twitter)のウィジェットとは
XのウィジェットとはWebサイトにXのポスト一覧を埋め込むためのものです。
↓要はWebサイトでよく埋め込まれているこれのことです。
X Posts by @iwbjpアニメのWebサイトだと、Xのポスト一覧をWebページ内に表示させていることが多いので、アニメ好きの方だと見たことがあると思います。(例: アニメ『【推しの子】』公式サイト)
class名がtwitter-timelineとなっていますが、ポストの一覧はタイムライン(時間順)ではなくXのオススメ順で表示されます。(いいねが多いポストは上に表示されやすい。表示順の変更は不可)
※ 固定ポストは従来通り一番上に表示されます。
Xのポスト一覧)の表示方法
Xのポスト一覧を表示するには以下のコードを貼り付けるだけです。
<a class="twitter-timeline" href="https://twitter.com/iwbjp?ref_src=twsrc%5Etfw" target="_blank" data-width="300" data-height="400" data-chrome="noheader nofooter">X Posts by @iwbjp</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>例として@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」に変えてしまうとポスト一覧を読み込まなくなるので変更してはいけません。
<!-- これだとXのポスト一覧を読み込み不可 -->
<a class="x-timeline" href="https://x.com/iwbjp?ref_src=twsrc%5Etfw" target="_blank" data-width="300" data-height="400" data-chrome="noheader nofooter">X Posts by @iwbjp</a>
<script async src="https://platform.x.com/widgets.js" charset="utf-8"></script>aタグ内のテキストを消してはいけない
aタグ内のテキストを削除すると、読み込みに失敗したときに何も表示されなくなってしまうので、代替として「X Posts by @iwbjp」のようなXへのリンクを必ず貼ってください
<!-- aタグ内のテキストを消してはいけない -->
<a class="twitter-timeline" href="https://twitter.com/iwbjp?ref_src=twsrc%5Etfw" target="_blank" data-width="300" data-height="400" data-chrome="noheader nofooter"></a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>borderや背景色は消せる
ウィジェットのborderや背景色はdata-chromeにnobordersやtransparentを指定すれば消せます。
別のborderの色や背景色を指定したい場合はnobordersやtransparentを指定して、別途CSSで追加してください。
.twitter-widget {
overflow-y: scroll;
width: fit-content;
height: 400px;
border: 1px solid #AAA;
background: rgb(255 255 255 / 0.8);
}noscrollbarを指定したら別途CSSで調整する
Windowsだとスクロールバーがあるとウィジェット部分の見た目が悪くなるので、data-chromeにnoscrollbarを指定してスクロールバーを非表示にしているケースがあります。(例: らんま1/2 公式サイト)
しかし、スクロールバーを非表示にしてしまうと、ウィジェット部分がスクロール可能なのかわかりにくくなり、スクロールしても現在全体のどこまでスクロールしているのかわかりにくくなってしまうため問題があります。
CSSの::-webkit-scrollbarなどを使用すれば、スクロールバーを装飾してWebkitブラウザの見た目を揃えることができます。
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-track {
background: #EEE;
}
::-webkit-scrollbar-thumb {
background: #CCC;
border-radius: 4px;
margin: 2px;
box-shadow: none;
border: 1px solid #000;
}
@-moz-document url-prefix() {
html {
scrollbar-color: #CCC #EEE;
scrollbar-width: thin;
}
}
