当ブログを紹介いただいたサイトを掲載します受付中

CSSでなめらかに点滅させる方法(コピペOK)

アイキャッチ/点滅 カスタマイズ
カスタマイズ
記事内に広告が含まれています
スポンサーリンク

この記事では文字をなめらかに点滅させる方法をご紹介します。

当サイトの場合、トップページに表示した検索フォーム上の文字を点滅させるためにこのカスタマイズを導入しています。(他にもピンポイントで使うことも)

↓この部分の文字を点滅

ゆっくりなめらかに点滅するイメージです

このように文字を点滅させたい方は読み進めてくださいね。

スポンサーリンク
この記事を書いた人
  • ブログ好きな40代主婦
  • CocoonサイトをCSSでカスタマイズ
  • JavaScriptを勉強中
  • ドメインパワー35
  • ワードプレスで複数サイトを運営しています
はっちゃん
です
プロフィール

点滅させるための手順

当カスタマイズではCSSを使用します。

テーマは関係なく使えますが、Cocoonでの編集方法についてはこちらをご確認の上作業をおこなってください。基本的に子テーマのスタイルシートを使用します。

スポンサーリンク

まず、CSSコードを入力し、点滅させるためのアニメーションを設定します。

任意のクラス名をつけ(ここではblinkとします)、クラスの場合、.(半角ドット)を先頭に付けて記述します。

クラスとは

CSSで記述する内容をHTMLのどの部分(要素)に反映させるかを指示するもの。

クラス名は自分で分かりやすいように任意につけられます。(半角英数字、記号はハイフン(ー)とアンダーバー(_)のみ使用可)

/* 点滅 */
.blink {
	animation: blinking 1s ease-in-out infinite alternate;
}
 
@keyframes blinking {
	0% {opacity: 0;}
	100% {opacity: 1;}
}

点滅する仕組みを知りたい方向けに、さくっと解説しています。

スポンサーリンク

HTMLにクラスを追加/点滅させる

そして、点滅させたいHTML要素にクラスを追加します。

クラスを追加する方法は2通りあります。

  1. HTMLコードを直接入力する
  2. ブロックエディタの「追加CSSクラス」に入力する

①HTMLコードを直接入力する

まず基本は、HTMLでコード記述する方法。
投稿編集画面でブロックメニューから「カスタムHTML」を選択します。

例として「blink」というクラスを追加する場合、このように記述します。

<p class="blink">この部分の文字を点滅</p>
  1. 点滅させる文字を<p></p>で囲みます
  2. <p>に続けて半角スペースをあけてクラス class="blink" を追加します

②ブロックエディタの「追加CSSクラス」に入力する

そして簡単なのが、ブロックエディタの「追加CSSクラス」に入力する方法。

点滅させる要素(ブロック)を選択し、

右側サイドメニューの、高度な設定→「追加CSSクラス」に入力すればOK!

覚えておくと便利

※今回の例では「blink」と入力します。

ブロックエディタの「追加CSSクラス」は段落全体にクラス追加する場合に使用できます。(部分的な文字にクラスを追加するには①のHTMH直接入力を使用しましょう)


プレビューで点滅するのが確認できたら、記事を保存して完成です!お疲れさまでした。

スポンサーリンク

HTMLタグについて/用途に合わせて使い分け

<p></p>の部分(HTMLタグといいます)は用途に合わせて<div><span>など使い分けてください。

よく使うタグを覚えておくと便利
タグ特徴・使い方
<div>division(仕切り)
汎用ブロック要素。
前後に改行が入ります。
ひとつのまとまりとして考えます。
<p>paragragh(段落)
ブロック要素。
前後に改行が入ります。
段落を指定する時に使います。
<span>汎用インライン要素。
前後に改行が入りません。
文字の部分的な装飾などに使います。
タグは他にもたくさんあります
スポンサーリンク

点滅する仕組み/CSSアニメーションの設定

CSSでアニメーションを表現するには2つの設定が必要となります。

  1. animationプロパティ
    • 詳細を設定する
  2. @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>
POINT

文章の途中で改行しないで一部分だけ指定するときは<span></span>タグで囲みます。

文字の他に画像も点滅できます

まったく同じ要領で、画像も点滅します。

画像を点滅させる状況はあまりないかもしれませんが、参考までに載せておきますね。

ぴかっ、ぴかっ

まとめ/点滅はピンポイントに使いましょう

イメージ画像

CSSで文字を点滅させる方法について解説しました。

点滅を多用するとうるさくなってしまうので、特に目立たせたい部分にピンポイントで使うことをおすすめします。

コピペで簡単なのでやってみてください。

Comment

タイトルとURLをコピーしました