.

　ホームページを作っていると、例えば、レストランやカフェなどのサイトで、ランチなどの

メニューのページを作ったりしますよね。

そんな時に、メニュー（商品名）をクリックすると、その商品の写真や詳細にリンクが張られて

いて、移動すると便利！って思ったことはないでしょうか？

というわけで、今日はそんなリンクの使い方をご紹介します。

※結構回りくどいので他にもう少しスマートなやり方があるかもしれません。

●Sample●　→　作業中に飲んでいるコーヒー。

　　　　　　　　　　　（リンクをクリックしてください）

リンククリック後の移動先をリンク（↑）の近くにすると、移動を実感していただけないので、

先にご説明をします。

●ポイント●

先にタグを読むことに慣れていない方は、次のいずれかの方法を講じておくと後々の作業が

楽になりますよ♪

　方法１→写真の場合は「サブタイトル」をつけておく。

　方法２→写真の場合は「代替テキスト（Altタグ）」をきちんとつけておく。

　方法３→リンクの移動先に「移動先↓」など目印をつけておく。

どれか1つでOK★

●リンクの張り方●

　【１】まず、リンクを張る文章を打ち込んでおきます。Sample（↑）だと「作業中に～」の部分。

　【２】画像をアップロードします。

　　　この時に↑の準備の方法３つの内、どれか１つでもやっておくと楽です。

　　　サブタイトルについては　【項目】写真・サブタイトル　をご参照ください。

　　　代替テキストは、「管理編集メニュー」＞設定　＞検索エンジン　の中にある

　　　「Altタグ」から設定をできるようにすると、サブタイトルの下に「代替テキスト」という

　　　Altタグを入力する項目が追加されますのでそこから行ってください。

　【３】アップロードが終わったら、ページを「プレビュー」モードにします。

　【４】プレビューモードにしたら、ブラウザのメニューバー＞表示　＞ページソースの表示

　　　　またはページの画像やリンクがないところで、右クリック＞メニュー　＞ページの

　　　 ソースを表示。どちらの方法でも構いません、ソースを表示してください。

　　　　ソースというのはそのページのHTML文を見ることができます。

　【５】そのHTML文書から、リンククリック後の移動先となる部分を見つけましょう。

 　　　ちなみに、上のSampleにはAltタグとして「コーヒー」と入力してあります。

　　　　これがSapmleのHTMLソースです。<img ～>というのが画像のタグです。

　　　　そして、画像にはAltタグ「コーヒー」がついていますので、画像が複数あっても、

　　　　目的の画像をAltタグを見ることにより見つけることがカンタンになっています。

　　　　●ソース●

　　　<div id="cc-m-image-3719463358" style="width:120px; float: left;">
　    <img src="http://tocotoco.jimdo.com/s/cc_images　　　

　　　　/cache_2567676758.jpg?t=1269430534" id="image_2567676758"

　　　　alt="コーヒー" width="120" height="200" name="image_2567676758" />

　　　</div>

　　　　●ここまで●

　　　　このHTMLソースで何をするかといいますと、idまたはnameを知ることが目的です。

　　　　Jimdoではidやnameの設定を自分で行うとすれば、画像などを挿入する際に項目を

　　　　使用せずに行う必要があります。（多分！）

　　　　Sampleの場合、太字になっている部分がidとnameです。

　　　　このimage_2567676758をコピーしておきます。

　　　　※もちろん、このidもnameもここで使っている画像の名前なので、画像により異なります。

　　　　id="★"　name="☆"

　　　　この★または☆の部分をコピーしてくださいね♪

　　　　メモ帳などに一時的に貼り付けておくことをオススメします。貼り付ける前に

　　　　別の文書をコピペしていただくので消えてしまうためです。

　【６】それではいよいよリンクを張ります。

　　　　ここで注意してほしいのは、リンクを張る際に文書入力エリアの↑にある普段使っている

　　　　リンクを張るボタンをクリックしないこと。これは使いません。

　　　　使うと自動的にhttp://～となってしまったり、新しいタブ・ウィンドウで開く設定になる

　　　　ため、コピペのほうが楽だからです。

　　　　というわけで！

　　　　文書入力エリアのツールから「HTML」のボタンをクリックしてください。

　　　　●リンク用タグ●

　　　　<a href="#★">リンクテキスト</a>

　　　　このタグをコピペでリンクを張る部分に貼り付けてください。

       idまたはnameだけでなく#が必要です!

　【７】上のリンク用タグにはそれぞれ次のように入力をしてください。

　　　　★→id　またはname

　　　　リンクテキスト→リンクを張る文書。Sampleの場合「コーヒー」の部分。

　　　　●Sampleの場合

　　　　作業中に飲んでいる<a href="#image_2567676758">コーヒー</a>。

　【８】そして文書を保存で完了です。

●idとnameの違い。

　name属性は、id属性に対応していない古いブラウザでの閲覧を視野にいれる場合に

　使うものだそうです。　→参考サイト：HTMLタグ

テーブルへとびます！

（border="1"のサンプル　へ移動するリンク）