たのしいタグ

　
ＨＯＭＥ│エトセトラ│シネマ

た　の　し　い　　タ　グ
[１]

注意！

タグ・ソースはここではスペース、アルファベットとも全角で
表記していますが、もしあなたが実際にお使いになるなら
必ず半角をご使用ください。

＊

公開禁止のタグを気づかずに載せているかもしれません。
そのような場合ご一報ください。すぐ撤去いたします。
（トップページ下方に、連絡用の送信ボタンがあります。）

　マウスを置いたり外したりすると画像が変わるタグ

　まったく同じ絵柄で、一部がちょこっと違う２つの画像を使って、楽しく遊べるタグを見つけました。
　カーソルを画像に置いたり外したりしてみてください。ほら、面白いでしょう～♪

　【サンプル】

　①　

　②　

　ソース
＜ｉｍｇ　ｓｒｃ＝"×××．ｇｉｆ"　ｈｅｉｇｈｔ＝"□□□"　ｗｉｄｔｈ＝"□□□"　ｏｎＭｏｕｓｅＯｖｅｒ＝"ｔｈｉｓ．ｓｒｃ＝’○○○．ｇｉｆ’"　ｏｎＭｏｕｓｅＯｕｔ＝"ｔｈｉｓ．ｓｒｃ＝’×××．ｇｉｆ’"＞

　　◇ 「拡張子」は［．ｇｉｆ］と［．ｊｐｇ］はオーケーでしたが、ほかのは試していないので分かりません。
　　◇ ○○○にはマウスを置いた時の画像、×××にはマウスを外した時の画像を入れて下さいね。

▲「上に戻る」

　指定した場所にジャンプするタグ

　このＨＰは、トップ・ページの更新映画リストを初め、「５０音別」や「製作国別」などたくさんのリストが
あります。それで、映画タイトルをクリックしたら、ぽんとその「映画メモ」にジャンプできたらいいなぁと、
ずっと思っていました。
　ネットの友人「のりこさん」がその方法を教えてくれました。
　６００近くなっていた映画タイトルのすべてにそのタグを施すのは大作業でしたが、おかげでとっても
便利で見やすいＨＰになった！とひとり自負していますが、いかがでしょう。(*^ ^*)

　１．違うページの指定場所にジャンプするタグ

　【サンプル】
　《ＳＩＴＥ　ＭＡＰ》のページの「映画レビューについて」のところにジャンプして見ることにしましょう。
　「映画レビューについて」をクリックして見てください。
　　　　　（別ウィンドウで開くようにしていますので、うまく飛べたら、ブラウザを閉じてここへもどってくださいね。）

　ソース
１．まず、跳びたい先の指定場所に、適当な名前をつけて＜ａ　ｎａｍｅ＞タグを貼ります。
　　ここでは「映画レビュー」なので、そのまま＜ａｂｏｕｔ＿ｒｅｖｉｅｗ＞にしました。

　　《ＳＩＴＥ　ＭＡＰ》のページ　：　＜ａ　ｎａｍｅ＝"ａｂｏｕｔ＿ｒｅｖｉｅｗ"＞映画レビューについて＜／ａ＞

２．つぎに、今いるページの指定項目（例では、下線の付いた「映画レビューについて」）に、
ジャンプしたい先までのパスを＜ａ　ｈｒｅｆ＞タグで書き込みます。

　　今いる《タグ》のページ　：　＜ａ　ｈｒｅｆ＝"ｓｉｔｅ＿ｍａｐ．ｈｔｍｌ"＞映画レビューについて＜／ａ＞

　　そのあと、［ｈｔｍｌ］に続けて、１．でつけた名前を［＃］を加えて記入します。

　　＜ａ　ｈｒｅｆ＝"ｓｉｔｅ＿ｍａｐ．ｈｔｍｌ＃ａｂｏｕｔ＿ｒｅｖｉｅｗ"＞映画メモについて＜／ａ＞

　２．同じページの指定場所にジャンプするタグ

　【サンプル】
　このページの一番下の【サンプル】の文字のところに跳んでみることにしましょう。（分かりやすいように、赤い文字にしてあります。）
　（↑）の【サンプル】をクリックして見てください。（うまく跳べたら、▲「元に戻る」で帰って来てくださいね。）

