229538
ホーム \| 日記 \| プロフィール	【フォローする】【ログイン】

七鍵＠楽天

【毎日開催】

15記事にいいね！で1ポイント

10秒滞在

いいね! --/--

次の日記を探す

おめでとうございます！
ミッションを達成しました。

※「ポイントを獲得する」ボタンを押すと広告が表示されます。

コメント新着

うしまる＠@ Re:タグを覚えよう【第１５回目】　-　中央寄せ表示の際の小技(08/21) タグの検索でぐぐってたらコチラに辿り着…

k.kyouka@ すきやき占い『しいたけ』の重要度27% 『しいたけ』…

なな@ Re:迷っています(11/01) レオ　がいいですよ☆★

マロン@ かわいいキュート

ｆｏｏｌｉｓｈ☆ｆｏｏ@ Re[1]:お久しぶりです。(07/15) ＞実演を踏まえてテストをしておりました…

バックナンバー

May , 2024
Apr , 2024

Mar , 2024

フリーページ

HTMLタグに挑戦

< 新しい記事

新着記事一覧(全310件)

過去の記事 >

Aug 12, 2004

タグを覚えよう【第７回目】　-　ページにリンクなるものを作ってみよう

テーマ：タグに挑戦！(102)

カテゴリ：タグ教室

第６回で本日の話題を公募したにもかかわらず・・・
リクエストゼロ。
ふふふ(´･ω･`)

まぁ、しょうがないので自分で頭をひねって考えました（笑
そこでふと思い出したのが題名にも書きました「リンク」の解説。
皆さんリンクって知っていますか？
文字や画像をクリックすると別のページに飛ぶ・・・あれのことです(〃⌒▽⌒)
「楽天」でＨＰを作っていたら、
特にタグを記述しなくてもリンクって作れてしまいますよね。
ただ、自動でできてしまうからその分覚えにくいって欠点もあるでしょう。
そんなわけで今回はリンクの作り方を勉強します(〃⌒▽⌒)

例のごとく、まずあじけのないリンクのご紹介。

例）
<a href="http://www.7key.jp/" target="_blank">ここをクリックしてみてー</a>

表示結果）

ここをクリックしてみてー

実際にクリックすると「http://www.7key.jp」というページにジャンプしたと思います。
「href」で指定するのは見てのとおり、ジャンプしたいページのＵＲＬですね(〃⌒▽⌒)
（URLについて詳しく知りたい方はこちらを参考にして下さい。）
そして、「target="_blank"」と言う記述は、新しいページを別の窓で開いてね(￣▽￣人)って指定となっています。
なので、リンクを作った窓と同じ窓で新しいページを開きたい場合は、
この「target="_blank"」という記述を削除してやって下さい(〃⌒▽⌒)

画像を使ったリンクも上の例を応用すれば簡単ですね。

例）
<a href="http://www.7key.jp/" target="_blank"><img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg"></a>

表示結果）

文字であろうが、画像であろうが同じことですよね(〃⌒▽⌒)
でもちょっと待ってください。
なんだか画像の周りに線が表示されていますよね。
この線を無くなしてしまいますとリンクであることが分かりづらくなるのですが・・・
あったらあったで邪魔ですよね（笑
不要な場合は取っ払ってしまいましょう(〃⌒▽⌒)

例）
<a href="http://www.7key.jp/" target="_blank"><img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" border="0"></a>

表示結果）

「IMG」タグの中に「 border="0"」という記述を追加するだけです。
これは画像の周りの線幅を「０」にしてね(￣▽￣人)　ってことになっています。

リンクの説明はこれでおしまいです。
よく使うタグだけあって、使い方も限られていますね。
特に「楽天」内では更に機能縮小されていまして、あまり大それたことができません（笑
まぁ、基本をしっかり押さえて、もしものときに困らない程度に覚えておきましょう(〃⌒▽⌒)

ただ、このまま終わるにはあまりにもあっけないので
ページ装飾タグを載せておきます。
コピーしようが転載しようが好き勝手使ってください(〃⌒▽⌒)
確認も許可も不要ですが、分からないことがあれば対応はします(￣^￣*)
なんて親切なページなんだ(〃⌒▽⌒)

例1）

<div style="border: dotted 4px #ff00ff;width:165px;">
<marquee behavior="alternate" scrollamount="20" style="width:160px;height:16px;">
◆
◆
◆
◆
◆
◆
◆
◆
◆
◆
◆
◆
</marquee> 
ここに文字を記入してー
 <marquee behavior="alternate" scrollamount="20" style="width:160px;height:16px;">
◆
◆
◆
◆
◆
◆
◆
◆
◆
◆
◆
◆
</marquee>
</div>

表示結果）

◆◆◆◆◆◆◆◆◆◆◆◆
ここに文字を記入してー
◆◆◆◆◆◆◆◆◆◆◆◆

例2）

<marquee scrollamount="1" direction="up" behavior="alternate" style="width:212px;height:16px;">
◆
◆
◆
◆
◆
◆
◆
◆
◆
</marquee> 
ここに文字を記入してー
 <marquee scrollamount="1" direction="up" behavior="alternate" style="width:212px;height:16px;">
◆
◆
◆
◆
◆
◆
◆
◆
◆
</marquee>

表示結果）

◆◆◆◆◆◆◆◆◆
ここに文字を記入してー
◆◆◆◆◆◆◆◆◆

いかがでした？
あまり見つめすぎると気持ち悪くなると思いますのでほどほどにね（笑

明日の予定は・・・
何も考えていません(´･ω･`)
気分次第で何か考えますので、また来てくださいね(ﾟ▽^*)ﾉ⌒☆

お気に入りの記事を「いいね！」で応援しよう

最終更新日 Aug 12, 2004 01:12:47 AM
コメント(0) | コメントを書く

[タグ教室] カテゴリの最新記事