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

.

●項目Googleマップへ移動するリンクのidに注意!

●別のページのどこかにある項目にもリンクを張ります!

小技その1では、「同じページ」にある項目へ移動するリンクを作成する方法をご紹介しました。
今回は「別のページ」にある項目へ移動するリンクを張っちゃいます!
方法はほとんど「同じページに~」と一緒ですよ~♪

さて、今回は「項目・Googleマップ」に移動するためのリンクを張ります。
何故Googleマップを例にするかといいますと、Googleマップの場合、idはひとつしかないの

ですが、 もしnameを間違えて使うとややこしいことになるため説明も兼ねてご説明をさせて
頂きます。

それでは早速見てみましょう!!

《Googleマップidの手順》
【1】まずはリンクの移動先であるGoogleマップのあるページを表示してください。
   (編集モードでなく、プレビューモードで表示)
   そして、ブラウザ上部のメニューバー>表示>ページのソースを表示。
   または、ページの項目以外の場所で右クリックでメニューを開き、ソースを表示します。
【2】そしてリンクの移動先になるGoogleマップのidを探します。
   ●Googleマップのidを探すポイント●
   1.idに「gmap」と入っている。(GoogleMAPの略と思われます)
   2.gmapと入っているidは1つだけです!
     →gmapと入っている"gmap_iframe_"で始まるものはname属性です。

      リンクされませんので、使わないで下さい。
      (多分、いかなる場合でもリンククリックしても移動してくれません…)
      "gmap_form_"とついているidをコピーしてください。

   ●とあるページのGoogleマップのHTMLソース●
   <div class="n">
   <iframe name="gmap_iframe_3720301158" src="" width="100%" height="400px" scrolling="no" frameborder="0" marginwidth="0" marginheight="0"></iframe>
   <form action="http://web19.jimdo.com/app/module/gmap" target="gmap_iframe_3720301158" method="post" id="gmap_form_3720301158">

   上のサンプルの場合、"gmap_form_3720301158"を使います。

《別ページの項目へ移動させるための手順》
【1】idのコピーは、上のGoogleマップの手順または「同じページ」の項目へリンクの説明ページをご参照下さい。
【2】idをコピーしたら、メモ帳などに別途貼り付けておくことをオススメします。
【3】「同じページ」の項目へリンクを張れた方には、この別ページの項目へのリンクはとってもカンタン。
   これが、「同じページ」にある項目へのリンクタグでしたね。
   <a href="#★">テキスト</a>
   これに別ページのURLを付け足すだけです!
   タグにするとこんなカンジ。
   <a href="ページURL#★">テキスト</a>

   ●サンプル●
   さっき上でコピーしたGoogleマップのidと、そのGoogleマップがあるページURLが

   入力されています。
   <a href="/項目の使い方/項目-googleマップを使うよ/

    #gmap_form_3720301158">テキスト</a>

   さて、「同じページの項目へリンク」の際はタグをコピペして頂きました。
   しかし、今回はもっとカンタンです。
   普通にリンクを張る方法がありますよね?文書を入力するエリアの上にあるボタンです。
   今回はそのボタンを使います!
   まず、テキストに移動先の項目がある「ページ」へのリンクをそのボタンを使って設定します。
   テキストにページへのリンクが張られましたね。

   そうしたら、ツールボタン「HTML」を押して下さい。
   そして、先ほど設定した「ページへのリンク」を探します。
   探したらその後ろに #★ を打ち込み、「更新」を押せばOKです!
   (★にはidを入れてくださいね)

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

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

