 |
？タグってなに？ |  |
|
ホームページを構成している記述言語（ＨＴＭＬ）の中身のようなものでタグと呼ばれる記号の集まりによる 文章の表示・役割などを命令するものです。 |
| |
？拡張子ってなに？ | |
|
拡張子は、タグを使ってホームページを作ったり、リンク指定や画像を表示する時によく使われるファイル の種類を示す形式名のことです。（.ｇｉｆとか.ｊｐｇなど。。。） |
| |
？タグを使ってホームページを作成する時よく使われる拡張子は？ | |
||||||||||||||||||||||||||||||
それでは、ホームページ作成時によく使われる拡張子の種類や形式名をご紹介します。
|
||||||||||||||||||||||||||||||||
| |
？画像を表示させるにはどうするの？ | |
|
【基本的な画像表示のタグ】タグは全て半角英数字をおすすめします。imgとsrcの間は半角あける事 <img src="表示させる画像ファイル名（ＵＲＬ）"> " と "の間の赤い文字のところに、あなたのホームページ上に表示される画像のＵＲＬかあなたの パソコンに保存してある画像のファイル名をご指定下さい。 注：ここで素材屋さんなどの画像のＵＲＬをそのままコピーし指定すると、画像の直リンクになってしまう ので絶対しないでね！ＵＲＬで指定する場合、ご自分のホームページのサーバに画像をアップさせて 自分のページ内のＵＲＬで指定するようにして下さい。 |
| |
？ホームページへテキスト（文字）のみでリンクを貼るには？ | |
|
【基本的リンク先を指定するタグ】タグは全て半角英数字をおすすめします。aとhrefの間は半角あける事 <a href="リンク先のＵＲＬ">★リンク先サイト名</a> " と "の間の赤い文字のところに、リンクさせたいページのＵＲＬを指定して下さい。 青い文字のところは、そのリンクさせるサイト名を文字で記入して下さい。その時、</a>で閉じるのを忘れ ないようにしましょう。 また、★のところに属性を入れることによって字のフォントサイズを変える事もできます。 【文字の大きさを変えるタグ】fontとsizeの間は半角あける事 <font size="字のフォントサイズ数">〜</font> 赤い文字のところに、表示させたい文字のフォント数を入れて下さい。 青い〜のところは、文字の大きさを変えたいリンク先名の文字を記入します。 字のフォントサイズ数を"2"にした場合：<font size="2">リンク先名</font>というタグになります。 例：フォントサイズ数"5"で当サイトをテキストでリンクさせるとするとタグは・・・ <a href="http://homepage3.nifty.com/samie/"><font size="5">Ｓａｍｉｅ’ｓイメージ館</font></a>となり Ｓａｍｉｅ’ｓイメージ館 ←このように表示され、貼り付けたＵＲＬサイトへ移動します。 （クリックしてみて戻る時は、ブラウザの【戻る】で戻って来てね！） ＊自分のサイト内で移動させるリンクの時は良いですが、他所サイトへのリンクを貼る場合は 別窓（新ウィンドウ）で開くようにリンクする事をおすすめします。 誤解を招いたり、リンクしたその他所サイト様へ迷惑がかかってしまうかもしれないからです。 別窓を開くリンクの仕方は→こちら |
| |
？ホームページへバナーなど画像でリンクを貼るには？ | |
|
ここでは、画像（バナー）を貼りそのうえリンク指定もするわけですから、画像表示タグとリンク指定タグを 組み合わせて表示させます。 すでに上記にも出てきましたが、画像表示タグ＝<img src="表示させる画像ファイル名（ＵＲＬ）"> で " と "の間の赤い文字のところに、あなたのホームページ上に表示される画像のＵＲＬかあなたの パソコンに保存してある画像のファイル名を指定するというものです。 リンク指定タグ＝<a href="リンク先のＵＲＬ">〜</a>で、" と "の間の青い文字のところに、リンクさせ たいページのＵＲＬを指定するというものでした。 この二つのタグ画像表示タグとリンク指定タグをうまく組み合わせて画像にリンクさせるのです。 ですから、【画像（バナーなど）でリンク指定するタグ】は、次のようになります。 <a href="リンク先のＵＲＬ"><img src="表示させる画像ファイル名（ＵＲＬ）"★></a> この時、★のところにborder="0"という属性タグを入れることによってバナーのまわりに枠が出てしまう 時に、この枠を消してすっきり表示する事ができます。属性タグを★のところへ入れてみると・・・ <a href="リンク先のＵＲＬ"><img src="表示させる画像ファイル名（ＵＲＬ）"border="0"></a>となります。 例：当サイトへバナー画像にリンクさせたうえ、バナーのまわりに枠も出ずにすっきり表示させるタグは・・ <a href="http://homepage3.nifty.com/samie/"><img src="http://homepage3.nifty.com/samie/img054.gif "border="0"></a> となり  ←このように枠もなくすっきり表示されバナーで貼り付けたサイトへ移動します。（クリックしてみて戻る時は、ブラウザの【戻る】で戻って来てね！） 当サイトへリンクをして下さる場合は、img src="☆"の☆の部分の表示させる画像の（ＵＲＬ）があなたの ページのアドレスに似ているＵＲＬとなっていなければなりません。 Ｓａｍｉｅ’ｓイメージ館のアドレスに似た画像の（ＵＲＬ）になっていたらバナーに直リンしている事になるので お気をつけ下さいね。（直リン禁止です） ＊自分のサイト内で移動させるリンクの時は良いですが、他所サイトへのリンクを貼る場合は 別窓（新ウィンドウ）で開くようにリンクする事をおすすめします。 誤解を招いたり、リンクしたその他所サイト様へ迷惑がかかってしまうかもしれないからです。 別窓を開くリンクの仕方は→こちら |
| |
？別窓（新しいウィンドウ）を開いて表示させるリンクを貼るには？ | |
|
さぁ☆ここまできたら他所のサイトへリンク移動する時に新しいウィンドウでページが開くようにしてみよう！ 自分のホームページ内の移動の為なら同一のウィンドウ内で表示させれば良いけれど、他所様の サイトへリンクを貼り移動させる時は、別ウィンドウにするのがマナーです。 なぜなら、自分のページの同一ウィンドウで表示させるとあなたのページ内であるものと間違えられたり 誤解を招いたりして、そのリンクしてある他所様のサイトへも迷惑がかかる事になってしまいます。 リンクの仕方は、テキストのみや画像にリンクさせる時と同じですので上記の項目のそれぞれのタグに 【別窓（ウィンドウ）で開く属性タグ】・・target="_blank"をつけ加えるだけなので難しくはありません♪ 【テキスト（文字）リンク】の場合の別窓で開くタグは・・・ <a href="リンク先のＵＲＬ"★><font size="字のフォントサイズ数">リンク先名</font></a> となり、 ★の部分に別窓属性タグのtarget="_blank"をはめ込めば良いのです。 Ｓａｍｉｅ’ｓイメージ館をテキストリンクで別窓で開かせるタグにしてみると・・・ <a href="http://homepage3.nifty.com/samie/"target="_blank"><font size="4">Ｓａｍｉｅ’ｓイメージ館</ font></a> となるわけです。↓実際このタグで貼り付けてみると・・・ Ｓａｍｉｅ’ｓイメージ館 ←別窓で開くテキストリンク(フォントサイズは４と指定)＊開いた別窓はブラウザの『×閉じる』 で閉じてね＊ ＊＊タグの最後を</font></a>で閉じるのを忘れないように！！ 【バナーなど画像リンク】（枠なし）の場合の別窓で開くタグは・・・ <a href="リンク先のＵＲＬ"★><img src="表示させる画像ファイル名（ＵＲＬ）"border="0"></a>となり、 同じく★の部分に別窓属性タグのtarget="_blank"をはめ込めば良いでしょう。 Ｓａｍｉｅ’ｓイメージ館をバナー画像にリンクさせ枠なしですっきり別窓で開かせるタグにしてみると・・・ <a href="http://homepage3.nifty.com/samie/"target="_blank"><img src="http://homepage3.nifty.com/ samie/img054.gif"border="0"></a> となります。↓実際タグで貼り付けてみると・・・ ←別窓で開くすっきり枠なしのバナーリンク＊開いた別窓はブラウザの『×閉じる』で閉じてね＊ ＊＊タグの最後を</a>で閉じるのを忘れないように気をつけてね！！ |
| |
？テキスト（文字）リンクの文字（フォント）の大きさや文字の色をかえるには？ | |
|
テキスト（文字）リンクの仕方と文字（フォント）サイズの指定の仕方は、上記項目の【テキスト（文字）のみ でリンクを貼るには？】のところで勉強しましたね☆まだ勉強していない人は、まずそこをチェックしてね。 文字の色を変えるのは、【文字の色を変えるタグ】color="#文字の色番号"というものです。 #文字の色番号というのは、よく掲示板で見られる文字の色を指定する時に『他の色を選ぶ』機能の付い た掲示板でカラーチャートが出てきたりしてたくさんの色に付いている#FD0000とか#000000など色を指定 する記号番号でそれぞれの色に決められた記号番号が付いています。 例えば黒は#000000、赤なら#FF0000、青が#0000FF、黄が#FFFF00、緑は#008000など・・・決まっている のです。ですからもし文字の色を青にするならタグは・・color="#0000FF"を指定して付け加えれば良いと いうことなのです。だからこれを、フォントタグの後ろへくっ付ければ良いのです。 【青い文字でフォント数３を指定するタグ】なら<font size="3"color="#0000FF">入れたい文字</font> となり、入れたい文字 ←このように表示されます。（入れたい文字のところは、自分で好きな文字に書き換えれば良いのです） 後は、この【青い文字でフォント数３を指定するタグ】を【テキスト（文字）のみでリンクを貼るには？】 のタグ<a href="リンク先のＵＲＬ">の後ろに組み合わせれば良いので、 【青い文字フォント数３でテキストリンクを貼るタグ】は・・・ <a href="リンク先のＵＲＬ"><font size="3"color="#0000FF">入れたい文字</font></a>となり、当サイト に当てはめてタグにすると・・・ <a href="http://homepage3.nifty.com/samie/"><font size="3"color="#0000FF">Ｓａｍｉｅ’ｓイメージ館</ font></a> となります。</font></a>で閉じるのを忘れずに！ 実際タグで貼り付けてみると・・・Ｓａｍｉｅ’ｓイメージ館 ←こう表示。（ブラウザの【戻る】で戻って来てね！） 別窓で開くなら上記項目で勉強した別窓タグtarget="_blank"を"リンク先のＵＲＬ"の後ろに加えれば良い のです。さぁ、かっこよくリンク出来るように頑張ってやってみて下さいね。 ＊自分のサイト内で移動させるリンクの時は良いですが、他所サイトへのリンクを貼る場合は 別窓（新ウィンドウ）で開くようにリンクする事をおすすめします。 誤解を招いたり、リンクしたその他所サイト様へ迷惑がかかってしまうかもしれないからです。 別窓を開くリンクの仕方は→こちら |
| |
？テーブルタグってなに？ | |
|
テーブルタグとは、書きたい内容を表にまとめたような感じで表現したり、見やすく箇条書きにしてみたり することで、『これをテーブルを組む』と言います。 基本を抑えてしまえば、さほど難しくないものです。 テーブルタグについてもっと勉強したい人は、タグ講座を主体としているサイト様へ行ってみましょう。 初心者でもわかりやすく説明されているサイトもたくさんありますょ☆彡 |
| |
☆リンクをする時のワンポイントアドバイス☆ | |
|
１件だけのサイトへのリンクをするならいいのですが、たくさんのリンクを貼る場合その各リンク指定タグを そのままダラダラと続けて貼り付けてしまうと、各リンク同士がくっ付いてしまってバナーなどもぴっちりと くっ付いて表示されてしまいます。 ←こんなふうにくっ付いてしまいます(⌒〜⌒;（↑もしクリックして別窓を開いたらブラウザの『×閉じる』で閉じてね） 各リンクの間隔をあけてどれが誰のサイトか（リンク先か）わかるようにすると自分のサイトへ来てくれた 人も見やすくなりますよね。 各リンク同士に間隔をあけて表示したいなら、各リンク指定タグの間を半角スペース自分のあけたい 間隔にすれば良いのです。また、横にズラ〜っとリンクし表示させる時はこれで良いですがもしも縦一列 にリンクし表示させたい時は、各リンク指定タグごとに改行をしなければなりません。 【改行指定するタグ】は、<br> です。ですから各リンク指定タグの間に今度は【改行指定するタグ】<br> を入れ挟み込めば良いのです。タグに挟み込んでみると・・ Ｓａｍｉｅ’ｓイメージ館 Ｓａｍｉｅ’ｓイメージ館 Ｓａｍｉｅ’ｓイメージ館 ←このように表示されます。 ↑(フォントサイズは2と指定)＊開いた別窓はブラウザの『×閉じる』で閉じてね＊ この時も間隔なしで縦にくっいていますよね。このままでも良いという人はこのまま。 一行間隔をあけたい！という時は、【改行してさらに一行分スペースをあけるタグ】 <p> という便利な タグがあります。上記のタグ<br>同様、各リンク指定タグの間に今度は、<p> を入れ挟み込めば良いの です。タグに挟み込んでみると・・・ Ｓａｍｉｅ’ｓイメージ館 Ｓａｍｉｅ’ｓイメージ館 ←こうなります！ |
| ★最後に・・・ ここまで読んで下さってありがとうございました。 最後まで読んでくださったあなたは、きっと当サイトの素材たちを大切にご使用下さる事と思います。 これからも『Ｓａｍｉｅ’ｓイメージ館』を、どうぞよろしくお願いいたします。(￣∇￣*)ゞ ご不明な点がありましたら、どうぞご遠慮なくメールにてご連絡をお願いいたします。 |
