ゆるい海釣りの記録と、ブログのカスタマイズを綴る趣味ブログです。新着記事はこちら >>

CSSでテキストを点滅させるカスタマイズ(コピペOK)

文字を点滅させるカスタマイズ

トップぺージの一番上に表示させている記事(新着記事)に

  1. 新着記事と分かるように\New Articles/の見出しを表示
  2. さらに点滅させたい

と思いカスタマイズを行いました。

CSSだけで点滅させてみる

DEMO

こんな感じのイメージです

See the Pen 文字を点滅させる by はっちゃん (@hacchan) on CodePen.

文字を点滅させるためのコード

HTML

記事作成画面(HTMLモード)で

<h2 class="blink">点滅させたい見出しをここに入れる</h2>

HTMLの補足

  1. 点滅させる文字をタグで囲みます
  2. タグにクラス(class=”blink”)を追加
classについて
  • classの前には半角スペースを入れて区切ります
  • class名は自分で分かりやすいように任意に変更できます。例えばclass=”pikapika”などでもOK!(半角英数字、記号はハイフン(ー)とアンダーバー(_)のみ使えます)
タグについて

<h2>の部分(タグ)は用途に合わせて<div><p><span><など使い分けてください。(閉じタグには”/”を忘れず)

タグ説明
<div>division(仕切り)
汎用ブロック要素。
前後に改行が入ります。
ひとつのまとまりとして考えます。
<p>paragragh(段落)
ブロック要素。
前後に改行が入ります。
段落を指定する時に使います。
<span>汎用インライン要素。
前後に改行が入りません。
文字の部分的な装飾などに使います。

CSS

こちらが点滅させるためのCSS。

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

CSSの補足

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

  1. 1つ目は@keyframes
    • アニメーション開始時の状態と終了時の状態を設定する
  2. もうひとつはanimationプロパティ
    • 詳細を設定する
@keyframesについて

@keyframesは波カッコ内に要素の形状を記載します。@keyframesのあとに任意の名前を設定することで、次に書くanimationプロパティに紐づけします。

  • 0%がアニメーション開始時
  • 100%がアニメーション終了時となります。
@keyframes blink {
	0% {opacity: 0;}
	100% {opacity: 1;}
}
animationのプロパティ
  •  animation-name … アニメーション名
  • animation-duration … アニメーション1回分の時間の長さ(初期値は「0」)
  • animation-timing-function … アニメーションの動き方(初期値は「ease」)
  • animation-delay … アニメーションが何秒目から開始するか(初期値は「0」)
  • animation-iteration-count … 繰り返す回数(初期値は「1」)
  • animation-direction … 反転再生するかどうか(初期値は「normal」)

animationではこれらのプロパティを一括指定して下記のように表記することができます。

ベンダープレフィックス

先頭にある「-webkit-」については、CSSの新しいプロパティに付けて、記述したプロパティが拡張機能であることをブラウザに示すために使われる識別子です。

ブラウザによって使い分けます。

-moz-  …… Firefox
-webkit- …… Google Chrome、Safari
-o-    …… Opera
-ms-   …… Internet Explorer

点滅させたいとき

一度CSSを設定しておくと、

例えば、ここを点滅させたいな!

と思ったときに記事作成画面(HTMLモード)でこのコードを追加するだけでいつでもどこでもピカピカ(笑)

<span class="blink">ここを点滅させたいな!</span>

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

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

参考にさせていただいたサイト

今回、参考にさせていただいたのはこちらのサイト。コードも公開されています。


カスタマイズが効かないとき

たった一文字の表記ミスでデザインが崩れたり効かなかったりするので、まずは下記の点を確認してみてください。

  • コードは半角英数字になっているか
  • 余計なスペース等が入っていないか
  • CSSクラスの前に"."が付いているか
  • CSSのメモ書きはきちんと/* */で囲んでいるか

事前にバックアップをとり、カスタマイズは慎重に行いましょう。

カスタマイズの多くは他のサイトを参考にしながらも、自分で調べて試行錯誤しながら手間隙をかけてコードを書いています。


このデザインにするにはどう書けばよい?CSSが効かなかったり、コードの不備でデザインが崩れてしまったり修復したり、あーでもない、こーでもない!

コピペされた際にはコメント欄に一言(カスタマイズできた、不具合ありなど何でも)、足跡を残していただくと大変励みになります^^

ブログ関連カスタマイズ
\この記事をシェアする/
\はっちゃんをフォローする/
のんびり釣りっこ

コメント

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