新しいオークションテンプレートを追加しました。

今回からテンプレート館のほうに更新履歴を載せることにしましたので、RSSを取られるかたはどうぞ。

カテゴリー：アラカルトに不思議の国のアリスに登場するラッパを吹いているウサギのテンプレートを色違いで３つUPしました。 不思議の国のアリスって可愛いですよね。

http://auctiontemplate.30cafe.net/aaa01/index.shtml

カテゴリー：フラワー＆グリーンに可愛い小花カラーのテンプレートを色違いで３つUPしました。

http://auctiontemplate.30cafe.net/flw01/index.shtml

カテゴリー：クローゼットの中に春のお出かけのシンプルなテンプレートを追加しました。 小花のバージョン違いです。

http://auctiontemplate.30cafe.net/closet01/hanacloth.shtml

今回は少しテーブルの構成を変えたものを混ぜています。

気に入ったものがありましたらお使いくださ～い。

ヤフーオークションなどのオークション説明ページには、
コンピューター言語のひとつであるHTMLを使うことができます。

当サイトで配布しているオークションテンプレートも、このHTMLを利用して作成しています。

では、当サイトのテンプレートを例にオークションで使えるHTMLの説明をしていきます。
テンプレートをカスタマイズして、より自分の用途に合わせて商品説明ページが作れるように
HTML講座を始めます。

テンプレートカスタマイズに使用するHTMLは、ごく基本的なものばかりですので、
一度覚えてしまえば、他サイトさん配布のテンプレートにも、
またホームページやブログ作成などにも応用できます。

オークションテンプレートはテーブルを利用しています。

まず、頭に入れておいていただきたいのは、
テンプレートはテーブルを使用して作成してある　ということです。

テーブルとは、枠組みを規定するのに便利な機能で、主に表などを作る場合に多様されます。
こんなの↓

<TABLE>というのが、表をつくるときのタグです。
イメージとしては・・

<TABLE>　→テーブル始まり。
あいう
えおか
きくけ
</TABLE> →テーブル終わり。

このような感じです。
「あいうえおかきくけ」　が、実際に表示される文字ということになります。

当サイトでは、
このテーブルをいくつか入れ子にして、オークションテンプレートを作成しています。
テーブルの外枠の大きさがテンプレートの大きさということになります。

ベースのテーブルの設定は、たいていタグの最初のほうに出てきます。
＜TABLE　width　～など。
これがテーブル設定のHTMLタグ　となります。
テンプレートカスタマイズでは、このテーブルの中にある、半角英数文字＝タグ　をひとつひとつの書き換えることによって可能になります。

カスタマイズはメモ帳が便利

オークションテンプレートの書き換えは、もちろん配布ページ上でもできますし、
オークションの商品説明ページに貼り付けてからでもできます。

じっくりカスタマイズをして、自分専用のテンプレートにしてからオークションページにUPしたいかたは、
ウィンドウズに内臓されているメモ帳などのテキストエディターを利用するのが便利です。

メモ帳などテキスト用ソフトがお持ちでないかたは、
フリーソフトとしてもいくつかの優秀なテキストエディターが配布されていますので
利用すると良いと思います。

ただ、メモ帳を持っているかたは、メモ帳で充分です。
初心者のかたは、多機能なエディターを開いていると、かえって時間がかかるので・・・
ここでは作動も軽い、ウィンドウズのメモ帳を利用して説明していきますね。

参考：デスクトップにマイテンプレートをつくろう！

当サイト配布のテンプレートの使用は今までどおり可能となっております。
一部テンプレートにて作動を確認しております。随時、確認予定です。

さて、
その使用方法も今までと変わらず、コピー＆貼り付けでご使用いただけますが、
出品画面の商品説明入力欄で通常入力」を「HTMLタグ入力」へ変えて貼り付けてください。

 あとは今までと同じように編集できます。

まず一番最初にギモンに思うことらしく、探しているかたが多いので、
説明文で改行する方法をこちらにも書いておきます。

 改行をするタグ

<bｒ>　
半角英数で　　＜ｂｒ＞かっこビーアール　を文章の改行したい部分に入れます。

<bｒ>はパソコンでいうEnterキーと同じです。 

あいうえお
かきくけこ
さしすせ
そ

とヤフオクの出品画面でEnterキーを使いながら書いても、

あいうえおかきくけこさしすせそ

とつらつらと続けて文章が表示されます。
Enterキーは反映されません。
そこで、Enterキーの代わりに、半角で＜ｂｒ＞と打ち込んでやると… 

