Webページ内にXのウィジェットを埋め込んだサンプル

<div class="twitter-widget">
  <a class="twitter-timeline" href="https://twitter.com/iwbjp" target="_blank" data-width="300" data-chrome="noheader nofooter noborders transparent noscrollbar">X Posts by @iwbjp</a>
</div>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

body {
  background-image:
  repeating-linear-gradient(
    90deg,
    #000 ,
    #000 1px,
    transparent 1px,
    transparent 32px
  ),
  repeating-linear-gradient(
    0deg,
    #000 ,
    #000 1px,
    #fff 1px,
    #fff 32px
  );
}

::-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;
  }
}

.twitter-widget {
  overflow-y: scroll;
  width: fit-content;
  height: 400px;
  border: 1px solid #AAA;
  background: rgb(255 255 255 / 0.8);
}

元記事を表示する