　ソース
１．まず、跳びたい先の指定場所に、適当な名前をつけて＜ａ　ｎａｍｅ＞タグを貼ります。
　　私はこれまた分かりいいように、そのまま＜ｓａｍｐｌｅ＞としました。

　　このページの一番下にある【サンプル】　：　＜ａ　ｎａｍｅ＝"ｓａｍｐｌｅ"＞【サンプル】＜／ａ＞

２．次に、今のこの場所の指定項目（例では、下線の付いた【サンプル】）に、
　　＜ａ　ｈｒｅｆ＝＃－－－－＞タグを書きます。（－－－－にさっきつけた名前を記入します。）

　　＜ａ　ｈｒｅｆ＝"＃ｓａｍｐｌｅ"＞【サンプル】＜／ａ＞

　　じつは、▲「上に戻る」　もこのタグを使っています。上部にＨＰのメニューを書いている時など
　は、このタグですぐメニューに戻れますのでとても便利です。
１．まず、このページ全体に名前をつけるわけですが、私は「上に戻る」のだからどのページもぜんぶ
　　＜ｔｏｐ＞という名前にしています。
２．つぎに、＜ａ　ｎａｍｅ＝"ｔｏｐ"＞○＜/ａ＞を「本文」のトップ（つまり、＜ｂｏｄｙ＞の下）に書き込み
　　ます。（＜ａ　ｎａｍｅ＞と＜／ａ＞の間は全角１スペース空けてください。）
　　＜ｈｔｍｌ＞
　　＜ｈｅａｄ＞
　　＜ｔｉｔｌｅ＞たのしいタグ＜/ｔｉｔｌｅ＞
　　＜/ｈｅａｄ＞
　　＜ｂｏｄｙ＞
　　＜ａ　ｎａｍｅ＝"ｔｏｐ"＞○＜/ａ＞
　３．さいごに、「上に戻る」を適当な場所に設置します。ここでは、各項目ごとに、項目の下に設置して
　　みました。（右端に置くのは＜Ｐ＞タグを使っています。）
　　＜ｐ　ａｌｉｇｎ＝"ｒｉｇｈｔ"＞＜ａ　ｈｒｅｆ＝"＃ｔｏｐ"＞▲「上に戻る」＜／ａ＞＜／ｐ＞
　　　　　（▲「上に戻る」　はじっさいには、邪魔にならないようにフォント・サイズを小さくしています。）

▲「上に戻る」

　文章が右から左に流れるタグ

　私が初めて使ったタグです。トップの写真の説明を、他の文とはちょっと違うものにしたいなぁ、
なにか変化させられないかなぁと思っていた時に、友人の「のぶさん」のＨＰで見つけました。
早速のぶさんにそのタグを教えてもらいました。
　まだＨＰの作り方の右も左も分からない時だけに、タグを入力してブラウザにもどり、文章が見事に
動いているのを見た時は、ほんとうにびっくりしました。そして、すごく感激しました。

　【サンプル】

私が初めて使ったタグです。実際に動いているのを見た時はほんとうに感動しました。

　ソース
＜ｔａｂｌｅ　ｂｏｒｄｅｒ＝ｘ　ｃｅｌｌｓｐａｃｉｎｇ＝ｘｘ　ｗｉｄｔｈ＝ｘｘｘ％＞＜ｔｂｏｄｙ　ｂｇｃｏｌｏｒ＝***＞
＜ｔｄ＞＜ｍａｒｑｕｅｅ　ｓｃｒｏｌｌａｍｏｕｎｔ＝*＞ここに好きな文章を入れる＜／ｍａｒｑｕｅｅ＞＜／ｔｄ＞
＜／ｔｂｏｄｙ＞＜／ｔａｂｌｅ＞

