リンクの仕方と画像表示


まったくの初心者で思いつきでHPをはじめた私にとってはまさに外国語、
というより宇宙人の言葉でした。
ですから、初心者向けに、初心者(私)が、タグの説明してみます。
分からない所はたぶん同じでしょうから(笑)

 とりあえず楽天さんのヘルプで出る、基本的なタグについて順に・・・。

●HTMLとは何ですか?

・HTMLとは、ホームページ上で文字や画像をどのように表示するか定義するための言葉です。
・タグと呼ばれるカッコで文字などをくくることでデザインや大きさを変えたりすることができます。
・タグは「<」と「>」ではさまれた<○○○○>のような形をしており、デザインを変えたい文字などを
「<○○○○>HTMLを適用させる文字列</○○○○>」のようにくくることで機能します。
・例えば、文字をセンタリング(中央揃え)したい場合は<center>タグを使用し、
「<center>センタリングする文字列</center>」のようにすることで
文字をセンタリング(中央揃え)する事ができます。

 さて、最初の文がこれです。分からないでしょ(^_^)v
分からなくて当然!ここはさらっと流しちゃいましょう!
やっていくうちに「あぁ、そういうことだったのね!」って理解できる時がきます。


●他のページにリンクを張りたい

[HTMLタグ] 「楽天市場へリンク」

このタグはこれです。<a href="http://www.rakuten.co.jp">「楽天市場へリンク」</a>

 自分のホームページを他のホームページとリンクをさせたい時は、
<a href="リンク先のアドレス">リンク先のホームページの名前</a>と書くと リンク先のHPの名前を
クリックするとそのページにジャンプできるようになります。
(アドレスとは、楽天市場の場合「http://www.rakuten.co.jp」のようにhttp://で始まるものをさします)
後の「ここにアドレスを入力」という部分にリンクしたいページの アドレスを
入力してみてください。(http://から全て)

<a href="http://www.rakuten.co.jp">「楽天市場へリンク」</a>

と書くと... 「楽天市場へリンク」
のように表示され、「楽天市場へリンク」をクリックするとそのページから楽天のHPに移動します。

 このリンクって、結構便利でよく使います。これは覚えておいた方がいいものですね(^_^)v
ちなみに、他の方のHPに飛ぶだけではなく、自分のHP内の他のページへでも、
リンクさせて飛ぶことができます。
楽天さんの説明のリンクを使ってみますと、クリックすると、元の画面がリンク先の
ページにとって変わります。
でも、これをやると戻って来た時に自分でカウンター回してしまうこともあります。
アクセスが一つ増えて嬉しいのなら別ですけど、そうとばかりはいえませんよね。(笑)
ですから、新しいページをもう一つ開く方法をステップアップでやってみましょう!

 リンクのさせ方。(バナーとかいろいろ)まずはバナーとか、画像から飛ぶ方法です。
コピーして画像の倉庫に取り込んだバナーや、ご自分の画像写真を使う場合。
<a href="リンク先HPアドレス" target="_blank"><img src="バナーとかの画像"></A>
画像をクリックすると、リンク先アドレスに飛びます。と言う指示のものです。
ちなみに画像だけではなくて、文字からもリンクで飛ばせることができます。
<a href="アドレス" target="_blank">あ</A>
これだと「あ」をクリックするとアドレスに飛びます。
参考までに、「target="_blank"」 は、新しくページを開いて飛ぶという指示です。
これを入れないと、今のページが指定されたページに変わってしまいます。
<img src="バナーとかの画像">は、画像の倉庫で画像をクリックすると
出るものすべてをコピーでいれます。

 追加情報です。バナーなど画像つきでリンクを貼った時に回りの枠線を消せます。 
楽天のサイトデザインのリンク色で指定してる色が画像にも表れて、
見た目がよくない場合に使うと良いと思います。
普段どおりに<a href=リンク先><img src=画像ファイル名></a>の順に
書いていきますが、imgタグのファイル名の後ろに半角で1マス空けて、
border=0と書くと、この枠線が消えます。(^_^)v
つまり、<a href=リンク先><img src=画像ファイル名 border=0></a>
という形になります。その実例です。
画像を入れたタグはこうです。
<IMG SRC="http://plaza.rakuten.co.jp/img/user/80/63/1458063/54.gif" width="88" height="31" alt="ガリ" border=0" >
この、borderの部分の数字を変更してみます。どう、面白いでしょう?

ガリ これはborder=0

ガリ これはborder=2

ガリ これはborder=5

ガリ これはborder=10(笑)

さすがにこれをborder=20以上にしたら笑えますよ( -_-)=○()゚O゚)アウッ!


●画像を表示したい/貼りたい

[HTMLタグ]

このタグはこれです。
<img src="http://plaza.rakuten.co.jp/img/hirobatitle.gif">

※画像の倉庫に登録してある画像は簡単に表示することができます。詳しくはこちらをご覧ください。
※他のページ等からの画像の無断転写など、著作権に違反した利用は禁止されています。

 画像を表示したい部分に <img src="画像のアドレス"> と書くと画像を表示できます。
アドレスとは、「http://www......co.jp」のようにhttp://で始まるものをさします。
画像の場合は、「.gif」、「.jpg」、「.png」でアドレスが終わっている必要があります。
(「.htm」、「.html」、「/」で終わっているものは使用できません)
「画像の倉庫」に登録してある画像は簡単にタグを表示することができます。

<img src="http://plaza.rakuten.co.jp/img/・・・・・.gif">

と書いて、貼り付ければ、その画像が表示されます。

 これはいかがでしょうか。画像って、大体一つは入れたいですよね(^_^)v
画像の倉庫に入っているものを、画像を選んでダブルクリックすれば
下のほうにタグが出ますので、それをそのままコピーして、つけたい部分に
貼り付ければOKです。ページを確認するとそこにちゃんと画像が載るはずです。
ただ、画像の倉庫に入るようにもとの画像の大きさを変えるほうが大変だと思います。




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