WEBブラウザでデジタルサイネージ用のテロップを作る
以前の記事で、WEBブラウザとプラグインによる
「遠隔更新型のデジタルサイネージ」の制作方法をご紹介しました。
当記事ではデジタルサイネージ用のコンテンツとして、
文字の流れるテロップを作る方法を紹介します。
※当記事はGoogleChromeブラウザでの閲覧を推奨します。
1、HTMLタグ<marquee>を使う
もっとも単純な方法は<marquee>タグでメッセージを挟むことでしょう。
この方法はHTMLの構文だけで実装できますので、CSSの設定も不要です。
下記の例はGoogle Chromeでの表示を前提としています。
Chrome以外のブラウザでは確認できない場合がありますので、
後ほど紹介する動画でご確認ください。
表示例1:
HTML構文1:
<marquee>つまり、こんな感じの文字テロップをWEBブラウザを使ったデジタルサイネージでは流せるわけです。勿論、ページ上では動画や静止画等のコンテンツと共存できます。</marquee>
表示例2:
HTML構文2:
<marquee><font size="7">つまり、こんな感じの文字テロップをWEBブラウザを使ったデジタルサイネージでは流せるわけです。勿論、ページ上では動画や静止画等のコンテンツと共存できます。</font></marquee>
表示例3:
HTML構文3:
<marquee><b><font size="7">つまり、こんな感じの文字テロップをWEBブラウザを使ったデジタルサイネージでは流せるわけです。勿論、ページ上では動画や静止画等のコンテンツと共存できます。</font></b></marquee>
表示例4:
HTML構文4:
<marquee height="70pix" bgcolor="black" scrolldelay="1" scrollamount="10"><b><font color="white" size="7">つまり、こんな感じの文字テロップをWEBブラウザを使ったデジタルサイネージでは流せるわけです。勿論、ページ上では動画や静止画等のコンテンツと共存できます。</font></b></marquee>
表示例5:
HTML構文5:
<marquee height="70pix" bgcolor="navy" scrolldelay="1" scrollamount="7"><b><font color="white" size="7">つまり、こんな感じの文字テロップをWEBブラウザを使ったデジタルサイネージでは流せるわけです。勿論、ページ上では動画や静止画等のコンテンツと共存できます。</font></b></marquee>
上記のタグで日本語の部分のみを書き換えて、
デジタルサイネージ用のWEBサイトに貼り付けます。
タグの設定にはいくつかの値がありますが、
デジタルサイネージ用途でしたら、下記の調整でよいでしょう。
タグの<>内で半角を空けて設置していきます。
<marquee>タグの主な属性
height="70pix"……表示範囲の高さ 入力無しなら自動調整
※Widthという属性で表示幅も設定できますが、これを設定すると文章が見切れる場合がありますので、当記事では使いません。
bgcolor="black"……バックグラウンドの色指定
【主なカラーコード】
青……#0000FF もしくは blue と入力
深い青……#000080 もしくは navy と入力
緑……#008000 もしくは green と入力
赤……#FF0000 もしくは red と入力
深紅……#DC143C もしくは crimson と入力
黄……#FFFF00 もしくは yellow と入力
黒……#000000 もしくは black と入力
scrolldelay="1"……85が初期値 再描画の間隔 数字が小さいほど動きが細かい
scrollamount="7"……初期値は6 数字が大きいほど早く動く
その他のタグと属性
<font color="white" size="7">……書体を白色、サイズ最大(7が最大)
※7以上のサイズはCSSで指定する必要があります。
<b>……書体を太字にする
これは、私(森内)がそうしたいのです。
このサイトはBindというソフトで構築されていますが、
仕様がガチガチに固められていて、CSSの変更が難しい。
なので、できることならHTML構文だけで片を付けたいところです。
<marquee>タグは画像にも適用できます。ですから……
<marquee scrolldelay="1" scrollamount="8">画像URL</marquee>
このように文字画像をテロップ代わりにできます。
上記の画像はPNGですが、より軽いGIF形式の画像でもよいでしょう。
画像の背景は 透過色に指定するのがポイントです。
画像URLの指定タグ
↑の赤文字の部分が画像指定のタグです。
画像URLはサーバーにアップしている画像のアドレスです。
例) http://www.digitalsignage-kure.jp/img/pg219-01.png
背景に色を入れる
背景に色を載せる場合は bgcolor をタグ内に指定して画像を配置します。
文字画像は背景を透過色にしておきましょう。
<marquee scrolldelay="1" scrollamount="8" bgcolor="yellow">
<marquee>タグは、元々IE独自の機能でしたが、
現在は、主要なブラウザで表示がサポートされています。
とはいえ、古臭い技術ですから、通常のWEBサイトではほとんど需要がありません。
(普通に表示すれば済む話ですからね)
しかし、表示スペースの限定されたデジタルサイネージ用のWEBサイトでは
ニュースの告知手段として、なかなか使い勝手の良い技法だと思います。
デジタルサイネージ
素材配布
動画制作
YouTube活用