タグＱ＆Ａ/HTMLタグ素材集

Ｑフィルターの上部分が切れて表示されないのですが？

症状例

文字タグ

<span style="width:300;font-size:20pt;font-family:富士ポップ;color:blue;filter:dropshadow(color=orange,offX=2,offY=-8);">文字タグ</span>

Ａフィルターの上部が切れてしまう場合
[line-height:2;]を挿入します

改善例

文字タグ

line-height:2;は上下に二行分間隔を空けるということです

<span style="width:300;line-height:2;font-size:20pt;font-family:富士ポップ;color:blue;filter:dropshadow(color=orange,offX=2,offY=-8);">文字タグ</span>

▲Ｑ＆Ａ項目へ戻る▲

Ｑ装飾文字が改行されてしまうのですが？

症状例

文字タグ

<span style="width:100;font-size:20pt;font-family:富士ポップ;color:blue;filter:dropshadow(color=orange,offX=2,offY=5);">文字タグ</span>

Ａ [width]の幅が狭いためと思われます

改善例

文字タグ

[width]は文字を表示する横幅を表します
Ｑの方は[width:100;]改善例は[width:300;]と広くしています

<span style="width:300;font-size:20pt;font-family:富士ポップ;color:blue;filter:dropshadow(color=orange,offX=2,offY=5);">文字タグ</span>

▲Ｑ＆Ａ項目へ戻る▲

Ｑフィルターを重ねるってどういうこと？

Ａフィルターの重ね方
フィルターは文字に「影」や「縁取り」など様々な
効果をつけるタグのことです。

フィルターは以下のようにすると重ねられます。