あいうえお＜bｒ＞
かきくけこ＜ｂｒ＞
さしすせ＜ｂｒ＞
そ。　　　　　　　　　　　　　　　　　　をブラウザで表示すると 

あいうえお
かきくけこ 
さしすせ
そ 。

となります。

＜ｂｒ＞タグは囲みタグではありませんので、</>で閉める必要はありません。

手軽に文字サイズの変更をする囲みタグ編です。
一文字だけ太くしたい！　とか
一列だけ太くしたい！　
全部太くしたい！　でも使えます。

 テンプレートの文字を太くする囲みタグ

<b>　
半角英数であれば大文字でも小文字でも可。
変更したい文字を<b></b> で囲みます。 

<b>はひとまわり文字を太くするタグです。 

＜b＞あいうえお＜/b＞　をブラウザで表示すると 

あいうえお 

となります。

とても簡単に入力できるHTMLタグです。
HTMLタグは必ず</>で閉めることを忘れないでください。

太文字にする<b>タグは他のタグとも合わせて使用できます。
<FONT>タグの中に書かれている文字の前後にくっつければ、囲んだ部分だけ文字が太くなります。
<FONT>タグの属性が変更されることはありません。

＜FONT color="#ff00ff"＞これからフォントを太くします。＜b＞ここから文字が太くなりました。＜/b＞もとに戻します。＜/FONT＞

↓
これからフォントを太くします。ここから文字が太くなりました。もとに戻します。

テンプレートに書かれている文字の色を変更する方法です。
一番、みなさんが使用される確立の高いカスタマイズなのではないでしょうか？

文字の色を変更すると、雰囲気も変わりますので、好きな文字色に変更してみましょう。 

 テンプレートの文字色を決定するタグ

<FONT　color=>　
半角英数であれば大文字でも小文字でも可。
color=　の後に色名または色番号を指定。
 
色番号指定を推奨。色名指定はオークションの場合、表示されない色があります。 

FONT　というグループの中で　でcolor=　の後に、表示したい色番号を指定します。
色番号とは　#000000　のように#と６桁の英数字で表します。
HTMLの色番号表などがインターネット上でも公開されているので、参考にすると良いでしょう。

当サイト配布のテンプレートの文字色変更

テンプレートの中の文字の大きさを変更する場合は、
変更したい文字の直前に書かれている
<FONT>タグの中の　color=”#英数字”　の部分の英数字を変更します。
（”　”マーク　はあってもなくてもOK）
<>で囲まれた　FONT　に続く文字のどこかに　color　の文字があると思いますので、
探してください。

例えば、「お支払い」という文字の色を変えたい場合は、
<FONT　color=”#000000”　size＝”2”>お支払い</font>　などと書かれている箇所を見つけます。
そして、color=”#000000”　の部分を　color=”#ff0000”　などに書き換えます。

ちなみに#000000は黒です。
#ff0000は赤色。 

当サイトのテンプレートの多くは、文字かたまりごとに細かくFONT指定のHTMLタグが入っていますので、
テンプレート全体にわたって、共通の文字色を別の文字色にしたい場合、
(例えば、茶色で統一された「商品について」などの項目部分をすべて赤にしたいなど)
一括編集を使用して変えると早いです。

その場合は検索する文字列に#000000など#から始まる色番号のみを挿入してください。
ひとつのテンプレートの中で、色指定部分に　"　"　があったりなかったりするので・・・。

この<FONT>タグは文中のどこでも好きなところに挿入可能ですので、
変えたい文字の前後に半角英数の手打ちでくっつけると文字色やサイズ変更ができます。

例えば、　フォントタグで<FONT color="#ff00ff">ココ変える</FONT>よ！　　で
フォントタグでココ変えるよ！
とできます 

すばらしい色番号表を公開されていらっしゃるお気に入りサイトさんです。
当サイトも「使いすぎ！」というくらいよく利用させていただいています。感謝。
とてもお役立ちなので、参考になさってみてください。

●色の名前とHTMLタグが一目でわかるWEB色見本

手軽に文字サイズの変更をする方法です。
一文字だけ大きくしたい！　とか
一列だけ大きくしたい！　などと言う場合、<FONT>タグを探して書き換えるのは面倒です。

そんなときにぱぱっと手軽に文字サイズを変更する方法。

 テンプレートの文字サイズを変更する囲みタグ

<big>　<small>
半角英数であれば大文字でも小文字でも可。
変更したい文字を<big></big> または　<small></small>で囲みます。 

<big>はひとまわり大きく、<small>はひとまわり小さくなります。 

