ご訪問いただきありがとうございます！
ホームページ制作中心のWEBデザイナーやWEB制作講師をしながら、ボランティアで子どもプログラミング教室を開いている金原陽子です！
@kinbara_yoko
今日は
wordpress既存テーマのSWELLに、『ずっと右から左に流れ続けるテキスト』をコピペで簡単に実装する方法
を紹介します！
こんなやつです↓↓↓
- OPPOTUNITIES DON’T OFTEN COME ALONG YOU HAVE TO GRAB THEM WHEN THEY DO
- OPPOTUNITIES DON’T OFTEN COME ALONG YOU HAVE TO GRAB THEM WHEN THEY DO
- OPPOTUNITIES DON’T OFTEN COME ALONG YOU HAVE TO GRAB THEM WHEN THEY DO
こんな人にオススメ
- WordPressテーマのSWELLを使っている
- 動きをつけてオリジナルデザイン感を出したい
- あしらいデザインで他と差別化したい
- コーディングは苦手だけど気軽にアレンジしてみたい
SWELLにテキスト（文字）をずっと流し続けるための手順
フルワイドブロックを追加
画面の端から端にテキストを流すためにフルワイドブロックを使用します！
STEP
「ブロックを追加」→「フルワイド」を選択
STEP
コンテンツの横幅を「フルワイド」に
※上下のPADDING（上下の余白）はデザインに合わせて変更してみてください。
リストブロックを使って流したい文字を追加
STEP
「ブロックを追加」→「リスト」から以下のように文字を入れる
※入れる文字は「ご自身が流したいテキスト」を入れてください
STEP
リストブロックに「高度な設定」→「追加CSSクラス」から【flows-text】というクラス名を追加
※カスタムHTMLを使って以下のHTMLを追加してもOK！
STEP
「ブロックを追加」→「カスタムHTML」を選択
STEP
カスタムHTMLのボックス内に以下のHTMLを追加
<li>〜<li>間の「〜」の部分に流したいテキストを入れてください。
<ul class="flows-text">
<li>OPPOTUNITIES DON'T OFTEN COME ALONG YOU HAVE TO GRAB THEM WHEN THEY DO</li>
<li>OPPOTUNITIES DON'T OFTEN COME ALONG YOU HAVE TO GRAB THEM WHEN THEY DO</li>
<li>OPPOTUNITIES DON'T OFTEN COME ALONG YOU HAVE TO GRAB THEM WHEN THEY DO</li>
</ul>リストブロックでもカスタムHTMLでも同じことをしているので、お好きな方を使ってカスタマイズしてみてください！
テキストを流すための追加CSSを追加
「カスタマイズ」→「追加CSS」の枠内に以下のCSSを追加する。
/*文字が横に流れる*/
/*ul*/
.flows-text {
display: flex;
list-style: none;
overflow: hidden;
}
/*li*/
.flows-text li {
color:#6d7f88;/*文字の色*/
font-size: 50px;/*スマホの文字サイズ*/
font-weight: bold;/*太文字に*/
white-space: nowrap;
animation: flows-left 70s linear infinite;/*秒数を変えて流れるスピードを変更*/
}
/*PCの時のフォントサイズ*/
@media (min-width: 600px) {
.flows-text li {
font-size: 70px;
}
}
/*アニメーション*/
@keyframes flows-left {
100% {
transform: translateX(-100%);
}
}うまくできましたか？ぜひ、色や文字の大きさ、テキストが流れるスピードを変えてWEB制作に活かしてみてくださいね！
あわせて読みたい
【ワードプレステーマSWELL】簡単おしゃれなハンバーガーメニューデザインのカスタマイズをコピペで実現！
WordPress（ワードプレス）人気の既存テーマである「SWELL」。このブログサイトももちろんSWELLで制作しています。 SWELLはコーディングができなくてもスタイリッシュで…
