今回はCSSで文字を点滅させる方法について。
トップページを作成するときや記事を書いている中で、部分的にここを点滅させてアピールしたいと思うときはありませんか？
そんなとき点滅できるHTMLの<blink>タグがありましたが、2022年現在は廃止されており、代替策でCSSのアニメーションを使って点滅を実装できます。
例として当サイトの場合、トップページに表示した検索窓の上に
＼気になるキーワードを入れてね／
という文字を入れて点滅させるためにこのカスタマイズを導入しています。
点滅させてみたいと思う方はこの記事をご覧ください。
- ブログ好きな40代主婦
- CocoonサイトをCSSでカスタマイズ
- JavaScriptを勉強中
- ドメインパワー33
- ワードプレスで２サイトを運営しています
です
点滅する実際の動作イメージ
こんな感じにゆっくりなめらかに点滅するイメージです
＼気になるキーワードを入れてね／
点滅させるための手順
- Step1
点滅させたい部分（文字）にクラス名をつけます。
- Step2
点滅させるためのアニメーションをここで設定しています。
- Complete完成
点滅させたい部分（文字）にクラス名をつける
クラスとは、CSSで記述する内容をHTMLのどの部分（要素）に反映させるかを指示するものです。
点滅させたい文字にクラス名をつけるのですが、クラス名を付与する方法は２通りあります。
- HTMLを編集する
- ブロックエディタの「追加CSSクラス」に入力する
①HTMLを編集する
まず基本は、HTMLを編集する方法。
投稿編集画面、HTMLモードに変換して入力します。
例として、「blink」というクラス名をつける場合、このように記述します。
<div class="blink">＼気になるキーワードを入れてね／</div>- 点滅させる文字を<タグ></閉じタグ>で囲みます
- <タグ>に続けて半角スペースをあけてクラス（class=”blink”）を指定しておきます
②ブロックエディタの「追加CSSクラス」に入力する
そして便利なのがこちらの方法。
ブロックエディターのまま、
右側メニューの高度な設定 → 追加CSSクラス にと入力すればOK！
※今回の場合は「blink」と入力します。
段落全体にクラス名をつける場合に使用できます。（部分的な文字にクラス名をつけるには①のHTMHを使用しましょう）
HTMLタグについて／用途に合わせて使い分け
<div></div>の部分（HTMLタグといいます）は用途に合わせて<p><span>など使い分けてください。
| タグ | 特徴・使い方 |
|---|---|
| <div> | division（仕切り） 汎用ブロック要素。 前後に改行が入ります。 ひとつのまとまりとして考えます。 |
| <p> | paragragh（段落） ブロック要素。 前後に改行が入ります。 段落を指定する時に使います。 |
| <span> | 汎用インライン要素。 前後に改行が入りません。 文字の部分的な装飾などに使います。 |
例：<div>テキスト</div>
このように閉じタグをつけて文字を囲みます。
CSSコードを入力（コピペOK）
最後に、CSSコードを入力します。
テーマCocoonでの編集する場所等についてはこちらにまとめましたので、ご確認の上編集をおこなってください。
先ほど指定したクラスを.（半角ドット）を前に付けて記述し、点滅させるための動きを付けるCSSがこちらです。
/* 点滅 */
.blink {
animation: blinking 1s ease-in-out infinite alternate;
}
@keyframes blinking {
0% {opacity: 0;}
100% {opacity: 1;}
}
プレビューで点滅するのが確認できたら保存。
作業はこれで完成です！！お疲れさまでした。
ここから先は「どうして点滅するの？」と仕組みが少し気になった人へさくっとだけ補足していきます。
CSS／アニメーションの設定
CSSでアニメーションを表現するには2つの設定が必要となります。
- animationプロパティ
- 詳細を設定する
- @keyframes
- アニメーション開始時の状態と終了時の状態を設定する
１. animationのプロパティ
ここでアニメーションを動かす時間や繰り返しなどの詳細を設定していきます。
- animation-name … アニメーション名（クラス名とは別に自由に決めてOK、ここで設定した名前を最下段の@keyframesで指定する）
- animation-duration … アニメーション1回分の時間の長さ（初期値は「0」、単位は「秒(s)」または「ミリ秒（ms）」で指定します）
- animation-timing-function … アニメーションの動き方（初期値は「ease」：開始と終了を滑らかに）
- animation-delay … アニメーションの開始時間（初期値は「0」）
- animation-iteration-count … 繰り返す回数（初期値は「1」）
- animation-direction … 反転再生するかどうか（初期値は「normal」）
これらのプロパティをひとつずつ書いてもよいですが、animationプロパティを使うとまとめて下記のように表記できます。
まとめるとコードも短くなりすっきりするね！
.blink {
animation: blink 1s ease-in-out infinite alternate;
}- 開始から終了までの時間は1秒
- ゆっくり変化させる
- 無限に繰り返す
こういったことを設定しています。
２. @keyframesについて
@keyframesはアニメーションの開始から終了までに、どのような動きをさせるのかを指定します。
@keyframesのあとにanimationプロパティで指定した任意の名前を書くことによって紐付けます。
アニメーションの開始を「0%」、終了を「100%」とした場合のプロパティの変化を下記のように記載します。
@keyframes blink {
0% {opacity: 0;}
100% {opacity: 1;}
}- 0%がアニメーション開始時
- opacity: 0（要素は透明）
- 100%がアニメーション終了時
- opacity: 1（要素は不透明）
opacitycopy は CSS のプロパティで、要素の透過度を設定します。（0～1の範囲で0.1などの小数点を使って指定可能）
点滅させたいとき
一度CSSを設定しておくと、
例えば、ここを点滅させたいな！
と思ったときに投稿編集画面（HTMLモード）でこのコードを追加するだけでいつでもどこでもピカピカ^^
<p>例えば、<span class="blink">ここを点滅させたいな！</span></p>文章の途中で改行しないで一部分だけ指定するときは<span></span>タグで囲みます。
まとめ／点滅はピンポイントに使いましょう
CSSで文字を点滅させる方法について解説しました。
点滅を多用するとうるさくなってしまうので、特に目立たせたい部分にピンポイントで使うことをおすすめします。
コピペで簡単なのでやってみてください。
Comment