記事の中の文字や画像を目立たせるために、点滅をさせられたら便利ですよね。
昔は便利な<blink>タグが使えたのですが、現在は非推奨で使うことができません。
現状、文字や画像を点滅させるにはCSSを用いる必要があります
でもBloggerだと記事でのCSSの使い方に悩むかと思います。
そこで今回は一文をコピペするだけで、簡単に文字や画像を点滅させる方法を解説していきます！
HTMLビューに切り替え
記事本文で点滅用コードを挿入するには、HTMLビューでの編集が必要になります。
HTMLビューは記事を書く画面のタイトル下にあるメニューアイコンの一番左で切り替えられます。
適宜切り替えて、以降のコードを貼り付けて編集してください。
点滅用コード使用方法
基本の点滅用コードは以下の通りです。
<span class="blink">点滅させたい文字や画像</span><style>@keyframes blinking {0% {opacity: 0; }100% {opacity: 1; }} .blink {animation: blinking 2s infinite alternate; }</style>
「点滅させたい文字や画像」の部分に文字や画像を挿入して使います。
2sの部分を変更することで、点滅の間隔を変更することが可能です。
ただあまりに早いと目が痛くなるので、加減してくださいね。
文字での使用方法
点滅用コードを貼り付け、そのまま「点滅させたい文字や画像」に文章を置き換えます。
<span class="blink">この部分が点滅中！</span><style>@keyframes blinking {0% {opacity: 0; }100% {opacity: 1; }} .blink {animation: blinking 2s infinite alternate; } </style>
HTMLビューから作成ビューに切り替えて、文字の大きさ・太さ・色・配置などを変更することも可能です。
この状態のHTMLは以下のようになっています。（HTMLビューで直接変更してもOKです。）
<span class="blink" style="color: #fcff01; font-size: large;"><div style="text-align: center;"><b>文字大・太字・黄色・中央寄せ</b></div></span><style>@keyframes blinking {0% {opacity: 0; }100% {opacity: 1; }} .blink {animation: blinking 2s infinite alternate; } </style>
画像での使用方法
点滅用コードを貼り付け、「点滅させたい文字や画像」をドラッグします。
ドラッグした状態で、タイトル下のメニューアイコンの【画像を挿入】を選択します。
あとは普段記事を書く時と同様に画像を選択しましょう。
これで以下のように画像を点滅させることができます。
Bloggerでも簡単に点滅させられる！
一文をコピペするだけで簡単に文字や画像を点滅させられます。
点滅は多用すると見にくいですが、ここぞという時に使うと目立って良いアクセントになります。
是非試してみてくださいね！
