| ご利用方法 |
|
■ご利用時の注意 「無料バナー作成ツール」の動作は、最新版のFirefox、Internet Explorer、Netscapeで確認済みですが、ご利用のブラウザ及びOSの環境によっては、正しく動作しない可能性もあります。予めご了承下さい。 また、作成したバナーをWebサイトやブログ上で実際に表示する際にも、ブラウザ環境などによって、表示サイズ等が異なる場合があります。 上記ツール及び、作成したバナーの利用は、各自の自己責任によって行って下さい。 ■「無料バナー作成ツール」の利用の仕方 作成したいバナーに合わせて、各項目を設定し、「バナー表示例とコードの取得」ボタンをクリックすると、作成したバナーのサンプル及び、コードが表示されます。 サンプルを見て、問題がなければ、表示されたコードを、Webサイトやブログ等のソースコード内、バナーを表示したい位置へ貼り付けて下さい。 修正が必要な場合は、変更したい項目の設定を変更後、再度、「バナー表示例とコードの取得」ボタンをクリックして下さい。希望に合うバナーが出来るまで、この作業を繰り返して下さい。 ■各設定項目の解説 1. 配色(枠、背景色、テキストの色） 枠、背景、テキストの色を、Web用の色コード(6桁)を使用して設定します。色合いを確認する為には、右側に表示されているサンプルを参照して下さい。 １）チャートから選ぶ(１番簡単！) 色コードの入力ボックスをクリックすると、下に、216色のWebカラーチャートが表示されます。お好きな色をクリックすると、自動的に入力ボックスにその色のコードが入力されます。 ２）より広範囲なカラーチャートから選ぶ 140色の色名によるカラー一覧など、Web上で公開されている他のカラーチャートから選んだ6桁の色コードを、ご自身で入力して下さい。 ３）自分自身で色を考える ６桁の色コードは、Ｒ(レッド)Ｇ(グリーン)Ｂ(ブルー)の３色の度合いを16進数で指定したものです。(最小値は0[16進数で00]、最大値は255[16進数でFF]) 例えば、赤色は、Ｒを最大値に、ＧとＢを最小値にしたFF0000です。 緑色は、Ｇを最大値に、ＲとＢを最小値にした00FF00です。 青色は、Ｂを最大値に、ＲとＧを最小値にした0000FFです。 黒色は、全てを最小値にした000000です。 白色は、全てを最大値にしたFFFFFFです。 黄色は、ＲとＧを最大値にしたFFFF00になります。 興味のある方は、このページの1番下にGoogleの検索ボックスがあるので、より詳しく調べてみて下さい。 2. バナーの枠内に表示されるテキストとクリックした際にジャンプするリンク先ＵＲＬ(Webアドレス)を指定 枠(バナー)内に表示されるテキスト(文字列) バナー内に表示したい文字を設定します。途中で改行した場合は、そのままバナー内でもその改行が反映されます。 ★文字列装飾のヒント! ☆太字にしたい部分は、<b></b>で囲んで下さい。 例えば、「無料バナー」という文字列の無料の部分を太字にしたい場合、 「<b>無料</b>バナー」と入力すると、「無料バナー」と表示されます。 ☆斜字にしたい部分は、<i></i>で囲んで下さい。 例えば、「無料バナー」という文字列の無料の部分を斜字にしたい場合、 「<i>無料</i>バナー」と入力すると、「無料バナー」と表示されます。 ☆下線を引きたい部分は、<u></u>で囲んで下さい。 例えば、「無料バナー」という文字列の無料の部分に下線を引きたい場合、 「<u>無料</u>バナー」と入力すると、「無料バナー」と表示されます。 バナーをクリックした際に表示されるＷｅｂページのＵＲＬ(Ｗｅｂアドレス) リンク先が同一サイト(ドメイン)内で無い場合は、必ずURL(Webアドレス)をhttp://から始めて下さい。 3. その他の項目の設定 選択肢の中から設定を選ぶ項目については、ご希望の設定のラジオボタンをクリックして選択して下さい。 数値を入力する必要がある項目については、必ず英数半角で、数字を入力して下さい。 設定しなかった項目については、「バナー表示例とコードの取得」ボタンをクリックすると、規定値が自動的に選択されます。 設定した各項目が、どのようにバナーに反映されるかは、「バナー表示例とコードの取得」ボタンをクリックして、実際に表示例を見て確かめて下さい。 一度作成すれば、すぐにコツが掴めると思います。 ■作成したバナー表示用コードの解説 <div>タグ内で、CSS(スタイルシート)を使ってバナーの表示内容を指定しています。この「無料バナー作成ツール」内で指定した各スタイルシートの要素は下記の通りです。 width バナーの横(幅) height バナーの縦(高さ) text-align バナー内テキストの左(left)、中央(center)、右(right)寄せ指定 font-size バナー内テキストのフォントサイズ line-height バナー内テキストの行間 color バナー内テキストの色 background バナーの背景色 border バナー枠の種類、太さ、色指定 padding バナー枠内の余白(テキスト周囲の余白) margin バナー枠外の余白(テキストを回り込ませた場合の周辺テキストとの間隔) 「バナー内のどこをクリックしても、リンク先へジャンプ」を選択した場合には、<div>のタグ内に、javascriptを利用して、クリックした際にリンク先へ飛ぶように指定しています。( onclick="location.href='http://...{リンク先アドレス}...';" ） CSS(スタイルシート)を使って、もっともっと細かい設定をすることも可能です。興味がある方は、出来上がったコードをご自身でどんどん改良して、シンプルだけれど、インパクトのある独自バナーを作成してみて下さい。 サーチエンジンで検索してみると、CSS(スタイルシート)について解説したサイトがたくさん見つかりますので、そういったサイトの解説を参考に、是非、チャレンジしてみて下さい。 ■このページへのリンクについて このページへのリンクは自由に行って下さって結構です。 宜しければ、下記、リンクコードをご利用下さい。 |