バナーとはそもそも、旗とか横断幕という意味ですが、転じて新聞の大見出し、プログラムソースの見出し(昔は良く banner コマンドを使ったもんだ ^^;)等の意で使われてきました。最近はバナーというとすぐに、バナー広告やリンクバナーを連想してしまいますね。
その辺から、このページは [ Train Banners ] と名付けていますが、もちろんバナーでなくラインとしてもアイコンとしても、また釦として使って頂いてもいっこうに構わないと思う作者なのです。
■■■バナー配置のポイント バナーをどの様に使うかは基本的に各人の自由ですが、ちょっと気を付けて頂くとさらに効果的な使い方が出来ます。ここでは、そのポイントをいくつかあげてみましょう。
|
- 貼りすぎにご用心
ページを見てくれる人の立場にたって考えましょう。多くの閲覧者は、あなたほど恵まれた環境にないかも知れません。何分もかかってやっと表示されたページが、自分にとっては何の興味もない電車のアイコンで埋め尽くされていたとしたら、きっと興ざめだと思います。何事も程々に。。。欲張らずにワンポイント的に使った方が目立つし、効果的でしょう。
- アニメーションGIFに注意
特にアニメーションGIFはファイルが重いので要注意です。インラインで貼り付けるのであれば、せいぜいページに一本までです。リンクで入れるのであればまだ、読者に「見る」「見ない」の選択の自由を与える事が出来ます。
- 場所をわきまえて
読み物のページであれば、多くの場合アニメーションGIFは邪魔者になります。特に無限ループで動いてるヤツ。普通の人だったら、チラチラとして目障りだと感じるはずです。
- 編成長に注意
Train Banners の作品の多くは車両をユニット単位で分けており、自分で好みの編成が組める様に考慮されています。ページに納めるためには適当に編成を切り詰めると良いと思いますが、実車と違わないフル編成を目指す方はブラウザ表示幅による折り返しに注意して下さい。(もちろん、折り返した方が良い場合もありますが。)
普通に並べると 



ブラウザの幅が狭い時に折り返されてしまいます。
<NOBR>を使うと 



- WIDTH, HEIGHT, ALT属性を入れましょう
バナーに限らずイメージ一般に言える事ですが、IMGタグに WIDTH, HEIGHT属性が無いと、イメージを読み込むまではブラウザ側でレイアウトを予測する事が出来ないため、テキストの方も表示されません。これらの属性を入れておけば、イメージをロードしている間にも、読者はテキストの方を読んでおく事が出来ます。また、イメージの自動ロードをオフにしているユーザーにとっては、ALT属性は非常に助かるものです。
■■■バナーの楽しみ方いろいろ バナーの楽しみ方も、千差万別です。普通にバナーやラインとして使用するのがもちろん最適かと思いますが、ちょっと変わった楽しみ方もあります。
|
- 大きさを変える
元のイメージはいじらずに、WIDTH、HEIGHT属性で変えてやります。編成を見せたい場合は、小さくするのも一つの手ですね。
小さくしたり 
大きくしたり
- 異色の組み合わせ
実際には有り得ない組み合わせなんかも、Web上ではちょちょいと出来ちゃうんです。






- 動かす
MARQUEE 等を使う手もありますが、Netscapeだと動かないのが欠点ですね。Java script なら おぱく堂さんとこの電車走行キット。ありがたい事に Train Banners 対応版 もあるんです。またアニメションGIF自体で動かす場合、ページの下の方にあるとロード中に動きが終ってしまうケースもあるわけでして、そういう時はこんな工夫も出来ます(カーソルを重ねるとアニメーション開始)。 これも Java Script。
- バックグラウンドを使う
テーブルを使って絵画調にすると、雰囲気の盛り上がる場合*も*あります。
おぉ、黄昏の日本海。。。 |
  |
深夜のオイルターミナル。。。 |
  |
- たくさん並べる
並べるのも程々に... という話しと矛盾しますが、唯一あまり重くならないのは同じイメージの繰り返し。使い方如何では非常にインパクトのあるページになります。(そうかなぁ〜)









山手電車区!
というわけで、用法用量を守って正しくお使い下さい。なお、製品には万全を期しておりますが、もしも不良品等ありましたら、お知らせ頂けると幸に存じます。
Banner Home