１・まずフィルターをひとつかけます(影)
shadow(color=#006a00,direction=350)
和風文字タグ７

フィルターひとつのタグ

<span style="width:300;line-height:2;font-size:20pt;font-family:祥南行書体;color:#ffffd5;filter:shadow(color=#006a00,direction=350);">和風文字タグ７</span>

２・二重文字を加えます
dropshadow(color=#006a6a,offX=3,offY=3)
和風文字タグ７

フィルターふたつのタグ

<span style="width:300;line-height:2;font-size:20pt;font-family:祥南行書体;color:#ffffd5;filter:shadow(color=#006a00,direction=350)dropshadow(color=#006a6a,offX=3,offY=3);">和風文字タグ７</span>

３・さらに二重文字を加えます
dropshadow(color=#95004a,offX=-5,offY=1)
和風文字タグ７

フィルターみっつのタグ

dropshadow(color=#95004a,offX=-5,offY=1)</B><Br>
<span style="width:300;line-height:2;font-size:20pt;font-family:祥南行書体;color:#ffffd5;filter:shadow(color=#006a00,direction=350)dropshadow(color=#006a6a,offX=3,offY=3)dropshadow(color=#95004a,offX=-5,offY=1);">和風文字タグ７</span>

注意点としては青い影に青い縁取りなど
同じ色や同じ場所に表示すると重なって
どちらかのフィルターの効果がなくなって
しまうので色とずらす間隔の工夫が必要です。

▲Ｑ＆Ａ項目へ戻る▲

Ｑオンマウス画像でリンクしたい

Ａリンクするには<a href="アドレス">～</a>
タグで囲みます

オンマウス画像６を例にすると

<img src="画像１ＵＲＬ" onmouseover="this.src='画像２ＵＲＬ';" onmouseout="this.src='画像１ＵＲＬ';">

↑上記画像のタグを<a href="アドレス">～</a>で囲います

<img～border="0">は画像のリンク枠を非表示にするためのタグです。
<a href="リンクアドレス" target="_blank">のようにすると別窓で開きます

<a href="リンク先ＵＲＬ">
<img src="画像１ＵＲＬ" onmouseover="this.src='画像２ＵＲＬ';" onmouseout="this.src='画像１ＵＲＬ';" border="0">
</a>

▲Ｑ＆Ａ項目へ戻る▲

Ｑ [ページでエラーが発生しました]と表示される

Ａ同一IDが複数使われていると思われます

オンクリック画像１を例にします

この文字をクリックして下さい♪

<span onClick="document.all.item('moji1').style.visibility='visible'">
この文字をクリックして下さい♪
</span>

<div ID="moji1" style="visibility:hidden;">
<img src="画像ＵＲＬ">
</div>

↑このタグではID="moji1"を使用しています。
例えば同一IDでもう一つオンクリック画像をコピペしたとします。

この文字をクリックして下さい♪

<span onClick="document.all.item('moji1').style.visibility='visible'">
この文字をクリックして下さい♪
</span>

<div ID="moji1" style="visibility:hidden;">
<img src="画像ＵＲＬ">
</div>

↑どちらをクリックしてもウインドウ下部ステータスバーに
[ページでエラーが発生しました]と表示されるはずです。
これは同じページ内に同じIDが二つ以上使用されていると起こります。

この状態を解決するにはID="moji1"をID="moji2"などに変えることです。
[など]というのはID="～"の～部分に入るのは
半角英数字であれば構わないからです。
つまりID="gazou1"、ID="gazou2"などでも構いません。

この文字をクリックして下さい♪

<span onClick="document.all.item('moji2').style.visibility='visible'">
この文字をクリックして下さい♪
</span>

<div ID="moji2" style="visibility:hidden;">
<img src="画像ＵＲＬ">
</div>

↑今度はID="moji2"にしてみました
このページにはID="moji2"が使われているタグは
これひとつだけなのでエラーは起こりません。

▲Ｑ＆Ａ項目へ戻る▲

Ｑ装飾文字を動かしたい

Ａ marqueeタグと組み合わせることで
装飾文字でも動かすことが出来ます。

まず[文字を動かす]より好きな動かし方の文字をコピペしましょう。
ここでは動く文字タグ１１を使います
動く文字タグ１１

<marquee behavior="alternate" direction="up" height="50"><marquee direction="right">ここに文章を書いて下さい</marquee></marquee>

↑次に[ここに文章を書いて下さい]の文字と装飾文字から好きなタグを選んで入れ替えます。

文字の大きさによってはheight="数字"の大きさ(高さ)を大きくして下さい

かわいい文字タグ７

<marquee behavior="alternate" direction="up" height="150"><marquee direction="right">
<span style="width:300;line-height:2;font-size:20pt;font-family:富士ポップ;color:ff00ff;filter:shadow(color=#ff80c0)dropshadow(color=skyblue,offX=0,offY=-5)Alpha(opacity=50,);">
かわいい文字タグ７
</span>
</marquee></marquee>

↑この通り装飾文字を動かせます。

▲Ｑ＆Ａ項目へ戻る▲

Ｑ alt以外で画像にマウスをのせて説明文を出したい

Ａ画像にマウスをのせて説明文を表示するには
オンマウスを応用します

こんな感じになりますよ～～♪

↓こちらのタグをコピペ

<span onmouseover="document.all.item
('gazou1').style.visibility='visible'" 
onmouseout="document.all.item
('gazou1').style.visibility='hidden'">
<img src="のせる画像のＵＲＬ">
</span>

<div ID="gazou1" style="visibility:hidden;font-size:13px;">
説明文
</div>

[のせる画像のＵＲＬ]の部分を画像のアドレスと入れ替えて下さい
[説明文]の部分にお好きな説明文を書いて下さい
font-size:13px;の数字の大小で文字の大きさを変更できます
font-size:13px;color:カラーコード;にすると文字の色も変更できます
<span>～</span>と<div>～</div>タグを上下逆にすることで
説明文を画像の上に表示できます

▲Ｑ＆Ａ項目へ戻る▲

Ｑ電光掲示板風テーブルにリンクバナーを流したい

Ａ電光掲示板風テーブルにリンクバナーを流すには文字部分にリンクバナータグを挿入するだけです。

このサイトではこのようにご紹介しています↓

電光掲示板風テーブル１

<Table border="0" bgcolor="#000000" cellpadding="5" Cellspacing="0" style="border:thick ridge silver;width:340;height:20;"><Tr><Td>
<font face="ＭＳ ゴシック" size="3" color="#80ff80">
<marquee width="320" scrollamount="5" truespeed>流れる文字</marquee>
</font></Td></Tr></Table>

このタグの「流れる文字」部分を
リンクバナータグと入れ替えるだけでできます。

表示例は以下のようになります↓

<Table border="0" bgcolor="#000000" cellpadding="5" Cellspacing="0" style="border:thick ridge silver;width:340;height:20;"><Tr><Td>
<font face="ＭＳ ゴシック" size="3" color="#80ff80">
<marquee width="320" scrollamount="5" truespeed>
<a href="ページURL" target="_blank">
<img src="画像URL" border="0">
</a>
</marquee>
</font></Td></Tr></Table>

並べるとこのような感じです。

表示例は以下のようになります↓

<Table border="0" bgcolor="#000000" cellpadding="5" Cellspacing="0" style="border:thick ridge silver;width:340;height:20;"><Tr><Td>
<font face="ＭＳ ゴシック" size="3" color="#80ff80">
<marquee width="320" scrollamount="5" truespeed>
<a href="ページURL1" target="_blank">
<img src="画像URL1" border="0">
</a>
<a href="ページURL2" target="_blank">
<img src="画像URL2" border="0">
</a>
<a href="ページURL3" target="_blank">
<img src="画像URL3" border="0">
</a>
<a href="ページURL4" target="_blank">
<img src="画像URL4" border="0">
</a>
<a href="ページURL5" target="_blank">
<img src="画像URL5" border="0">
</a>
</marquee>
</font></Td></Tr></Table>

[scrollamount="5"]の数字の大小で流れるスピードが変えられます。
[width="320"]の数字の大小で横幅が変えられます。
他の電光掲示板風テーブルやスクロールフィールドなどでもやり方は同じです。

▲Ｑ＆Ａ項目へ戻る▲

管理人お勧めのポイントを本当に現金に出来たサイト＆アプリ
モッピー	トリマ