＜big＞あいうえお＜/big＞　をブラウザで表示すると

あいうえお 

となります。

とても簡単に入力できるHTMLです。
HTMLタグは必ず</>で閉めることを忘れないでください。

＜big＞お＜/big＞支払い　などとすると・・・

おしはらい

となります。

文字色や文字を太くする囲みタグである<b>タグなどを組み合わせて
デザインすることができます。

おしはらい　　　メッセージです！

テンプレートに書かれている文字の大きさを変更する方法です。
ここでいう「文字」とは、みなさんが実際にテンプレート内に書き込む文字のことです。
画像化されている文字の大きさの変更はできません。

 テンプレートの文字サイズを決定するタグ

<FONT　size=>　
半角英数であれば大文字でも小文字でも可。
size="2"　または　size=2　と指定する。

SIZE=の後にくる数字が大きければ文字が大きく、小さければ小さくなります。 

FONT　というグループの中で　size=で文字の大きさ　color=で文字色の指定などをします。
当サイト配布のテンプレートの規定値は　2　になっています。

当サイト配布のテンプレートの文字サイズ変更

テンプレートの中の文字の大きさを変更する場合は、
変更したい文字の直前に書かれている
<FONT>タグの中の　size=”数字”　の部分の数字の大きさを変更します。
（”　”マーク　はあってもなくてもOK）
<>で囲まれた　FONT　に続く文字のどこかに　size　の文字があると思いますので、
探してください。

例えば、「お支払い」という文字のサイズをひとまわり大きくしたい場合は、
<FONT　color=”#000000”　size＝”2”>お支払い</font>　と書かれている箇所を見つけます。
そして、size＝”2”　の部分を　size＝”3”　に書き換えます。

テンプレート全体にわたって、すべての文字をひとまわり大きくしたいときは、
一括編集を使用して、size=”2”　または　size=2　を　size=”3”　size=3などに置き換えます。
ひとつひとつ変更していってもOKです。

一括編集で置き換えるとき

当サイトの文字サイズ指定は、テンプレートによって　”　”　マークがあったりなかったりするので、
(その時々で適当に入れているため、、、スミマセン)
そのテンプレートでは　””あり　か””なしか、どちらが使用されているかを確認してから、使用されているほうを入れてください。

ちなみに　2　など、数字だけを検索する文字列に指定すると、他の部分(例えば、色番号の中の数字)まで
置き換わってしまいますので、注意してください。

テンプレートの横幅を変更する方法です。
カスタマイズで変更できるのは、文字部分の横幅の拡大縮小のみになります。
画像の大きさの変更はできません。

 テンプレートの横幅を決定するタグ

<TABLE width=>　半角英数であれば大文字でも小文字でも可

数字が大きければ大きく、小さければ小さくなります。 

テンプレートはテーブルの集まりで構成されていますので、
テンプレートの大きさを決定するのはテーブルの大きさということになります。

当サイト配布のテンプレート、また他サイトさんで配布されている多くのオークションテンプレートは、
一番最初の<TABLE>タグでテンプレートのアウトライン（外枠）の大きさを指定しています。

当サイト配布のテンプレートの横幅変更

テンプレートの大きさを変更する場合は、
一番最初に出てくる<TABLE＞タグの中の　width=”数字”　の部分の数字の大きさを変更します。
（”　”マーク　はあってもなくてもOK）
<>で囲まれた　TABLE　に続く文字のどこかに　ｗidth　の文字があると思いますので、
探してください。

例えば、<TABLE　cellspacing＝”1”　width＝”５５０”　border=”0”>　と書かれていたら、
width=”550”　の部分を　width=”600”　や　　width=400　などに書き換えます。

 

%＝相対設定

上記で説明した　width＝”500”　などの場合、この５００という数字は絶対的な大きさとなり、
インタネットブラウザーを拡大したり縮小したりしても変わらず、常に５００の大きさで表示されます。

５００よりも小さな画面にした場合はスクロールバーが表示されます。

これに対して、
width＝”100%”　などと　%（パーセンテージ）で設定する場合もあります。

%設定の場合、

●そのwidthがテンプレートの外枠を決定するための<TABLE>タグで使用されているときは、
表示画面、つまりあなたの使用しているブラウザに対してナン%の大きさに設定するか　という意味です。

%設定は相対的な大きさとなります。　開いている画面によって大きさが変わります。
１００％は画面いっぱいいっぱい。　５０％は画面の半分の大きさに自動調整されます。

