i


第11回ホームページ勉強会 
 第100日目 開催:2024年 9月26日


 第11回ホームページ勉強会では、リンクに関して5回ほど関連説明を実施してきましたが、リンクそのものの全般的な説明は実施していなかったようです。

 今回の第100日目のホームページ勉強会では、あらためて「リンクの種類と方法」とリンクの「ターゲットの種類」について勉強して見ましょう。
 

リンクの挿入

ホームページでリンクを挿入し、別ページへ移動することができます。

目 次(リンク付き)
「URLへ」
「ファイルへ」
「ラベルへ」
「メールへ」
「パスワード付きリンク」・・・パスワードは「pass
「URL 別名」
リンクの「ターゲットの種類」
「ページ・トップへ戻る」

 文字列や画像をクリックすると移動させたい文字列を、選択し文字色を反転させ、右クリックでリンクの
挿入を選択すると下記画面になり、ファイルへが選択されています。


リンクを挿入する方法は下記の方法他があります。

 『URLへ』・・・・・・・・・・・・ホームページアドレス(URL)を直接指定する方法
           移動したいページが、相互リンクするページなど外部管理のページへ移動する場合に
           使用します。
          (例:http://www.shiriai.net.jp など)

 『ファイルへ』・・・・・・・・・ファイル名をリンク先として指定する方法
           移動したいページが、同一管理下のファイルに移動する場合に使用します。
          (例:slide.html、document.html など)

 『ラベルへ』・・・・・・・・・・ページ内の特定場所を指定する方法
          (例:第1章へ、第2章へ など)

 『メールへ』・・・・・・・・・・特定のメールアドレスへメールを送付する方法
          (例:mail lto ***@gmail.com、 ***@###.co.jp など)

 『パスワード付きリンク』・・・・・・リンク先へ進むにはパスワードの入力が必要とする方法
          (例:mail lto ***@gmail.com、 ***@###.co.jp など)

 『URL 別名』・・・・・・・・・特定のよく使うURLに名前を付けておく方法

          (例:別名=Home URL=index.tml など)

また、リンクの『ターゲットの種類』についても、勉強して見ましょう。

ご参考:
 『ページ・トップへ戻る』・・・・・・・リンクではないが、このページでも使っているページ・トップへ戻る方法



1.「URLへ」

次は、URLを指定してリンクを挿入する方法を説明します
1.インターネットブラウザで、「リンク先ページ」を表示する
  ※今回はChromeで作業をします。
※この時、他のインターネット画面が開いているとURLを間違える場合があるので、
  クリックしたときに飛ばしたいページのみを表示しておきましょう。
赤四角で囲んだURL(http://・・・またはhttps://・・・)をコピーします。


2.ホームページビルダーでリンクを挿入したい「リンク元」ページを開く 
  ※今回はトップページ(index.htm)を編集します。
ファイル→開く→「index.html」

(下記ページの緑で囲んだ部分にリンクを挿入します)


3.挿入箇所を指定し、リンクの挿入をする
   リンクを指定したい文字列を、マウスでなぞり範囲を選択→反転した上で「右クリック」→
リンクの挿入」をクリック


「属性画面」→「ファイル名にコピーしたアドレスを貼付け」→「ターゲットはリンク後の表示方法を設定」
リンク先URLがファイル名に入ったことを確認して「OK」クリック


4.リンク先を確認をする
  「プレビュー」タブ→リンク挿入した文字「第11回勉強会」をクリック


プレビューに「不動産リンク集」が表示されました。


5.上書き保存をする 



2.「ファイルへ」

1.ホームページビルダーでリンクを挿入したいページを開く
  ホームページビルダー起動→ファイル→モードを指定してページを開く→標準モードで開く→「index.htm」

※今回はトップページ(index.htm)を編集します。
(下記ページの緑枠に挿入します) 

2.挿入箇所を指定し、リンクの挿入をする
   リンクを指定したい、文字列をマウスでなぞり範囲を選択→反転した上で「右クリック」→
「リンクの挿入」クリック


3.ファイルを選択する
  「属性」画面→「参照」→「ファイルから..」→
→「link先.html」→「開く」クリック

※今回はリンク先ページ「link先.html」へのリンクを貼ります。
※ファイルへのリンクは、リンクを貼るページから見てファイルがどこにあるかを指定する方法です
 ファイルがアップロードされている場所(階層)によっては、フォルダ名の指定も必要になります
 (例:「A」フォルダのpage.htmlというファイルの場合→A/page.html を入力するようになります)


ファイルの場所「フォルダ指定」→「ファイル名」→「開く」をクリック。
(この例では「100.Link」フォルダー内の「main.html」)


属性タグにファイル名が入力される。「ターゲットの種類を選択」→「OK」をクリック。


ファイル名に「main.html」が入ったことを確認→「OK」クリック

4.リンク先の確認をする
  「プレビュー」タブ→リンク挿入した文字「第100日目2024年 9月26日」クリック


プレビューに「100日目のページ」が表示されました。

5.上書き保存をする



3.「ラベルへ」

1.リンク先にラベル付けを実施
   リンク先としたい行の「1文字~好きな範囲を選択」→「右クリック」→「リンクの挿入」→「ラベルを付ける」
ラベル欄にお好みの英数字を入力しOKをクリック(例えば:第1章は1とし、第2章は2とする)

このラベル付けを必要に応じて何箇所か実施する。
2.ラベル先へのリンクの挿入
  リンク元の「1文字~1行のお好きな範囲を選択」→「右クリック」→「リンクの挿入」→「ラベルへ」
ラベル入力枠内に先ほど付けたラベル名を入力か、一覧から選び、「OK」をクリック

ラベル欄にお好みの英数字を入力しOKをクリック
3.他のURLなどから「ラベルへ」リンクを挿入
  他のURLなどから「ラベルへ」リンクを挿入する場合には、そのページのURLに#(ハッシュマーク、イゲタ)とラベルを付けます。

例えば、この勉強会のHPとはURLが全く異なる、三宅のHPの臥牛山のページのURLに#5を追加して
http://nasudake.starfree.jp/Yama/181120Gagyuuzan/Gagyuuzan.html#5と記載すると、臥牛山トレッキングの5項目へリンクします。



4.「メールへ」
  ページ内に『メールはこちらへ』などとかかれていたのを見たことはありませんか?

この場合、「メールマークを右クリック」→「リンクの挿入」→「メールへ」をクリックすると下記に
なりますから、「宛先」欄に、代表者や管理者などのメールアドレスを記載して「OK」をクリックします。


この設定で、閲覧者がメールマークをクリックすると代表者や管理者宛にメールを送付出来ます。



5.「パスワード付きリンク」

1.リンク先の設定 
  リンク先は、普通のアドレスで、「ラベル先」であればラベルを付けておきます。
2.リンク元(ここからリンク先に飛ばすという場所)の設定
  リンク元を右クリックし、パスワード付きリンクの挿入をクリック


「属性画面」が開くので、「パスワードが正しいときに表示されるリンク先」、「パスワード」と「ターゲット」を選択して「OK」クリック。


「パスワード付きリンク」へアクセスしようとした場合、下記の様な窓が開きます。
パスワードを入力して「OK」をクリックすると、リンク先が開きます。



       
6.「URL 別名」
       
  リンク先を別名で登録しておくと[URL 別名]タブの一覧に表示されます。何度も使うリンク先を登録しておくと便利です。
例えば、ページごとにindex.htmlへ戻るリンクを作るとき、リンク先:index.html、別名:homeで登録しておきます。
次回からは[URL 別名]タブを開いてHomeを選択します。

リンク元を範囲選択して、「挿入」→「リンク」で「URL 別名」をクリックすると、下記画面になります。
リンク先として2件目を選ぶ場足は、2件目の別名A1「件名」を選択し、A2「ターゲット」の種類を選択して、A3OK」をクリックします。


新しく「URL 別名」を登録する場合は、B1「編集」をクリックすると上記右側の画面が開きますので、
B2「別名」とB3「URL」を記入してB4「登録」、B5「OK」をクリックします。更に右画面でもB6「OK」をクリック。



7.リンクの「ターゲットの種類」
 
 リンクのターゲットは、リンク先のファイルをどのフレーム(ウィンドウ)に表示させるかを決めるときに使います。

 フレームとは、左側にメニューがあり、そのメニューをクリックすると
 左側のメニューは固定で右側だけページが変わるような仕組みのことです。




 ホームページ・ビルダーでは、リンクのターゲットとして以下の 4種類を選択できます。

 ・新しいウィンドウ
 ・親ウィンドウ
 ・同一ウィンドウ
 ・全画面


 ここでは、各ターゲットの動作の違いを説明します。


  リンクのターゲットの意味

 リンクのターゲットは、リンクの設定をしたい対象の指定→右クリック→リンクの挿入→属性の画面で決められます。




 ターゲットには、以下のような違いがあります。


1.新しいウィンドウ

 新規にウィンドウ画面(ブラウザ画面)を起動させ、その中にリンク先ページを表示します。




2.親ウィンドウ

 現在ページが表示されているウィンドウ (フレーム) の親ウィンドウ (フレーム) に表示します。




※親ウィンドウについては、「親」という概念が必要になるため、フレームを複数設定しているような場合に有効です。





3.同一ウィンドウ

 リンク元ページが表示されているウィンドウ (フレーム) 内に、リンク先ページを表示します。
 ターゲットを何も指定しない場合と同一の効果になります。




4.全画面

 現在の画面がフレームで分割されていても、フレームを無くして、リンク先ページは全画面で表示します。




※フレームを全く使用していない場合は、「新しいウィンドウ」以外の項目はすべて同じ結果表示になります。
(=ターゲットを何も指定しない場合と同一の効果になります)

 ここをクリックすると上記のターゲット別の表示が体験できます
       

ご参考

8.「ページ・トップへ戻る」
  下記の様に、</head>の直前に<!-- headここから -->・・・・・・<!-- headここまで -->を挿入し、
<body>の直後に<!-- bodyここから -->・・・・・・<!-- bodyここまで -->を挿入し、
「style.css」「script.js」を下記からダウンロードし、 同一フォルダー内に置きます。
    :
    :
<title></title>
<!-- headここから -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" language="JavaScript" src="Data/CheckPassword80.js" charset="Shift_JIS"></script>
<link href="style.css" rel="stylesheet">
<!-- headここまで -->
</head>
<body background="Data/wallppr078.gif">i
<!-- bodyここから -->
<script src="script.js"></script>
<p id="pageTop"><a href="#"><i class="fa fa-chevron-up "></i></a></p>
<!-- bodyここまで -->
    :
    :
 
  cssとjsはここからダウンロード→  「style.css」  「script.js」 
   
アクセスカウンター アクセスカウンター