はてなブログのヘッダーの下に「リンクを張る」件につき質問や要望（コメント）がありました。
我流（おれ流）ですが、必要な HTMLの基礎の「き」を、あちこちのサイトより引用し作成しました。
基本的には「やさしいホームページ入門」 > HTML入門 からの引用が多いですが、他のWebサイトからも引用しています。リンク先のサイトにも訪れ、知識を広めてください。
なお、まりふのひとの
です。
≪目次≫
ホームページとは
- 引用：ウィキペディア
ホームページという言葉は本来、上記用法1のように ウェブ *1 ブラウザを起動した際に表示されるウェブページの事を指していた[1][3]。それ以外の用法は誤用とされる *2 場合もあるが、しかし現在では上記のように別の意味*3 としても広く使われるようになった[4]。
代表的なウェブブラウザ Internet Explorer、Google Chrome[11]、Mozilla Firefox[12]などでも、本来の用途とされるウェブブラウザ起動時のページは「スタートアップ」「起動ページ」などと表現し、用法1で使われることはなくなってきている。これらのブラウザでは用法2のホームボタンを押した際のページをホームページと呼んでいる。
また、日本やドイツなどの国では用法4、用法5の「ホームページ＝ウェブサイト、ウェブページ」という認識が広く浸透している。法令にもウェブページのアドレスの意で「ホームページアドレス」の語が用いられている[13]。官公庁[14]や企業[15]でもウェブサイトの意味で使われている。誤用であると認識していても、より一般にわかりやすいという判断からホームページという言葉を使用することもある[16]。
和製英語を多く用いる日本において、現在では、もはや用法1以外が誤用とは言い切れない[18]。ちなみに、「トップページ」も和製英語であり、英語圏では通用しない。
HTMLとは
HTMLとは、Hyper Text Markup Language（ハイパーテキスト・マークアップ・ランゲージ）の略で、Webページを作成するためのMarkup（マークアップ）言語となります。
リファレンスではHTMLについて、以下のように説明されています。HTML（エイチティーエムエル、HyperText Markup Language）は、ウェブページを作成するために開発された言語です。 現在、インターネット上で公開されてるウェブページのほとんどは、HTMLで作成されています。今あなたがスマホやPCでみている画面（WEBページ）は、基本的にはこのHTMLという言語（文字）によって作られています。
「Markup:マークアップ」というのは「印をつける」という意味です。文字に印（タグという）をつけていくことでそれぞれ意味づけをして、画像や表を見れるようにすることができるのです。
タグとは
HTML文章（HTMLソース）は、タグと言うものを使って書いていきます。 < と > で囲まれたものをタグと言います。
タグは基本的に開始タグ（始まりのタグ）と終了タグ（終わりのタグ）に分かれています。開始のタグは<タグ名>のように書き、終了タグは</タグ名>のように書き、開始タグと終了タグでひとつのセットになります。
<> は必ず半角文字で書いてください。開始タグと終了タグの間に内容を書いていきます。
<タグ名>この囲まれた部分が内容になります。</タグ名>
はじめに、これからたくさん出てくる 属性 と 属性値 ついて説明します。まずタグのことを 要素 とも言います。これからはタグのことを要素と書いていきます。
要素の中に半角スペースで区切って書かれているものを 属性 と言います。" で囲まれて書かれているものを 属性値 と言います。
基本的にタグ（要素）は、半角文字で書き大文字・小文字のどちらで書いてもかまいません。
- 💡タグ（要素）
半角文字で大文字・小文字は問いませんが、属性値の ” " の中は、半角文字・全角文字、数字・記号等全ての文字が使えます。
ハイパーリンク
- 「リンク」と「ハイパーリンク」の違い（引用：「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典）
リンクは、ハイパーリンクと比較して、もう少し広い意味を持つ用語です。言い方を変えると「ハイパーリンクはリンクの一種である」ということになります。用語 意味 リンク 点と線で構成図を書いたときの線の部分 ハイパーリンク ホームページとかにくっついている、押すと別の場所に移動する仕組み
ハイパーリンクを省略して「リンク」と表現することも多々あります。その場合は「リンク」と「ハイパーリンク」が同じ意味になります。
個人的な使い分け
ホームページ関連で登場するハイパーリンクは「リンク」と表現しています。IT関連に強くない方は、その方がイメージしやすいようなので。
ホームページ以外、例えば Excelのハイパーリンクなどは「ハイパーリンク」と表現しています。メニューにも「ハイパーリンク」って書いてありますからね。
話を本題に移して‥‥ やさしいホームページ入門には、次のように記されています。
- 他ページにリンクする
a要素の href属性 にURLを指定すると、囲んだ部分をリンクすることができます。
<a href="リンク先のURL" title="要素の補足情報">リンクを張る文字列</a>
- <a>タグ（引用：HTMLタグリファレンス）
<A>タグはアンカー（Anchor）の略で、リンクの出発点と到達点を指定するタグです。 リンクの出発点では href属性でリンク先を指定します。
- href="リンク先のURL" ‥‥ href属性でリンク先のURLを指定する。
- title="要素の補足情報" ‥‥ title属性は、要素の補足情報を表す。
- 補足情報は、次の文字列をポイントした時に表示される。サイトによっては表示されないことがある。
- リンクを張る文字列
- </a> ‥‥ 終了タグ
- 要素，属性間は、必ず半角スペースで切る。
💡target属性
- 引用：HTMLクイックリファレンス
target属性はハイパーリンク先のターゲット、つまり、リンク先をどのように開くかを指定する際に使用します。 target属性の値には以下の4種類、または、任意のターゲット名を指定することができます。■リンク先ターゲット（target属性）の値
_self 現在のウィンドウでリンク先を開く _parent 現在のウィンドウの親ウィンドウでリンク先を開く _top 現在のウィンドウの最上位階層のウィンドウでリンク先を開く _blank 新しいタブやウィンドウでリンク先を開く - これはリンク先を、(1)今、見ているページを置き換える（クリック）のか、(2)新しいタブで開く（Ctrl＋クリック）か‥‥ です。
- 私が（時々）使うのは target="_blank" で、これを入れると「新しいタブ」で開きます。
これは閲覧者のためではなく、自分のため‥‥ です…
💡URLとは
- "URL"と"アドレス"の違いは何ですか？（引用：Yahoo!知恵袋 - 2006/7/17）
まったく同じです。
URL 読み方 ： ユーアールエル フルスペル ： Uniform Resource Locator
インターネット上に存在する情報資源(文書や画像など)の場所を指し示す記述方式。インターネットにおける情報の「住所」にあたる。情報の種類やサーバ名、ポート番号、フォルダ名、ファイル名などで構成される。
上記文面に“インターネットにおける情報の「住所」にあたる”とありますが、この「住所」を英語訳すると“アドレス”となる事から、“URL”を“アドレス”と呼ぶ様になったのでしょう。
http://e-words.jp/w/URL.html - はてなブログのURLの例
- 「まりふのひと」の URLは https://ogohnohito.hatenablog.jp/ です。
- このページの URLは https://ogohnohito.hatenablog.jp/entry/2019/03/10/170502 です。
- 1. にリンクを張ると、常に最新の記事が表示されます。
2. にリンクを張ると、何年経っても同じ記事が表示されます。
≪具体例≫
実際に苦労された山口ばあばさんの例です。
<a href="https://sinnjyounohito.hatenablog.com/" title="山口ばあばの日記トップページ">山口ばあばの日記</a>
はてなブログのヘッダーの下にリンクを張る
初めての場合
- 自分のブログで HTMLコードを入力・プレビューし、意図どおりであることを確認する。
- HTMLコードを選択し、コピー（Ctrl＋C）する。
- 下書きに保存する等を行い、一旦閉じる。
- 管理メニューの デザイン ⇒ カスタマイズ ⇒ ヘッダ と進む。
- 「タイトル下」の HTML記述ボックスに貼りカーソルを移し、貼り付け（Ctrl＋V）る。
- ［変更を保存する］
- ［設定を更新しました ブログを確認する］
更新する場合
- 現在のHTMLコードをコピーし、
- 管理メニューの デザイン ⇒ カスタマイズ ⇒ ヘッダ と進む。
- 「タイトル下」の HTML記述ボックスにカーソルを移し、全て選択（Ctrl＋A）⇒ コピーC（trl＋C）する。
- ドラッグで選択すると、（隠れている部分の）「選択漏れ」が発生する可能性があるので、要注意。
- ［< 管理画面に戻る］
- ブログ（新しい記事または下書き）に貼り付ける。
- ［記事を書く］
- 下書きでも可。
- 本文に貼り付ける。（Ctrl＋V）
- 一旦、［下書き保存する］が安全かも…
- ［記事を書く］
- ブログ上でHTMLコードを更新し、確認する。
- HTMLコードを入力・更新後、プレビューし、意図どおりであることを確認する。
- HTMLコードを選択・コピーする。
- 下書きに保存する等を行い（任意）、一旦閉じる。
- ヘッダーを更新する。
- 管理メニューの デザイン ⇒ カスタマイズ ⇒ ヘッダ と進む。
- 「タイトル下」の HTML記述ボックスにカーソルを移し、
- 全て選択（Ctrl＋A）⇒ 貼り付け（Ctrl＋V）る。
- ［変更を保存する］
- ［設定を更新しました ブログを確認する］