●入れ子になっているTABLEタグの中でwidth＝”90％”などと使用されている場合は、
外側のTABLEのwidthに対して、ナン%で表示するか　という意味になります。
当サイトのテンプレートでは、項目ごと(商品説明やお支払いなど、文字を書く部分)に設定されている<TABLE>の中で、この%設定を使用することが多いです。 

文字を書く部分にTABLEを入れ子にして、アウトライン(外枠)の大きさの90％、85%に設定することで、
その文字部分とアウトラインの間に余白ができることになります。
アウトラインよりも、ちょっと内側に文字を配置したいときに１００％以下の数値を設定します。
この％数字で見た目の文字配置のバランスを整えることができます。
(全体的に同じように整える場合は、一括編集で検索する文字列にそのテンプレートの文字部分に設定されているwidth=○○%　またはwidth="○○%"を入れて、好きな％に一気に置き換えてください。　)

ちなみに１００％だと、外側TABLEの幅の１００％という意味になり、外側TABLEと同じ大きさ　ということです。

テンプレートの上下に横幅の固定された横長画像などを使用している場合は、文字部分のみが拡大されることになります。（画像よりも中の文字部分が飛び出すかたちになりますので、それに抵抗がなければ拡大しても良いです。）

上下の画像の大きさが固定されていると、文字部分の拡大はできても、縮小はできないことがあります。

デスクトップにマイテンプレートをつくろう！で紹介した、メモ帳にコピー＆ペーストしたテンプレートの
編集方法のひとつです。

複数個所の同じタグを同時に書き換える方法です。
便利な方法なので、最初に紹介しておきます。

特に文字サイズや文字色など、全体にわたるものを変更したいときに使うと便利です。

例えば、当サイトのテンプレートの規定の文字サイズは「size="2"」ですが、
それぞれの項目ごとに複数の箇所で指定してあります。

これをもうひとまわり大きな文字サイズにしたい場合、
全部をひとつひとつ拾い出して、「size="3"」に置き換えていくのは少し面倒です。

そんなときに、すべてのタグから「size="2"」という文字を拾い出して、自動的にすべてを
「SIZE＝３」に置き換えてしまいましょう。

メモ帳の「編集」→「置換」　を選択します。

置換画面が現れたら、ゆっくりスクロールをしながら、これから変えたいと思っているタグを探しだします。
この場合はFONTサイズの変更なので、変えるタグとしては<FONT で始まるタグの　SIZE＝”２”の部分です。とりあえず、一番上の最初に出てきた部分を右クリック→コピーをクリックをします。

タグは大文字でも小文字、どちらで書いても構いませんし、前後を”　”で囲んでも囲まなくても良いため、その時々で適当に入れていますので、
手打ちではなく、そのテンプレートがどちらで書かれているかを確認するためにコピーをします。
置き換えようとするモトのタグをきちんと入れないと置き換わらないからです。

次に置き換え画面の「検索する文字列」の中で右クリック→貼り付けをクリック。

先ほどコピーした文字が「検索する文字列」に入りました。

メモ帳全体に書かれているこの文字列を検索したうえで、置き換えていきましょうということです。

次に、下の「置換後の文字列」に、置き換えたいタグを入れます。
ここでは「size="2"」を「size="3"」に置き換えます。
手入力は面倒なので、先ほどコピーした「size="2"」という文字を
使いまわして、いったん「置換後の文字列」に貼り付けておいて、手動で2を3に変えます。
先ほどコピーしたものは、まだ見えないクリップボードにデータとして残っているので、
もう一度「置換後の文字列」の中で右クリック→貼り付けクリックだけでOKです。
もちろん手で入力しても結構です。

ここから　2の部分を上書きして3に変えます。
そして、「すべて置換」をクリック。

これで、メモ帳に書かれたすべての「size="2"」が「size="3"」に置き換えられました。
テンプレートをブラウザ表示させると、文字が大きくなっているのが分かると思います。

今回の説明はフォントサイズの変更なので、＜FONT　size="2"　の話でしたが、
例えば、カラーを変えたいときは＜FONT color=#996666　の 「#996666」の部分を検索する文字列に入れ、「#000000」などに置き換えたり、テーブルの幅の設定である、「width="95%"」を「width="80%"」に置き換えたり、どのようなものでも置き換えることができます。

いろいろな場面に使用できる方法ですので、カスタマイズ好きのかたは、ぜひ覚えておくと良いでしょう。

テンプレート内に挿入されている
「ほかにも出品しています」のリンクをはずすには、

<▼▼マイブースここから▼▼>
<▲▲マイブースここまで▲▲>

に囲まれた部分を削除します。