トップぺージの最初に表示させている新着記事に、
- 新着記事と分かるように＼New／の見出しを表示
- さらに点滅させたい
と思いカスタマイズを行いました。
HTMLの<blink>タグは廃止されましたが、CSSのアニメーションを使って点滅を実装することができます。
動作イメージ
DEMO
こんな感じにゆっくりなめらかに点滅するイメージです
See the Pen 文字を点滅させる by はっちゃん (@hacchan) on CodePen.
文字を点滅させるためのコード
HTMLはこちら
記事作成画面（HTMLモード）で入力します。
<h2 class="blink">＼NEW／</h2>HTMLの補足
- 点滅させる文字を<タグ>で囲みます
- <タグ>にクラス（class=”blink”）を指定しておきます（後述のCSSでアニメーションを設定するために使います）
タグについて
<h2></h2>の部分（タグといいます）はここでは見出しにするために<h2>を使っていますが、用途に合わせて<div><p><span>など使い分けてください。
| タグ | 特徴・使い方 |
|---|---|
| <div> | division（仕切り） 汎用ブロック要素。 前後に改行が入ります。 ひとつのまとまりとして考えます。 |
| <p> | paragragh（段落） ブロック要素。 前後に改行が入ります。 段落を指定する時に使います。 |
| <span> | 汎用インライン要素。 前後に改行が入りません。 文字の部分的な装飾などに使います。 |
例：<div>テキスト</div>
このように閉じタグをつけて文字を囲みます。
クラスについて
CSSで記述する内容をHTMLのどの部分（要素）に反映させるかを指示するものです。
<div class=”class1″>クラスの書き方の例</div>.class1 {ここにスタイルを記述}CSSはこちら
先ほど指定したクラスを記述（.blink）し、点滅させるための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: blinking 1s ease-in-out infinite alternate;
}こういったことを設定しています。
２. @keyframesについて
@keyframesはアニメーションの開始から終了までに、どのような動きをさせるのかを指定します。
@keyframesのあとにanimationプロパティで指定した任意の名前を書くことによって紐付けます。
アニメーションの開始を「0%」、終了を「100%」とした場合のプロパティの変化を下記のように記載します。
@keyframes blink {
0% {opacity: 0;}
100% {opacity: 1;}
}- 0%がアニメーション開始時
- opacity: 0（要素は透明）
- 100%がアニメーション終了時
- opacity: 1（要素は不透明）
点滅させたいとき
一度CSSを設定しておくと、
例えば、ここを点滅させたいな！
と思ったときに記事作成画面（HTMLモード）でこのコードを追加するだけでいつでもどこでもピカピカ^^
<span class="blink">ここを点滅させたいな！</span>文章の途中で改行しないで一部分だけ指定するときは<span></span>タグで囲みます。
点滅を多用するとうるさくなってしまうので特に目立たせたい部分に！コピペで簡単なのでやってみてください♪
参考にさせていただいたサイト
今回、参考にさせていただいたのはこちらのサイト。コードも公開されています。
Comment