こんにちは、シンプルライフ ナビです。
いろんなWEBサイトを見ていると、画面に動きがあるブログに出会うことがあります。
画像がスライドするサイトや、文字が流れて、動いて、横にスクロールしているいるサイトなどです。
自分のブログでも、流れる（動く）文字を取り入れてみたいと思いませんか？
横に動く文字で、お知らせや、新着情報の通知などに視線の注意を引くことができます。
実は「流れる（動く）文字の実装」は簡単にできるんです。早速ご紹介します。
ブログに流れる文字（横に動くテキスト文字）を実装
ブログの流れる文字がどんなものか、よくあるパターンを確認してみましょう。
流れる文字の表現例（動くテキスト文字）
それでは、流れる文字の表現例を確認していきます。
よくあるのは、画面右から左に向かって文字が流れて動くものです。ちょっとした注意を引くのに使えそうですよね。
＜動く文字の表示例＞
画面右から左に動く
画面左から右に動く
画面端に来たら折り返す
左から右にスクロールしたり、画面の端に来たら折り返すことも可能です。
表示のイメージはつかめましたね。では、ブログに取り入れる方法を解説します。
流れる文字のHTML
流れる文字の表現は、次のいずれかで実現することができます。
流れる文字をブログに実装する方法
- HTMLで表現
- HTMLとCSSを組み合わせて表現
いずれも、基本的なHTML、またはHTMLとCSSのコードの組み合わせで実装できます。
HTMLやCSSがよくわからない？大丈夫です。
この記事では、より簡単に、HTMLのコピペだけでブログに実装できる方法をご紹介します。
次のコードをブログの本文のHTML編集画面などへコピペして利用してください。
<p>
<marquee scrollamount="6" direction="left" bgcolor="transparent" style="font-size: 16px; color: steelblue;">【新着】流れる文字を解説！ 右から左にスクロール
</marquee>
</p>
それでは、HTMLコードの詳細を確認します。とは言っても、少し自分のブログに合わせて加工するだけなので安心してください。
流れる文字のスピードを変えたい
scrollamount="6"の6の数字部分を変えてください。1に近いとゆっくり、数値が大きくなるほど早くなります。
流れる文字の向きを変えたい
direction="left"の"left"を、右から左のときは"left"、左から右のときは"right"に置き換えればOKです。
背景色を変えたい
bgcolor="transparent"の"transparent"を、透明ならそのまま、黒なら"black"または"#000000"にしてください。
色コードはWEB色見本 原色大辞典 で確認できます。
フォントサイズと、文字色を変えたい
style="font-size: 16px; color: steelblue;"のうち、フォントサイズの変更は16pxの部分の数字を変更、文字色は"steelblue"の部分をWEB色見本 原色大辞典 を参照して、色名または色コード（red や #ff0000）に変更してください。
はてなブログに「動く文字」を設定する方法
はてなブログの本文に、上記の流れる文字を表示させたい場合は、次の手順でコードを記載してください。
ダッシュボード画面 → 記事を書く→ HTML編集、そして HTMLコードを追加してください。
その際、既存のコードを消さないように注意して、表示したい場所に挿入してください。
なお、置き場所は記事本文以外でもHTML編集できる場所ならOKです。
例えば、次の場所にも「流れる（動く）文字」を設置することができます。
- ヘッダ
- サイドバー
- フッタ
- 記事上
- 記事下
- 記事本文末尾
好みの場所に設置してみましょう。
はてなブログ以外の人も、HTML編集画面に追記すればOKです。
まとめ｜ブログに「動くテキスト文字」を設置してみよう
ブログに「流れる（動く）文字」を、簡単に設置する方法をご紹介しました。
なお、現在は記事中でもご紹介したHTMLとCSSを組み合わせた表記の方がスタンダードになっています。
この記事では、個人ブログで手軽に導入でき、すぐに内容変更も可能なので、より簡単なHTMLのみで表現する方法をご紹介しました。
最後にもう一度カスタマイズ例を表示します。
最初のものとは、緑色の部分が変わっています。
<p>
<marquee scrollamount="7" direction="right" bgcolor="#fffacd" style="font-size: 15px; color: #ff0000;">流れる文字を表示できましたか？
</marquee>
</p>
流れる文字は、文字の表示スピードが早いと読みづらいので、じっくり読んでもらう内容を表示するのには向いていません。
ですが、少し注目してもらいたい内容があるときや、新着情報のお知らせなどに使えます。お試しください！！
