▼GHP講座G3　−　バナーを作ろう！

◎ 画像の有効的な使い方、見栄えを良くする小技テクニックを紹介！
◎ 素材なんて配布しているところから貰ってきたら良いかも･･･(汗)

★使用するソフトは持っている？

　取り上げているソフトに関しては「リンク」をご参照下さい。
　　→「Photoshop(Element)」
　　→「Pixia_v252j」
　　→「BTJ32_v5.4.1」
　　→「Padie_v3.5」
　　→「Animation Gif Maker」(次回)

★ホームページバナーを作ろう！

　まずバナーとは何でしょう？数々のホームページを回っている方は分かると思います。 バナーとは「他の人のホームページにリンクする時に使う画像(※実際には違います)」です。 良く言えば「ホームページのロゴ」のような存在です。 なので、パッと見て「あのサイトだ！」「こんな内容のサイトだ！」と分かるような画像が相応しいわけです。 バナー画像にサイト名書けばサイトの名前が分かります。 また、サイト内容を書けばサイトの内容が分かります。
　
　　サンプルバナー(1,339Byte)
　上記サンプルは当サイトのバナーです。 絶対に内容が分からないだろうサイト名「WALL SHOP JAPAN 21」を全面に押しだし、 副題で「グッドホームページを創ろう」というサイト内容を示しています。 右側のキャラクターは謎です。キャラクターがあった方が文字よりも目立つという後付の理由からです。
　このようにバナーを見るだけで「何をしているサイトなのか！？」が分かると非常に良いです。 リンクを張って下さる方がサイト説明も書いて下されば良いのですが、望めません。 他にもバナーを表示しないリンク方法(テキストリンク)もありますのでバナーが絶対に必要と言うこともありません。 バナーを表示しないだけで、データ転送量が激減しますので経済的なんですよね。 上記のような理由から「サイト名」だけでサイト内容が分かる名前を付けるのが相応しいと言うことになります。 これから作る人はサイト名やバナーの構図を深く考え、 既にサイトを持っている方はリニューアルするなりしてサイト名やバナーを変更してみましょう。

★ホームページバナーの制約

　バナー画像には縦横サイズが決められています。 日本で使われている主なバナーサイズは日本標準の「200x40」と世界標準の「88x31」の２種類あります。 一般的な個人サイトだと「200x40」が主流で、解説系や素材系さいとでは「88x31」が主に使われています。 しかし両方あるに越したことはありませんので余裕がある方は両サイズ作ってみては如何でしょうか？ 他にもリンクして下さる方が選べるように数種類のバナーを作ることもオススメ致します。
　その他、バナー画像のファイルサイズを極力小さくする必要があります。 ファイルサイズが小さければそれだけ表示に要する時間が短縮されます。 因みに私的調査では「200x40では8KB前後」「88x31では2KB前後」が多いようです。

★ホームページバナーを決める→作る→保存する

　では、実際にバナーを作っていきましょう。
　まず、縦横サイズを決めます。 「横200、縦40」または「横88、縦31」にしましょう。
　次に、バナーを描いていきます。 「リンクをハシゴ」することでみんながどのようなバナーを作っているのかを知ることができます。 どのようなバナーか迷ったなら色々なサイトのリンクを辿って行って見ましょう♪ そして、バナーイメージをパクルのだー！
　最後に、バナーイメージを描けたらファイルに保存します。 保存する際の注意事は「適した形式で保存する」ことです。 まずは、元画像を残すために使用したソフトの形式で保存します。 それからウェブに適切な画像形式に変換します。 使用ソフトで直接変換するのが良い場合と、違うソフトを通して間接的に変換するのが良い場合があります。 それは使用したソフトによりますが、今回は違うソフトを通して変換する方法を説明します。
　まず、BMPで保存します。これでほぼ全てのソフトで扱うことができます。 そして前回の講座で使用した「BTJ32」「Padie」などのソフトを使います。 「JPGはBTJ32」で「PNG、GIFはPadie」で変換するんでしたよね。 これで完成です。バンザーイ♪

★ホームページバナーを表示する

　画像の表示方法を覚えていますか？ 覚えていないなら残念です。見ていないなら見て下さい。 そんなのは置いといて、
　<img alt='代替文章' width='横サイズ' height='縦サイズ' src='画像パス' />
でしたよね。代替文章は画像が表示されなかった場合、表示が遅滞した場合に表示されるテキスト文章です。 横サイズと縦サイズは作成したバナーサイズを入れて下さい。 今回は「200x40」か「88x31」ですね。 最後に画像パスですが、画像までのＵＲＬを入れて下さい。 例えば私の所だったらバナー画像のファイル名は「bn4a.png」で「link」フォルダに入れているので、 「link/bn4a.png」ですが、サーバーのＵＲＬ「http://www8.ocn.ne.jp/~wallshop/wsj/」を付加させて、 「http://www8.ocn.ne.jp/~wallshop/wsj21net/wsj21net200a.png」になります。 これをブラウザに入力して表示されればあってますよ。

★ホームページバナー使用時の注意事

　使用しているサーバによってまちまちですが、 バナーへの直接リンクを禁止しているところがあります。 その場合にはお持ち帰りを強制し、リンクを張って下さるサイトに画像を置いてもらいましょう。 画像を自分のHDDに保存して自分のサーバにアップロードするという作業が必要になってきます。 それは残念です。このことについては要望次第で詳しく説明します。

★次回予告

　私の嫌いなアニメーションバナー(笑)