◇「ｔａｂｌｅ　ｂｏｒｄｅｒ」は枠縁の外側の線の太さです。数値を０にすると、枠縁は消えます。
　　　　ちなみにサンプルは「５」にしています。
◇「ｃｅｌｌｓｐａｃｉｎｇ」は枠縁そのものの太さです。数値を０にすると、枠縁の外側の線だけになります。
　　　　サンプルは「１０」にしています。
◇「ｗｉｄｔｈ」は枠の横幅の長さです。サンプルは「８５」にしています。
◇「ｂｇｃｏｌｏｒ」は枠の中の背景色です。記入しなければ、背景は白いままです。
　　　　サンプルは私の好きな「薄紫」 “ｄｄｂｂｄｄ”にしてみました。
◇「ｍａｒｑｕｅｅ　ｓｃｒｏｌｌａｍｏｕｎｔ」は文章が動くスピードです。数値が大きくなるほど動きは速くなります。
　　　　サンプルは「３」に設定しました。

▲「上に戻る」

　文字が点滅するタグ

　「更新情報」のマークを目立つように点滅させたいなぁ、と思っている時に見つけたタグです。

　【サンプル】

①

②

　びっくり！

　ソース
＜ｍａｒｑｕｅｅ　ｓｃｒｏｌｌｄｅｌａｙ＝"ｘ"　ｓｃｒｏｌｌａｍｏｕｎｔ＝"**"　ｗｉｄｔｈ＝"**"＞　ここに好きなマークや
言葉を入れる＜／ｍａｒｑｕｅｅ＞

◇「ｓｃｒｏｌｌａｍｏｕｎｔ」と「ｗｉｄｔｈ」は同じ数値にします。文字列の長さに合わせてちょうどいい数値を
　　　　自分で探してください。
　　　　これがけっこう大変な作業で、私はこの数値探しにすごく苦労しました。
　　　　サンプルでは①は「６０」、②は「７５」にしています。
◇なぜだか理由は分かりませんが、文字やマークの前に全角で１スペース分空けたほうが、
　　　　文字やマークが欠けないできれいに出てきました。
◇「ｓｃｒｏｌｌｄｅｌａｙ」は点滅の速さです。数値が大きくなるほど、点滅はゆっくりになります。
　　　　サンプルでは、①は少し速めに「５００」に、②はゆっくりめに「８００」にしてみました。

▲「上に戻る」

　ページをめくるような効果を与えるタグ
　　　　
　サブＨＰは “旅行アルバム” になっていますが、メインの「映画メモ」とは毛色がちょっと
違うせいか、あまり訪問者がありません。それで、なにか特徴を持たせられないかと考えている
時に、このタグを見つけました。
　ページが表示される時に、ちょうど本のページをめくるように次のページが出てくるのです。
　それで、タグ効果はいかに・・・？　うふ、残念ながら訪問者は相変わらずほとんどナシ～。
でも私自身はとっても気に入っていて、ページごとに効果を変えて遊んでいます。
　　（現在は、「柴犬ルビー」「ステンドグラス」「とまとの年間ベスト５」のページだけに、このタグを使っています。）

　【サンプル】
　「柴犬ルビーの優雅な生活」 　「ステンドグラスの部屋」 　「とまとの年間ベスト５」
　それぞれをクリックしてみてください。ほら、めくるようにページが開くでしょう。

　ソース
＜ｍｅｔａ　ｈｔｔｐ－ｅｑｕｉｖ＝"Ｐａｇｅ－Ｅｎｔｅｒ"　ｃｏｎｔｅｎｔ＝"ｒｅｖｅａｌＴｒａｎｓ（Ｄｕｒａｔｉｏｎ＝ｘ，
Ｔｒａｎｓｉｔｉｏｎ＝ｘｘ）"＞

　このタグをページのどこに書いたらいいのか、ですが
　＜ｈｔｍｌ＞
　＜ｈｅａｄ＞
　＜ｔｉｔｌｅ＞△〇□＜／ｔｉｔｌｅ＞
　＜／ｈｅａｄ＞
　のあとに記入してみましたら、うまく機能しましたので、とりあえずはここでいいのかな、と
思ったりしています。もしかしたら、ページのどこでもいいのかもしれません・・・。
　それから行替えしていますが、ＤｕｒａｔｉｏｎとＴｒａｎｓｉｔｉｏｎの間は（，）だけで、
ノー・スペースです。

