基本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 -->
ポイント
- 同じ文章にする
- リストの数を増やす・減らすことでアニメの不具合解消
- ulタグの横の余白は全てリセットする
- liタグで文字間の余白を指定する
- liタグをアニメションさせる
- 親要素であるulタグに余白があると、アニメーションのループが余白の位置で途切れてループしてしまいます。
- そのため、ulタグはあくまで横並びにするだけにとどめた方が、カスタマイズしやすいです。
参考 https://blog-mi.com/scrolling-text
