WEBブラウザでデジタルサイネージ用のテロップを作る 

WEBブラウザでデジタルサイネージ用のテロップを作る

 

以前の記事で、WEBブラウザとプラグインによる
「遠隔更新型のデジタルサイネージ」の制作方法をご紹介しました。
当記事ではデジタルサイネージ用のコンテンツとして、
文字の流れるテロップを作る方法を紹介します。
 
※当記事はGoogleChromeブラウザでの閲覧を推奨します。
 


1、HTMLタグ<marquee>を使う
 
もっとも単純な方法は<marquee>タグでメッセージを挟むことでしょう。
この方法はHTMLの構文だけで実装できますので、CSSの設定も不要です。
下記の例はGoogle Chromeでの表示を前提としています。
Chrome以外のブラウザでは確認できない場合がありますので、
後ほど紹介する動画でご確認ください。


表示例1:
つまり、こんな感じの文字テロップをWEBブラウザを使ったデジタルサイネージでは流せるわけです。勿論、ページ上では動画や静止画等のコンテンツと共存できます。
 
HTML構文1:
<marquee>つまり、こんな感じの文字テロップをWEBブラウザを使ったデジタルサイネージでは流せるわけです。勿論、ページ上では動画や静止画等のコンテンツと共存できます。</marquee>


表示例2:
つまり、こんな感じの文字テロップをWEBブラウザを使ったデジタルサイネージでは流せるわけです。勿論、ページ上では動画や静止画等のコンテンツと共存できます。
 
HTML構文2:
<marquee><font size="7">つまり、こんな感じの文字テロップをWEBブラウザを使ったデジタルサイネージでは流せるわけです。勿論、ページ上では動画や静止画等のコンテンツと共存できます。</font></marquee>


表示例3:
つまり、こんな感じの文字テロップをWEBブラウザを使ったデジタルサイネージでは流せるわけです。勿論、ページ上では動画や静止画等のコンテンツと共存できます。
 
HTML構文3:
<marquee><b><font size="7">つまり、こんな感じの文字テロップをWEBブラウザを使ったデジタルサイネージでは流せるわけです。勿論、ページ上では動画や静止画等のコンテンツと共存できます。</font></b></marquee>


表示例4:

つまり、こんな感じの文字テロップをWEBブラウザを使ったデジタルサイネージでは流せるわけです。勿論、ページ上では動画や静止画等のコンテンツと共存できます。
 
HTML構文4:
<marquee height="70pix" bgcolor="black" scrolldelay="1" scrollamount="10"><b><font color="white" size="7">つまり、こんな感じの文字テロップをWEBブラウザを使ったデジタルサイネージでは流せるわけです。勿論、ページ上では動画や静止画等のコンテンツと共存できます。</font></b></marquee>


表示例5:

つまり、こんな感じの文字テロップをWEBブラウザを使ったデジタルサイネージでは流せるわけです。勿論、ページ上では動画や静止画等のコンテンツと共存できます。
 
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>……書体を太字にする


2、CSSを使わずに特大文字をスクロールしたい!
 
これは、私(森内)がそうしたいのです。
このサイトは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>
 

 
<marquee>タグは、元々IE独自の機能でしたが、
現在は、主要なブラウザで表示がサポートされています。
とはいえ、古臭い技術ですから、通常のWEBサイトではほとんど需要がありません。
(普通に表示すれば済む話ですからね)
しかし、表示スペースの限定されたデジタルサイネージ用のWEBサイトでは
ニュースの告知手段として、なかなか使い勝手の良い技法だと思います。

デジタルサイネージ

 

素材配布

 

動画制作

  

YouTube活用

 

ソフト&ガジェット

 

コラム

 

 疑問に答えます