ご訪問ありがとうございます.・。*+
茨城・千葉・宮城エリアの釣り(ファミリーフィッシング)をメインとした趣味ブログです。
ブログをカスタマイズすることが好きで無料ブログからWordPressに引っ越しました。
書きたいことや旧ブログの記事移行がなかなか追い付いつかず、ゆっくりペースで更新中ですがお立ち寄りください(*^^*)

全記事一覧はこちら >>

CSSでテキストを点滅させるカスタマイズ

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

CSSだけで点滅させてみる

トップぺージの一番上に表示される記事に

  1. 新着記事(New Articles)の見出しを表示
  2. さらに点滅させたい

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

カスタマイズ後

\New Articles/

やったぁ成功!イメージ通り点滅させることができました(^^)

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

今回、参考にさせていただいたのはこちらのサイト。コピペできるコードが公開されているのでお借りしました(^^)

HTML

ここで点滅させる文字とクラス(class=”blinking”)を設定します。

<span class="blinking">点滅させたいテキストをここに入れる</span>
  • class名は自分で分かりやすいように任意に変更できます。(例えばclass=”pikapika”などでもOK!)

CSS

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

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

ワードプレス以外のブログサービスでも利用できます。

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

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

<span class=”blinking”>ここを点滅させたいな!</span>
とHTMLを入れて点滅させています。

と思ったときに記事作成画面でクラス(class=”blinking”)を追加するだけでいつでもどこでもピカピカ(笑)

コピペで簡単なので参考にしてみてください♪

コメント