◇「Ｄｕｒａｔｉｏｎ」は“効果の時間”、つまりページがめくられるのにかかる時間で、「秒単位」です。
　　　　サンプルでは「３」にしています。
◇「Ｔｒａｎｓｉｔｉｏｎ」は“効果の種類”で、「０～２３」までの２４種類があります。
　　　　いろんな数字をいれて試して見てください。面白いですよ。
　　　　ちなみに、「ステンドグラス」のページは【３】、「柴犬ルビー」のページは【２０】
　　　　「とまとの年間ベスト５」は【１４】を使っています。
◇すごく残念ですが、このタグは　※ＩＥのみで動作　なので、ほかの環境下では機能しません。

Ｔｒａｎｓｉｔｉｏｎ効果の種類

０	ボックスイン	８	縦にブラインド	１６	上下に分割
１	ボックスアウト	９	横にブラインド	１７	左下へストリップ
２	サークルイン	１０	横にチェッカー	１８	左上へストリップ
３	サークルアウト	１１	下にチェッカー	１９	右下へストリップ
４	上へワイプ	１２	ランダムディゾルブ	２０	右上へストリップ
５	下へワイプ	１３	左右から結合	２１	水平ランダムバー
６	右へワイプ	１４	左右に分割	２２	垂直ランダムバー
７	左へワイプ	１５	上下から結合	２３	ランダム

▲「上に戻る」

　リンクの文字に工夫をほどこす

　１．リンクの下線を表示しない
　　　　
　この【シネマな気分】はＨＰの性格上、リンクを貼った映画タイトルの一覧表が多いのですが、
タイトルの下にアンダーラインがザーッと出てくるのが少々目障り、なんとかならないものか・・・と
思っていました。
　でも、リンクを貼れば自動的に出てくるものらしいし、こればっかりはしょうがないんだろうな、
なんて思っていたら、分かって見ればとっても簡単。タグを書き込むだけでした。
　早速試してみました。おかげですべてのリンクの下線が消えて、すっきりしたホームページに
なりました。

　【サンプル】
　このページ自体がサンプルみたいなものですね！　このページにある

　　　▽ＴＯＰへもどる
　　「イギリス周遊の旅」

には実際にはリンクが貼られていますが、アンダーラインは消えています。
　　
　ソース
　＜ｈｅａｄ＞内に、　「A:link {text-decoration:none}」
　　　　　　　　　　　　「A:visited {text-decoration:none}」
　　　　　　　　　　　　「A:active {text-decoration:none}」
　　という３つのスタイルシートを記述します。
　では実際に私がこのページに書いている例を全角で表記してみます。

　＜ｈｔｍｌ＞
　＜ｈｅａｄ＞
　＜ｔｉｔｌｅ＞△〇□＜／ｔｉｔｌｅ＞
　＜ＳＴＹＬＥ　ｔｙｐｅ＝"ｔｅｘｔ／ｃｓｓ"＞
　　＜！－－
　　　　Ａ：ｌｉｎｋ　｛ｔｅｘｔ－ｄｅｃｏｒａｔｉｏｎ：ｎｏｎｅ｝
　　　　Ａ：ｖｉｓｉｔｅｄ　｛ｔｅｘｔ－ｄｅｃｏｒａｔｉｏｎ：ｎｏｎｅ｝
　　　　Ａ：ａｃｔｉｖｅ　｛ｔｅｘｔ－ｄｅｃｏｒａｔｉｏｎ：ｎｏｎｅ｝
　　－－＞
　＜／ＳＴＹＬＥ＞
　＜／ｈｅａｄ＞

▲「上に戻る」

　２．リンクの文字を太字や斜体にする

　リンクの下線を消して見た目はすっきりしましたが、すこし物足りない気もします。
　そこで、リンクの上にポインタが来た時に、太字にしたり、斜体にしてメリハリをつけることにしました。

　太字にする場合は、Ａタグのスタイルシートを A:hover {font-weight:bold;} と記述します。
　斜体にする場合は A:hover {font:italic} と記述します。
　いずれの場合も、「リンクのアンダーラインを表示しない」（text-decoration:none）を併用しておいた方がよいと思います。

