■タグでバナー・キャプチャー
★ 簡易バナーの作り方 ★
■ タグで作る ■
◆ 見本 NO1 ◆
ＫＩＮＡＫＯ
<table border="0" cellpadding="0" cellspacing="0" width="90px" height=90 background="http://アイコン画像ｱﾄﾞﾚｽ" style="border-style:solid;border-color:#336666;border-width:2px;background-repeat:no-repeat;background-position:center center;background-color:好きな背景色;"><TR><TD valign=bottom ><table border=0><TR><TD style=" font-weight:bold;font-size:14px;color:#000000;font-family:Comic Sans MS ;">ＫＩＮＡＫＯ</TD></TR></table></TD></TR></table>
★ 詳細 ★
* 赤表示は、文字位置です。
上にするなら、 VALIGN=TOP
真ん中にするなら、 ALIGN=CENTER
見本は、、 (VALIGN=bottom)＝下 です。
* 青表示は、文字関連です。
好きな、ｻｲｽﾞ・色・書式に変えてください。
font-weight:bold; とは、太字のタグです。
太字にしない時は、この部分を外して下さい。
* 作りたいバナーの大きさなどで、
テーブルの width height のｻｲｽﾞは、変更してくださいね。
..............................................................
◆ ただし、これだけでは、
background="http://アイコン画像ｱﾄﾞﾚｽ"
としているので、テーブルの背景画像となります。
バナーとして、相手の方に、持って帰っていただけません。
これを、色々、操作して、バナーとして作成します。
＊ 最終的に、バナーとして持ち帰って頂く為には、加工しますので、
使う画像が、ｱﾆﾒｰｼｮﾝ画像でも、
出来上がり画像は、ｱﾆﾒｰｼｮﾝにはなりません！！
＊ 見本のような ｱﾆﾒｰｼｮﾝバナーを・・・と言うなら、
表示した画像の横に、作ったタグを、持ち帰れる様に
書き出しておけばいいです。
................................................................................................
★ 表示例 ★
ＫＩＮＡＫＯ
<table border="0" cellpadding="0" cellspacing="0" width="90px" height="90px" background="http://アイコン画像ｱﾄﾞﾚｽ" style="border-style:solid;border-color:#336666;border-width:2px;background-repeat:no-repeat;background-position:center center;background-color:好きな背景色;"><TR><TD valign=bottom ><table border=0><TR><TD style="font-weight:bold;font-size:14px;color:#000000;font-family:Comic Sans MS;">ＫＩＮＡＫＯ</TD></TR></table></TD></TR></table>
＊ ←のバナーは、タグで作っています。
画像の、ﾀﾞｳﾝﾛｰﾄﾞはできません。
上記のタグを お持ち帰り下さいね♪
表示例のタグは、↓です。
＊ 自動改行なし（<BR>タグで指定）で、編集する時は、
文字は、<BR>タグで、調整してください。
<!--テーブル左始まり--><table border=0 WIDTH=400 style="font-size:10px;color:#000000;border-style:solid;border-color:#bebebe;border-width:1px;"><TR><TD WIDTH=100><table border="0" cellpadding="0" cellspacing="0" width="90px" height="90px" background="http://アイコン画像ｱﾄﾞﾚｽ" style="border-style:solid;border-color:#336666;border-width:2px;background-repeat:no-repeat;background-position:center center;background-color:#ffffff;"><TR><TD valign=bottom><table border=0><TR><TD style="font-weight:bold;font-size:14px;color:#000000;font-family:Comic Sans MS;">ＫＩＮＡＫＯ</TD></TR></table></TD></TR></table><!--テーブル左終了-->
</td><td>
<!--テーブル右タグ始まり--> <table border="0" cellpadding="0" cellspacing="0" width="90px" height="90px" background="http://アイコン画像ｱﾄﾞﾚｽ" style="border-style:solid;border-color:#336666;border-width:2px;background-repeat:no-repeat;background-position:center center;background-color:好きな背景色;"><TR><TD valign=bottom><table border=0><TR><TD style="font-weight:bold;font-size:14px;color:#000000;font-family:Comic Sans MS;">ＫＩＮＡＫＯ</TD></TR></table></TD></TR></table> <!--テーブル右タグ終了-->
＊ ←のバナーは、タグで作っています。
画像の、ﾀﾞｳﾝﾛｰﾄﾞはできません。
上記のタグを お持ち帰り下さいね♪
</TD></TR></table>
。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
注 タグで、持って帰ってもらう場合は、
タグ表示をしなければなりません。。
このまま、書き込むと、バナー画像が、2つ表示されます。
人に見せるタグを表示するには、赤表示している箇所を、
タグ抜きをしてください！！
<!--テーブル右タグ始まり--> <!--テーブル右タグ終了-->
の赤文字を、削除し、タグ抜きツールで出来た、特殊文字を
<!--テーブル右タグ始まり--> <!--テーブル右タグ終了-->
の間に書き込んでください！！
タグ抜きツール
................................................................................................
＊ バナー台を借りてきて、使う場合は、最上記のﾀｸﾞから
border-style:solid;border-color:#bebebe;border-width:1px;
を、抜いてください。
◆ 見本 NO2 ◆
ＫＩＮＡＫＯ
<table border="0" cellpadding="0" cellspacing="0" width="149px" height="48px" background="http://バナー台画像アドレス" style="background-repeat:no-repeat;background-position:center center;"><TR><TD align=right><table border=0><TR><TD style="font-weight:bold;font-size:20px;color:#e0e0e0;font-family:Comic Sans MS;"><i>ＫＩＮＡＫＯ</i></TD></TR></table></TD></TR></table>
* 見本は、文字を align=right にして、右寄せしてます。
文字を <i>・・・</i> にして、斜めにしています。
フォント数は、２０pxです。
色々、試してみてくださいね～～♪
........................................................
★ 見本NO1・見本NO2 共、
画像として使う時は、下で説明してる行程で、加工処理をしてください。
◆ ここからの説明は、ｱﾆﾒｰｼｮﾝにはなりません。
上の画像は、加工済で、出来上がった物です。
マウスの右をクリックしてみてください。
ちゃんと、＜画像を保存する＞事ができますよ～～♪
（１） フリーページ等に、最上部のタグを書き込みます。
書き込んだ、タグを見本（最上部）のように、画像として表示させておきます。
＜キャプチャーとして使う時、（２）～（７）の操作をします。＞
（２） PCのキーボードに＜Prnt Scm＞という、ｷｰがあります。
（キャプチャー機能）
これを、押してください。
（画像が、記憶されました）
（３） PCの、スタートボタンをクリックして、全てのﾌﾟﾛｸﾞﾗﾑをｸﾘｯｸ。
（４） ｱｸｾｻﾘｰ項目の＜ペイント＞を、クリックします。
（５） ＜ペイント＞ツールが出てきます。
ペイントツール内の、＜編集＞をｸﾘｯｸします。
→ ＜貼り付け＞をｸﾘｯｸすると、記憶した ページ画像全てが表示されます。
（６） ペイントツール内の＜ファイル＞をｸﾘｯｸ。。
（７） ペイントツール内の＜名前を付けて保存＞で、
PC内の画像ファイルに保存してください。
注 （このとき、必ず、gif もしくは、jpgで保存してくださいね）
.......................................................
◆ ここからは、この画像の加工です。
（１） 取り込んだ画像ファイルを開きます。
（２） 画像にカーソルを合わせ、マウスの右をクリック。
＜開く＞をクリックしてください。
（３） Microsoft Photo Editor を表示します。
（４） 点線の四角い印があります。
（５） マウスの左で、それをクリックしてください。
取り込む画像より、大きめに、マウスの左をクリックしながら
画像を、おおよそ囲ってください。
（６） 点滅点線で、切り取る画像選択が出来ました。
（７） マウスの右をクリックして、＜トリミング＞を押してください。
（８） このままでは、周囲に無駄な背景が残っています、
画像が小さいと、編集できないので、画像を大きくして、加工します。
（９） 虫眼鏡マークを、マウスの左でｸﾘｯｸ。
カーソルを、画像に当てて、マウスの左をクリックすると、
画像は大きくなります。
押す回数ごとに、画像は大きくなります。
（１０） ここで、再び、(4)～(7)の行程を行います。
（１１） ファイルをｸﾘｯｸ・・＜名前を付けて保存＞してください。
＊ 虫眼鏡で、画像を大きくしていても、
保存する画像は、元のサイズです。
虫眼鏡は、編集しやすいように大きくなるだけですよ～♪
後は、画像を、画像倉庫・・
もしくは、インフォ等の画像倉庫に保存して使います。
凄く、面倒に見えますが、この作業は、色んな事に使えます。
やりだすと、とても簡単です。
バナー以外にでも、色々試してみてくださいね～♪
■ ソフトを使って作る ■
ここでは、ソフトを配布しているｻｲﾄ紹介だけします。
ご自分で、色々試して見てくださいね。
私も、ここのｻｲﾄのものは、取り込んでいますが、
万一、不具合が出ても、保障は致しませんので、
説明をよく読んで、ダウンロードしてくださいね。。
■ バナー作成ツール(無料ﾀﾞｳﾝﾛｰﾄﾞ）
■ gifｱﾆﾒｰｼｮﾝ作成ツール（無料ﾀﾞｳﾝﾛｰﾄﾞ）
■ ｵｰﾄﾛｺﾞ・「ﾛｺﾞ&ﾊﾞﾅｰ無料自動作成」
。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
◆ 私が使ってる＜解凍ツール＞です ◆
■ 圧縮・解凍ツール（ﾄﾞﾗｯｸﾞﾄﾞﾛｯﾌﾟするだけ）
ジャンル別一覧
人気のクチコミテーマ
-
-
- 新製品発売情報・予約情報
- 喜怒哀楽ｂｙ増田貴久
- (2025-02-14 15:21:13)
-
-
-
- いいもの見つけたよ
- 10％Ｐﾊﾞｯｸ😀Canon キヤノン デジタ…
- (2025-11-13 18:03:48)
-
-
-
- パソコンニュース＆情報
- ブラウザChromeの新機能 "ページを音…
- (2025-11-03 10:02:13)
-
© Rakuten Group, Inc.
