約物を半角にするウェブフォントYaku Han JPが便利です！
hiro
magmag
【CSSだけ簡単！】SWELLのお知らせバーの文字をスクロールさせる方法
hiro
記事内に商品プロモーションを含む場合があります
SWELLのカスタマイズ記事です。
お知らせバー（通知バー）をスクロールさせる（流れる文字に変える）カスタマイズです。CSSだけです。
こちらのサイト様のCSSを参考にさせていただきました。ありがとうございます！
WPテーマCocoonの「通知エリア」を「流れる文字」にする方法
https://wm-oboegaki.com/cocoon-marquee/
.c-infoBar {
width: 100%;
overflow: hidden;
padding-top: 0;
padding-bottom: 0;
}
.c-infoBar span {
display: inline-block;
padding-left: 100%;
white-space: nowrap;
animation: marquee 20s linear infinite;
}
@keyframes marquee {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}セレクタを当てはめただけです〜。昔は<marquee>というのがあって、このタグでホームページに電車を走らせたりしたものです。
今はマーキータグは推奨されていない方法なのですが、以前を懐かしく思い出しました。
広告
ABOUT ME
小１娘を育児中の主婦。娘の不登校と向き合っています。ブログカスタマイズが趣味。