　【サンプル】
　トップ・ページはリンクが貼られている文字の上にポインタを乗せると、太字になるタグを使っています。
　　
　ソース
　＜ｈｔｍｌ＞
　＜ｈｅａｄ＞
　＜ｔｉｔｌｅ＞△〇□＜／ｔｉｔｌｅ＞
　＜ＳＴＹＬＥ　ｔｙｐｅ＝"ｔｅｘｔ／ｃｓｓ"＞
　　＜！－－
　　　　Ａ：ｌｉｎｋ　｛ｔｅｘｔ－ｄｅｃｏｒａｔｉｏｎ：ｎｏｎｅ｝
　　　　Ａ：ｖｉｓｉｔｅｄ　｛ｔｅｘｔ－ｄｅｃｏｒａｔｉｏｎ：ｎｏｎｅ｝
　　　　Ａ：ａｃｔｉｖｅ　｛ｔｅｘｔ－ｄｅｃｏｒａｔｉｏｎ：ｎｏｎｅ｝
　　　　Ａ：ｈｏｖｅｒ　｛ｆｏｎｔ－ｗｅｉｇｈｔ：ｂｏｌｄ；｝
　　－－＞
　＜／ＳＴＹＬＥ＞
　＜／ｈｅａｄ＞

▲「上に戻る」

　３．リンクの文字の背景に色をつける

　トップ・ページは、文字にポインタを乗せた時、背景に色がつくタグも併用しています。
　これは A:hover {background:***} で指定できます。*** のところに好きなカラー番号か、
色そのもの（ｇｒａｙとかｙｅｌｌｏｗとか）を記入します。
　 A:hover {color:+++ ; background:***} とすると、背景と一緒にリンクの文字の色も変更できますし、
A:hover {color:+++} を単独で使えば、文字だけ色を変更できます。

　【サンプル】
　トップ・ページは、文字の背景が薄い黄色＜＃ｆｆｆｆ９９＞に変わるようにして見ました。
　　
　ソース
　＜ｈｔｍｌ＞
　＜ｈｅａｄ＞
　＜ｔｉｔｌｅ＞△〇□＜／ｔｉｔｌｅ＞
　＜ＳＴＹＬＥ　ｔｙｐｅ＝"ｔｅｘｔ／ｃｓｓ"＞
　　＜！－－
　　　　Ａ：ｌｉｎｋ　｛ｔｅｘｔ－ｄｅｃｏｒａｔｉｏｎ：ｎｏｎｅ｝
　　　　Ａ：ｖｉｓｉｔｅｄ　｛ｔｅｘｔ－ｄｅｃｏｒａｔｉｏｎ：ｎｏｎｅ｝
　　　　Ａ：ａｃｔｉｖｅ　｛ｔｅｘｔ－ｄｅｃｏｒａｔｉｏｎ：ｎｏｎｅ｝
　　　　Ａ：ｈｏｖｅｒ　｛ｆｏｎｔ－ｗｅｉｇｈｔ：ｂｏｌｄ；｝
　　　　Ａ：ｈｏｖｅｒ　｛ｂａｃｋｇｒｏｕｎｄ：＃ｆｆｆｆ９９｝
　　－－＞
　＜／ＳＴＹＬＥ＞
　＜／ｈｅａｄ＞

　スタイルシートは、デザイン性の高いＷｅｂページを記述するための、最近の主流らしいですね。
もちろん、私にはまったく分かりませんが、成果だけはちゃかり借用させていただきました。

▲「上に戻る」

　リンクを貼った時に出る枠線を消す方法
　　　　
　トップに戻るためのボタンを素材屋さんからダウンロードして、ページに貼った時のことです。
ボタンの周囲に変な枠がかなり濃い色で出るではありませんか！
　「あ～、こんなになるとは知らなかった！」
　あの時はほんとうにがっかりしました。せっかく気に入ったボタンでも、これではちょっと使う気に
なれません。しかたないので、文字で「ＴＯＰ」とか「ＢＢＳ」と書いて、リンクを貼っていました。
　ところが、その後すこしずつタグのことを知り、いろいろいじっているうちに、ｂｏｒｄｅｒの数値を
変えることで、線の太さを変られることが分かってきました。
　そこで、ふと「じゃぁ、０にしたらどうなるんだろう」と思ったんです。早速やってみると、なんと、
周囲の枠のような線が見事に消えているじゃありませんか。「やったぁー！！」と思いましたね。
　今は、ページのデザインなどを考え、文字とボタンを使い分けています。

　【サンプル】①
　　

