その他のタグについて

その他のタグについて

2002/06/26設置
最終更新2003/03/17


まだ一つリンクについて重要なことがありました!
基本的なリンクについての解説はこちらのページで
していますが他にもありましたのでこのページで解説します。

そのリンクについて他の事とは…

●同じページ内での リンク先に飛ぶという方法です●

まず飛びたいところにリンクを貼るわけですが
それは画像でも文字でもいいのですが、基本的なリンクの貼り方で
使う方法とは使うタグの単語が違います!

<a name="#マーカー名">その時にリンクさせる場所の文字か画像のデータ</a>

上記のように飛びたいところに表記させます!
その時ちゃんと最後は</a>で閉じてくださいね!
もちろん通常のリンクタグの中にname="#マーカー名"を入れても実行できます!

上記の設定が出来たら今度は普通にリンクを貼りますが
その時のリンクアドレスを上記で設定したマーカー名にしなくてはいけません。

例として上記の見出しの●同じページ内でのリンク先に飛ぶという方法です●の文字に
飛ぶようにリンクさせます!
この時一番最初の●の文字でも全文字でも a タグで囲ってもなります。
またはその一部でも。


『●同じページ内での』の文字に飛ぶようにしてマーカー名はmidasiにします。

上記の見出しの所に飛ぶタグ表記例として

<a name="#midasi">●同じページ内での</a>リンク先に飛ぶという方法です●

このように見出しの文字のところにしておき
別の場所例えばココから下記のようにリンクタグを表記します!

<a href="#midasi">見出しに飛ぶ</a>

実行例が→ 見出しに飛ぶ ←を押して見て!見出しに飛ぶから!

上記の場合、見出しに飛ぶと文字にリンクを貼りましたが画像にも貼れます!
文字の部分のデータを画像表記タグに変えてもなります!
実行してもわかる事ですがその飛びたい所に指定した所がウィンドウの
一番上に表示されるようになります!
今回はmidasiとしましたけど、マーカー名は何でもいいですよ!


~8月10日更新~(以前に日記に載せたものをこのページに!)

画像の表示をするときにみなさんはそのまま
画像の倉庫からの画像表記タグをコピーしてきますよね?

そのときに少し変わったフィルター効果で
画像をにじませるというかぼかすような効果になる方法

まずは画像表記タグの<IMG SRC=http://~.jpg>を
コピーしてきますよね?
そのあとにその画像表記の括弧の中に
次の文字を追加して下さい!その際は1つ半角分スペースを
空けてそのあとに追加して下さい。

STYLE="filter:Blur(strength=5)"

()の括弧の中のstrength=5というのは、効果の強さです。
数値を変えると効果が強くなるよ!
下にその実行例を表示させておきます!


左が元画像で右が効果後の画像(数値は20)

タグ表記例は
<IMG SRC="http://plaza.rakuten.co.jp/img/user/~.jpg"HEIGHT=100 WIDTH=100 STYLE="filter:Blur(strength=20)">


文字の背景に色をつける方法です!

そのタグ表記方法ですが、fontタグの括弧の中に
次の単語を追加するだけです!
style="background-color:色の名前を英語で"

タグ表記例は…
<font style="background-color:skyblue">ぷよよーん</font>


その実行例が右記の通り→ ぷよよーん

同じ括弧の中にsizeやcolorの単語も追加すれば
もっといいでしょう!さらに太字タグをすればみやすいかも!

こんな風にね!↓
タグ表記例は…
<font size="4" color=red style="background-color:skyblue"><b>ぷよよーん</b></font>


実行例が右記の通り→ ぷよよーん

こちらの 文字の修飾・装飾編 で紹介した
文字を透かす効果に似ていますがこちらは透かす部分に
色がつけられるという具合です。

黒の壁紙を使う部分に白の背景で文字を他の色に
するときなどに便利かと思います。

まず一つ…。

★リンクタグのアンダーラインを消す方法★

1、普通にリンクタグ→ トップへ
2、おまけでもう情報公開済みですが別ブラウザで
  ウィンドウを出す方法で トップへ

上記のタグ表記は…
1、 <a href="http://plaza.rakuten.co.jp/corectersl100/">トップへ</a>
2、 <a href="http://plaza.rakuten.co.jp/corectersl100/" target="_blank">トップへ</a>

以上の表記方法が基本ですが今日教えるのは
アンダーラインを消してアンダーラインを非表示にする方法。

下記が表記例です!当サイトのトップへリンクを貼る場合
<a href="http://plaza.rakuten.co.jp/corectersl100/" style="text-decoration:none;">トップへ</a>
実行例はこのようになります→ トップへ

このアンダーラインを消すキーワードは
style="text-decoration:none;" の所です!


