基本HTML(CSSに背景色あり)グループブロックでラップ

  • Hello World!
  • Hello World!
  • Hello World!

基本HTML(CSSに背景色なし)

  • 777Hello World!
  • 555Hello World!
  • 333Hello World!

全幅otherブロック仕様

  • otherブロック仕様
  • otherブロック仕様
  • otherブロック仕様
otherブロックの中にそのまま貼り付け


<!-- wp:list {"vkbCustomCss":"/* ulタグ */\n.scroll-list-all2 {\n display: flex;\n list-style: none;\n padding-inline: 0;\n margin-inline: 0;\n gap: 0;\n}\n\n/* liタグ */\n.scroll-list-all2 li {\n color: #fff;\n font-size: 3em;\n font-weight: bold;\n white-space: nowrap;\n padding: 0 0.5em 0 0;\n margin: 0;\n animation: marquee-left 16s linear infinite;\n}\n\n/* PCの時のフォントサイズ */\n@media (min-width: 600px) {\n .scroll-list-all2 li {\n font-size: 8vw;\n }\n}\n\n/* アニメーション */\n@keyframes marquee-left {\n 100% {\n transform: translateX(-100%);\n }\n}","className":"scroll-list-all2"} -->
<ul class="wp-block-list scroll-list-all2"><!-- wp:list-item -->
<li>1SAMPLE1</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>2SAMPLE2</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>3SAMPLE3</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>4SAMPLE4</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->

ポイント

  • 同じ文章にする
  • リストの数を増やす・減らすことでアニメの不具合解消

参考 https://blog-mi.com/scrolling-text