　　 ―→　　

　　
　ソース
　＜ａ　ｈｒｅｆ＝"－－－－"＞＜ｉｍｇ　ｓｒｃ＝"ＢＢＳボタン"＞＜／ａ＞
　　―→　　＜ａ　ｈｒｅｆ＝"－－－－"＞＜ｉｍｇ　ｓｒｃ＝"ＢＢＳボタン"　ｂｏｒｄｅｒ＝０＞＜／ａ＞

　プロフィールに入る「入り口」はイラストにしましたが、これが枠なしだとなんだか心許ない。
でも、リンクを貼った時に出る太い線はイヤ。そこで今度はｂｏｒｄｅｒの数値を「１」にしてみました。

　【サンプル】②
　　

　　―→　　

　ソース
　＜ａｈｒｅｆ＝"－－－－"＞＜ｉｍｇ　ｓｒｃ＝"イラスト"　ｂｏｒｄｅｒ＝０＞＜／ａ＞
　　―→　　＜ａｈｒｅｆ＝"－－－－"＞＜ｉｍｇｓｒｃ＝"イラスト"　ｂｏｒｄｅｒ＝１＞＜／ａ＞
　
　ほんのちょっとのことですけど、ずいぶん印象が変わるものですね。

▲「上に戻る」

　リンクを張る文字に説明を加えるタグ

　いろいろな方のＨＰに遊びにいって、面白いことに気づきました。サイト・メニューの上にカーソルを
当てたまま、中に入ろうかどうしようか迷っていると、ポッと漫画の吹き出しのようなものが出てきて、
サイトの説明が書いてあったのです。
　「へぇ～～・・・」、どういう仕組みになっているんだろう、と、とても不思議でした
　分かって見ればごくシンプル。タグの中に書き込めばいいだけのことでした。
これを「Ａタグのtitle属性」と言うことや、吹き出しのようなものが出てくることを「ポップアップ表示」と
呼ぶことも知りました。
　好奇心の強い私は、早速トップ・ページの目次にやたらとこの「ポップアップ表示」をやっていますが、
どれもこれもじゃ少々ウルサイかなぁ・・・と、最近ちょっと思い始めています。
もうちょっと整理した方かいいかもしれません。

【サンプル】
　　

　　―→　　

　　
　ソース
　　＜ａ　ｈｒｅｆ＝"－－－－"＞＜ｉｍｇ　ｓｒｃ＝"ＢＢＳボタン"＞＜／ａ＞
　　―→　　＜ａ　ｈｒｅｆ＝"－－－－"＞＜ｉｍｇ　ｓｒｃ＝"ＢＢＳボタン"　ｔｉｔｌｅ＝"足跡残していってね♪"＞
　　　＜／ａ＞

　それぞれのＢＢＳボタンにカーソルを当てて見てください。ホラッ、右のボタンから「ポップアップ」が
出てくるでしょう！
　ボタンを使わず、文字で書く時はこうなります。

【サンプル】
　　ＢＢＳ 　　―→　　ＢＢＳ

　ソース
　　＜ａ　ｈｒｅｆ＝"－－－－"＞ＢＢＳ＜／ａ＞
　　―→　　＜ａ　ｈｒｅｆ＝"－－－－"　ｔｉｔｌｅ＝"足跡残していってね♪"＞ＢＢＳ＜／ａ＞

▲「上に戻る」

　ポインターの動きに合わせて「時計」が流れるタグ

　ポインターの動きにあわせて「星」や「時計」が流れたり、任意に書き込んだ「文字」が流れる素敵な
タグに出会いました。ここではそのうちの「時計」のタグをメモしておこうと思います。

【サンプル】　　　（▲「元に戻る」←「ジャンプするタグ」専用です。）
試しにポインターを動かしてみてください。
うす青い綺麗な色の時計がポインターの動きに合わせて流れるのがお分かりになるでしょう。
　　
　ソース
　確認していないのですが、もしかすると、個人の方が著作権を持つ公開禁止のタグかもしれません。
残念ですが、ここではポインターを動かして、流れる時計を楽しむだけに留めておきたいと思います。
(このタグ、チラチラして少しうるさくなったので、しばらくお休みします。^ ^ゞ）

▲「上に戻る」