はてなブログ/ヘッダーの下にリンクを張るための「HTMLの基礎」の“キ”

 はてなブログのヘッダーの下に「リンクを張る」件につき質問や要望(コメント)がありました。
我流(おれ流)ですが、必要な HTMLの基礎の「き」を、あちこちのサイトより引用し作成しました。
 基本的には「やさしいホームページ入門」 > HTML入門 からの引用が多いですが、他のWebサイトからも引用しています。リンク先のサイトにも訪れ、知識を広めてください。

 なお、まりふのひとの

  1. 記事を書く/編集 モードは「はてな記法
  2. デザインは、インストールしたテーマの「MINIM
  3. ブラウザーFirefox

です。



≪目次≫



ホームページとは

 ホームページという言葉は本来、上記用法1のように ウェブ *1 ブラウザを起動した際に表示されるウェブページの事を指していた[1][3]。それ以外の用法は誤用とされる *2 場合もあるが、しかし現在では上記のように別の意味*3 としても広く使われるようになった[4]。
 代表的なウェブブラウザ Internet ExplorerGoogle 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ソース)は、タグと言うものを使って書いていきます。 <> で囲まれたものをタグと言います。
 タグは基本的に開始タグ(始まりのタグ)と終了タグ(終わりのタグ)に分かれています。開始のタグは<タグ名>のように書き、終了タグは</タグ名>のように書き、開始タグと終了タグでひとつのセットになります。
 <> は必ず半角文字で書いてください。開始タグと終了タグの間に内容を書いていきます。

<タグ名>この囲まれた部分が内容になります。</タグ名>

 はじめに、これからたくさん出てくる 属性 と 属性値 ついて説明します。まずタグのことを 要素 とも言います。これからはタグのことを要素と書いていきます。
 要素の中に半角スペースで区切って書かれているものを 属性 と言います。" で囲まれて書かれているものを 属性値 と言います。
 基本的にタグ(要素)は、半角文字で書き大文字・小文字のどちらで書いてもかまいません。

  • 💡タグ(要素)

 半角文字で大文字・小文字は問いませんが、属性値の ” " の中は、半角文字・全角文字、数字・記号等全ての文字が使えます。

ハイパーリンク



 話を本題に移して‥‥ やさしいホームページ入門には、次のように記されています。

  • 他ページにリンクする
     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の例
    1. 「まりふのひと」の URLは https://ogohnohito.hatenablog.jp/ です。
    2. このページの URLは https://ogohnohito.hatenablog.jp/entry/2019/03/10/170502 です。
    3. 1. にリンクを張ると、常に最新の記事が表示されます。
      2. にリンクを張ると、何年経っても同じ記事が表示されます。

≪具体例≫
 実際に苦労された山口ばあばさんの例です。

<a href="https://sinnjyounohito.hatenablog.com/" title="山口ばあばの日記トップページ">山口ばあばの日記</a>

はてなブログのヘッダーの下にリンクを張る

初めての場合
  1. 自分のブログで HTMLコードを入力・プレビューし、意図どおりであることを確認する。
  2. HTMLコードを選択し、コピー(Ctrl+C)する。
  3. 下書きに保存する等を行い、一旦閉じる。

  4. 管理メニューの デザイン ⇒ カスタマイズ ⇒ ヘッダ と進む。
  5. 「タイトル下」の HTML記述ボックスに貼りカーソルを移し、貼り付け(Ctrl+V)る。
  6. [変更を保存する]
  7. [設定を更新しました ブログを確認する]
更新する場合
  1. 現在のHTMLコードをコピーし、
    1. 管理メニューの デザイン ⇒ カスタマイズ ⇒ ヘッダ と進む。
    2. 「タイトル下」の HTML記述ボックスにカーソルを移し、全て選択(Ctrl+A)⇒ コピーC(trl+C)する。
      • ドラッグで選択すると、(隠れている部分の)「選択漏れ」が発生する可能性があるので、要注意。
    3. [< 管理画面に戻る]
  2. ブログ(新しい記事または下書き)に貼り付ける。
    1. [記事を書く]
      • 下書きでも可。
    2. 本文に貼り付ける。(Ctrl+V)
      • 一旦、[下書き保存する]が安全かも…
  3. ブログ上でHTMLコードを更新し、確認する。
    1. HTMLコードを入力・更新後、プレビューし、意図どおりであることを確認する。
    2. HTMLコードを選択・コピーする。
    3. 下書きに保存する等を行い(任意)、一旦閉じる。

  4. ヘッダーを更新する。
    1. 管理メニューの デザイン ⇒ カスタマイズ ⇒ ヘッダ と進む。
    2. 「タイトル下」の HTML記述ボックスにカーソルを移し、
    3. 全て選択(Ctrl+A)⇒ 貼り付け(Ctrl+V)る。
    4. [変更を保存する]
    5. [設定を更新しました ブログを確認する]


*1:webとは「クモの巣」の意。

*2:うっかり口にしてしまう誤ったIT用語

*3:各ウェブサイトのトップページを指す