この記事では文字をなめらかに点滅させる方法をご紹介します。
当サイトの場合、トップページに表示した検索フォーム上の文字を点滅させるためにこのカスタマイズを導入しています。(他にもピンポイントで使うことも)
↓この部分の文字を点滅
ゆっくりなめらかに点滅するイメージです
このように文字を点滅させたい方は読み進めてくださいね。
点滅させるための手順
- Step1
任意のクラス名をつけ、点滅させるためのアニメーションを設定します。
- Step2
HTML要素に、CSSで設定したクラスを追加することで点滅します。
- Complete完成
当カスタマイズではCSSを使用します。
テーマは関係なく使えますが、Cocoonでの編集方法についてはこちらをご確認の上作業をおこなってください。基本的に子テーマのスタイルシートを使用します。
CSSを入力(コピペOK)/点滅するアニメーションを指定
まず、CSSコードを入力し、点滅させるためのアニメーションを設定します。
任意のクラス名をつけ(ここではblinkとします)、クラスの場合、.(半角ドット)を先頭に付けて記述します。
/* 点滅 */
.blink {
animation: blinking 1s ease-in-out infinite alternate;
}
@keyframes blinking {
0% {opacity: 0;}
100% {opacity: 1;}
}
点滅する仕組みを知りたい方向けに、さくっと解説しています。
HTMLにクラスを追加/点滅させる
そして、点滅させたいHTML要素にクラスを追加します。
クラスを追加する方法は2通りあります。
- HTMLコードを直接入力する
- ブロックエディタの「追加CSSクラス」に入力する
①HTMLコードを直接入力する
まず基本は、HTMLでコード記述する方法。
投稿編集画面でブロックメニューから「カスタムHTML」を選択します。
例として「blink」というクラスを追加する場合、このように記述します。
<p class="blink">この部分の文字を点滅</p>
- 点滅させる文字を<p></p>で囲みます
- <p>に続けて半角スペースをあけてクラス
class="blink"
を追加します
②ブロックエディタの「追加CSSクラス」に入力する
そして簡単なのが、ブロックエディタの「追加CSSクラス」に入力する方法。
点滅させる要素(ブロック)を選択し、
右側サイドメニューの、高度な設定→「追加CSSクラス」に入力すればOK!
プレビューで点滅するのが確認できたら、記事を保存して完成です!お疲れさまでした。
HTMLタグについて/用途に合わせて使い分け
<p></p>の部分(HTMLタグといいます)は用途に合わせて<div><span>など使い分けてください。
タグ | 特徴・使い方 |
---|---|
<div> | division(仕切り) 汎用ブロック要素。 前後に改行が入ります。 ひとつのまとまりとして考えます。 |
<p> | paragragh(段落) ブロック要素。 前後に改行が入ります。 段落を指定する時に使います。 |
<span> | 汎用インライン要素。 前後に改行が入りません。 文字の部分的な装飾などに使います。 |
点滅する仕組み/CSSアニメーションの設定
CSSでアニメーションを表現するには2つの設定が必要となります。
- animationプロパティ
- 詳細を設定する
- @keyframes
- アニメーション開始時の状態と終了時の状態を設定する
1. 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-name: blinking; /*アニメーション名*/
animation-duration: 1s; /*アニメーション1回分の時間の長さ*/
animation-timing-function: ease-in-out;/*アニメーションの動き方*/
animation-delay: 0s;/*アニメーションの開始時間*/
animation-iteration-count: infinite;/*繰り返す回数*/
animation-direction: alternate;/*反転再生するかどうか*/
}
このコードをanimationプロパティで短くまとめています。
.blink {
animation: blinking 1s ease-in-out infinite alternate;
}
- 開始から終了までの時間は1秒
- ゆっくり変化させる
- 無限に繰り返す
こういったことを設定しています。
アニメーションの時間や動き方を変えると違った点滅になります。
2. @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