直前に使用していたウィンドウに切り替えるということで
Altキーを押しながらTabキーを押す。
もう一度Altキーを押しながらTabキーを押すと元に戻る。
便利といったら便利な方法です。
(別ブラウザを開いていて使用した場合は
        その前に使用していたブラウザに戻ります)

ブラウザの切り替えだけのようです。
9月18日からの追加分

他には、キーボードのみの操作だけでのコピーと貼りつけが出来ます。
~コピーの方法~
まずコピーしたい文字の最初の文字でも最後の文字でもいいので
コピーする文字の始まりか終りにカーソルを置く!(点滅させておく)
その後SHIFTキーを押したまま矢印キー(カーソルキー)で
コピーしたい文字全部を反転させる。
その後、Ctrlキーを押しながらCのキーを押すと
ツールメニューからコピーを選んだ状態になります!
~貼り付けの方法~
貼りつけたい位置にカーソルを置く!(点滅させておく)
その後SHIFTキーを押したままでInsertキーを押す。
これで貼り付けが出来ます!

~コピーの時に使えるちょっとした技~
1行全ての文字をコピーする場合は、そのコピーしたい行の
最初の文字の左側にカーソルを置く!(点滅させておく)
その後SHIFTキーを押したままEndキーを押すとその行の
最後の文字まで反転されるのでその後にCtrlキーを押しながら
Cキーを押すとコピーしたことになりますので
あとは上記の貼り付けの方法で実行するとコピーした1行ごとに
貼りつけされます!

上記のEndキーはカーソルの移動にも便利です。
単にEndキーを押しただけでも現在ある最後の文字の右側まで移動します。
いろいろ使えるとおもうので試して見て下さいね。


オンマウスで画像が変わりオンマウスアウトで画像が元に戻る方法

このタグを実行するには2つの画像表記タグが必要です。

1つは変わる前と変わって後に表示する元の画像の表記タグ。
もう一つはオンマウスして変わるための画像の表記タグ。

<IMG src="http://plaza.rakuten.co.jp/img/user/~1.gif" onmouseover=this.src="http://plaza.rakuten.co.jp/img/~2.gif" onmouseout=this.src="http://plaza.rakuten.co.jp/img/user/~1.gif">

というように表記します!
1.gifが元になる画像です。2.gifがオンマウスした時に表示させる画像です。
上記のタグをコピーして画像表記部分のアドレスに変えればOKです!
もし良く分からないという方は2つの画像表記タグを私書箱に明記してくれれば
その画像を上記のタグに変換して送ります!
なおその際はどちらが元にする画像なのかを書いてくださいね。
それとメールアドレスもね!

当サイトの壁紙での例は以下の画像で!画像の上にマウスカーソルを置いて見て!



~~~~~~~~~~~~~~~~~~~~~~~~~~~
以下のタグ情報は2003/3/16に追加した情報です。

画像に波効果を出す


・波効果:以下の画像表記タグのカッコ内に
STYLE="filter:Wave(freq=3,strength=1,lightStrength=100,phase=0)"
→属性
freq=3は波の数、strength=1は波の強さ、lightStrength=100は光の強さ、phase=0は波の開始位相
phase=0~360の範囲で指定、lightStrength=0~100の範囲で指定。
(.) の中は属性値をカンマ( , )で区切って指定

画像にX線というかレントゲンの効果を出す


・X線効果:以下の画像表記タグのカッコ内に
STYLE="filter:Xray()"

画像をモノクロ(白黒)効果にする


・モノクロ効果:以下の画像表記タグのカッコ内に
STYLE="filter:Gray()"

上記の3つの表記例
波効果
<IMG HEIGHT=200 WIDTH=200 STYLE="filter:Wave(freq=3,strength=1,lightStrength=100,phase=0)" SRC="画像のURL">

X線効果
<IMG HEIGHT=200 WIDTH=200 STYLE="filter:Xray()" SRC="画像のURL">

モノクロ効果
<IMG HEIGHT=200 WIDTH=200 STYLE="filter:Gray()" SRC="画像のURL">


これが超貴重なタグ情報の一つです。僕自身の改良によって生み出されました。

タスクバーにはアドレスが表示されない隠れリンク
(下記の5文字のどれかをクリックするとトップに行くよ!)

ぷよ ーん

上記の表記方法は以下の通り
ぷよ<a onClick=window.open("http://plaza.rakuten.co.jp/corectersl100/")>よ</a>>ーん

要するにリンクタグの上級版です。
<a onClick=window.open("リンク先")></a>
で成り立っています。
()の中は””です。

これで更なる隠しリンクがみなさんのサイトに訪れることになるでしょう!!
そして当サイトのパズルクイズ企画への隠しリンクにも対応できるでしょう。

このページにはとりあえずこれで終わりです!


© Rakuten Group, Inc.
X
Design a Mobile Website
スマートフォン版を閲覧 | PC版を閲覧
Share by: