小技的なもの ~リンクその1

.

●リンクの移動先をページの「どこか」にする方法

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

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

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

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

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

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

 

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

           (リンクをクリックしてください)

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

先にご説明をします。

 

●ポイント●

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

楽になりますよ♪

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

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

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

どれか1つでOK★

 

●リンクの張り方●

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

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

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

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

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

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

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

 

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

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

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

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

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

 

 【5】その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="☆"

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

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

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

 

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

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

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

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

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

    というわけで!

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

    ●リンク用タグ●

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

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

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

 

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

    ★→id またはname

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

 

    ●Sampleの場合

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

 

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

 

●idとnameの違い。

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

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

コーヒー

テーブルへとびます!

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

役に立ったら呟いてあげて下さい(・∀・)ノ
Twitter「つぶやく」ボタン

コメントをお書きください

コメント: 7
  • #1

    hanasanpo (木曜日, 25 3月 2010 11:21)

    すごい!どうもありがとうございます!今晩仕事から帰ったらさっそく試してみます!

  • #2

    hanasanpo (木曜日, 25 3月 2010 21:34)

    試してみました! できました! 応用として、表でもできるのかな? これも同じ要領で試してみたら、できました! なんだか面白くなって来ました! どうもありがとうございます! 

  • #3

    硯 さくら (土曜日, 27 3月 2010 00:59)

    無事に設定できたようで何よりです!!

    ちなみにテーブルはデフォルトの状態ではidがついていなかったですので、自分でidをつける必要があるようです。
    idをつけたらリンクできました。
    ↑のコーヒーの画像の下にあるリンクが実際にテーブルに自分でidをつけた場合のサンプルになっています。
    ただ、idはclassと違って1ページに1回なので明らかにカブらないidをつけたほうが無難かもしれません。
    そのうちまたページを新しく追加する予定です(・ω・)
    ちょうど週末なので!

  • #4

    hanasanpo (火曜日, 30 3月 2010 07:31)

    ありがとうございます。
    はい、テーブルはデフォルトの状態ではidがついていないですね。そこで元の表を作成したExcelにid★と<a href="#★">リンクテキスト</a>を追加して間違えにくくし、1つづつこぴーしてHTMLに貼付けて行きました。 教えていただいた方法で作成した表がこのページの一番下にあるものです。気が向いたらちょっと覗いてみて下さい。(^^)
    http://www.hanasanpo.org/花さんぽ/3-14-高尾山-裏高尾/

  • #5

    硯 さくら (木曜日, 01 4月 2010 00:23)

    凄く充実したサイトですね!(・∀・)
    こんなステキなサイトのお手伝いにちょっとでもなれたなら嬉しいです★

  • #6

    杉山 基樹  (土曜日, 02 6月 2012 21:38)

    出来ました。なぜかものすごく嬉しいです♪( ´▽`)

  • #7

    taguchi-tax (水曜日, 03 10月 2012 15:11)

    できました!感謝です。何度も閲覧して勉強させていただいています。