コメント: 8
  • #1

    greenkitten (金曜日, 03 6月 2011 19:32)

    普通にリンクを張る方法 とは?
    超初心者なもので・・・

  • #2

    硯 さくら→Jimdo●図解操作方法 (土曜日, 04 6月 2011 01:57)

    こんにちは!
    表現が上手でなく申し訳ないです(;・∀・)
    普通にリンク、とは文章を編集できる項目で使うことができるリンクの張り方を指しています。
    詳しくは↑の普通にリンク(略)のところにリンクを貼ったのでそちらをクリックして下さいませ。リンクの張り方のページに移動シマス。

    1)その移動したページの方法でクリック&コピペだけで移動先のページへリンクをはります。
    2)そしてその後HTMLというボタンを押し、移動先のURL(のタグ<>でかこまれた部分)を探します。そこにid(#idの名前)を追加すればOKです。

  • #3

    hakodate-lasalle-rugby (日曜日, 30 10月 2011 21:50)

    こんばんは。現在ラグビー部後援会のHPを作成してます。
    お蔭様で、別ページにリンクが1つ貼れました。
    「試合結果一覧表→ それぞれの試合詳細」 にリンクを飛ばしたいのですが、試合詳細の一番上にリンクを貼ってしまったので、その下の2番目の試合詳細にリンクを貼ろうと思っても、IDがないので貼れません。
    nameでやってみようかとも思ったのですが、2番目目の見出しに飛ばしたい場合は、HTMLを編集するボタンがないのでできませんでした。

    http://www.hakodate-lasalle-rugby.com/ です。お時間のある時に見てみてください。
    宜しくお願いします。

  • #4

    硯 さくら→Jimdo●図解操作方法 (月曜日, 31 10月 2011 22:41)

    こんにちは。お問い合わせありがとうございます。
    ドンピシャな解決方法なら、見出しに使われているタグをそのままHTMLの項目にコピー&ペーストし、そこにnameを入れる方法だと思います。
    見出しのタグはこんな感じです。

    <div class="n j-header"><h3>◎201.9.21 全国高校ラグビー全道大会 1回戦</h3></div>

    これを
    <div class="n j-header" id="★"><h3>◎201.9.21 全国高校ラグビー全道大会 1回戦</h3></div>
    にする方法です。

    見出しのタグを作成するのが自分には合わないなぁと思ったら、少しばかりリンク先の表示がズレますが、見出しの上か下のどちらかに次のタグを入れて下さい。

    <br id="★">

    これだけです。見出しの上のほうが見出しがきちんと見えるので貼付けるにはもってこいだと思います。
    <br>というタグはご存知やもしれませんが改行させるタグなので1行分のスペースはできてしまいます。この1行分の改行があってもいいや〜と思えるならこちらのほうが簡単に設置できるのでおすすめです。
    よかったら試してみて下さい(・∀・)

  • #5

    hakodate-lasalle-rugby (水曜日, 02 11月 2011 11:22)

    早速のご回答ありがとうございます。
    試してみたらどちらも簡単にできました\(~o~)/
    とても助かりました。これで完成に向けて一歩前進です。
    ありがとうございました。

  • #6

    La luce (月曜日, 02 7月 2012 20:23)

    他のホームページに飛べるように、バナーを作成して、そこからリンクに飛べるようにしたいのですが、可能でしょうか?

  • #7

    硯 さくら→Jimdo●図解操作方法 (火曜日, 03 7月 2012 00:39)

    >LA luceさん

    可能ですよ!
    でも、バナーはご自身でご用意頂く必要があります。
    下記ページに説明を追加したので良かったらご参照下さい。
    項目編集方法
     ∟項目ー写真
        ∟写真にリンクを貼る
    という手順でもご覧頂けますが、ご面倒だと思うので該当ページのリンク貼りますね(´∀`)
    http://tocotoco.jimdo.com/%E9%A0%85%E7%9B%AE%E7%B7%A8%E9%9B%86%E6%96%B9%E6%B3%95/%E9%A0%85%E7%9B%AE-%E5%86%99%E7%9C%9F/%E5%86%99%E7%9C%9F%E3%81%AB%E3%83%AA%E3%83%B3%E3%82%AF%E3%82%92%E5%BC%B5%E3%82%8B/

    とりあえず最新の画像をつけてみたのですが、他のページと違って、手順ごとに画像に番号などを振る時間が取れなくて申し訳ないです(´・ω・`)
    ホントは①、②という感じでご説明できたら良かったんですが…。

  • #8

    硯 さくら (火曜日, 03 7月 2012 00:41)

    >La luceさん
    すみません…。自動リンクにならなかったので、このコメントの私の名前をクリックして下さいませ。