タグを使う（草稿）

少々手直し中です。実は。

• タグの説明
• リンクを張るだけの説明
• ヘッダにカテゴリーのリストを作ってみる解説
• フッタにメールアドレスを書いてみる解説
• 日記文中のリンクの解説
  • URLリンク
  • ISBNリンク
  • ASINリンク
  • googleリンク
  • idリンク
  • keywordリンク
• 捕捉A タグの概念

うーん簡単じゃ無いよな。下の文書は。

タグの説明

様々な人の手によって解説サイトが作られています。リンクを張っておきますので、目を通すことをお勧めします。

• 仕様書
  • HTML 4.01 Specification@W3C
  • HTML 4.01仕様書 邦訳@補完癖抄
• タグの概念
  • ごく簡単なHTMLの説明 -- 30分間(X)HTML入門@The Web KANZAKI
  • 『タグ』と要素の違い

リンクを辿るのが面倒だという方は補足A タグの概念をお読みください。

リンクを張る

a要素を用いてリンクのアンカーを作成することが出来ます。
まず通常の文章を考えます。

1997年、W3CはHTMLの新しい仕様であるHTML4.0の勧告を公開しました。

という文章を日記に登録するとします。

記入欄に文章を打ち込んで登録ボタンを押すと

のようになります。
W3Cのサイトへのリンクのアンカーを文章中の「W3C」という所に設定したくなりました。W3Cのサイトはhttp://www.w3.org/です。

1997年、<a href="http://www.w3.org/">W3C</a>はHTMLの新しい仕様であるHTML4.0の勧告を公開しました。

の様に、<a href="http://~~">と</a>で囲むとそこにリンクのアンカーが設定されます。必ず半角で書いてください。
実際に打ち込んでみましょう。編集を押して下の様に書きます。

登録すると

1997年、W3CはHTMLの新しい仕様であるHTML4.0の勧告を公開しました。

と表示されます。実際の日記画面でも

の様にリンクのアンカーが張られます。W3Cの文字が青くなり下線が引かれています。
設定しているテーマや自分で書いたCSSによってリンクのアンカーの見え方は変わってきます。青くない・下線が無いからといってリンクが張られていないとは限りません。

はてなには独自記法があり、リンクを表す文を簡略化することが出来ます。詳しくはヘルプ - http記法やキーワード - http記法をごらんください。

ヘッダにカテゴリーのリストを作ってみる。

カテゴリーについては日記を書こう（パソコンで）のカテゴリーのつけかたと使った場合のキャプチャを参照してください。
「カテゴリーのリストを作る」＝「カテゴリーで検索した結果へのリンクをリストにする」ということです。
例を挙げて説明していきます。まずは検索した結果から。
xxxというカテゴリを検索した結果は

http://d.hatena.ne.jp/YourAccount/searchdiary?word=%2a%5bxxx%5d

となります。上のURIのword=%2a%5bxxx%5dという部分がポイントです。
カテゴリー名が半角英数字以外の場合はもう少し複雑になります。
ごはんというカテゴリを検索した結果は

http://d.hatena.ne.jp/YourAccount/searchdiary?word=%2a%5b%a4%b4%a4%cf%a4%f3%5d

になります。

URIの簡単な調べ方を考えましょう。
日記中に

 *[xxx] xxxの例
 *[ごはん] ごはんの例

と見出しを作りました。
日記を登録すると

■ [xxx] xxxの例
■ [ごはん] ごはんの例

となります。
大抵の視覚系UA（要はブラウザです）では、[〜]の中の文字列にリンクが設定されています。文字列にマウスのカーソルを合わせ右クリックし、ショートカットのコピー,リンクのURLをコピー等を選び左クリックします。
下の画像はMozilla Firefox0.8での例です。

テキストエディタ等に貼り付けてみれば上記の様になっていることが分かります。

さてURIが分かりました。リンクをどの様に設定すればいいでしょうか？

[<a href="http://d.hatena.ne.jp/YourAccount/searchdiary?word=%2a%5bxxx%5d">xxx</a>]
[<a href="http://d.hatena.ne.jp/YourAccount/searchdiary?word=%2a%5b%a4%b4%a4%cf%a4%f3%5d">ごはん</a>]

とすればいいですね。日記画面のカテゴリーのリンクと統一する為に、[や]はaの内容（リンクのアンカー）から外しました。
まずリストを作る前に下書きしてみましょう。
カテゴリーが

• [xxx]
• [yyy]
• [ごはん]

と三つあるとします。
すると、

[<a href="http://d.hatena.ne.jp/YourAccount/searchdiary?word=%2a%5bxxx%5d">xxx</a>]
[<a href="http://d.hatena.ne.jp/YourAccount/searchdiary?word=%2a%5bxxx%5d">yyy</a>]
[<a href="http://d.hatena.ne.jp/YourAccount/searchdiary?word=%2a%5b%a4%b4%a4%cf%a4%f3%5d">ごはん</a>]

と書けばよいことになります。
次に一旦分岐します。どちらかを選んで下さい。「htmlって何？」という方は分岐1 pを使うを、「あぁリストってulを使うよね」という方は分岐2 ulを使うを選んで下さい。

ヘッダにカテゴリーのリストを作ってみる - 分岐1 pを使う

下書きを更にマークアップすることにします。

<p>
[<a href="http://d.hatena.ne.jp/YourAccount/searchdiary?word=%2a%5bxxx%5d">xxx</a>]
[<a href="http://d.hatena.ne.jp/YourAccount/searchdiary?word=%2a%5byyy%5d">yyy</a>]
[<a href="http://d.hatena.ne.jp/YourAccount/searchdiary?word=%2a%5b%a4%b4%a4%cf%a4%f3%5d">ごはん</a>]
</p>

長いため適宜改行してあります。
これで原稿が作成できました。それでは実際にヘッダにカテゴリーのリストを作成してみましょう。
まずは設定です。設定から下の方にあるページのヘッダ(HTMLタグ利用可)を探します。

設定画面のページのヘッダ欄に上の様に書きます。

「この内容に変更する」というボタンを押すと、上の様に反映されます。

ヘッダにカテゴリーのリストを作ってみる - 分岐2 ulを使う

リストですからulを使うことにします。

<ul>
<li>[<a href="http://d.hatena.ne.jp/YourAccount/searchdiary?word=%2a%5bxxx%5d">xxx</a>]</li>
<li>[<a href="http://d.hatena.ne.jp/YourAccount/searchdiary?word=%2a%5byyy%5d">yyy</a>]</li>
<li>[<a href="http://d.hatena.ne.jp/YourAccount/searchdiary?word=%2a%5b%a4%b4%a4%cf%a4%f3%5d">ごはん</a>]</li>
</ul>

以上でマークアップできました。それでは実際にヘッダにカテゴリーのリストを作成してみましょう。
まずは設定です。設定から下の方にあるページのヘッダ(HTMLタグ利用可)を探します。

設定画面のページのヘッダ欄に上の様に書きます。

「この内容に変更する」というボタンを押すと、上の様に反映されます。

フッタにメールアドレスを書いてみる

addressという要素を使って、その文書に関する連絡先を表せます。実際に書いてみましょう。
[email protected]というメールアドレスを持っていることにしましょう。
まず、設定です。設定から下の方にあるページのフッタ(HTMLタグ利用可)を探します。

ページのフッタにはHTMLタグを使えます。実際に書いてみることにします。

<address>連絡先：[email protected]</address>

すると

連絡先：[email protected]

と表示されます。
実際にやってみましょう。

設定画面のページのフッタ欄に上の様に書きます。

「この内容に変更する」というボタンを押すと、上の様に反映されます。

ただし、これにはちょっと困った点があります。悪い人がウェブ上のメールアドレスを収集しスパムを送りつけています。ということはメールアドレスをそのまま書くのは宜しくありません。
解決策としては

1. @だけを画像にする
2. @だけ「アット」や「_at_」にする

等があります。
一番よいのはメールアドレスをそのまま書かず、「管理」→「プロフィール」でプロフィールにメールアドレスを書くことです。JavaScriptでメールアドレスを書いてくれるので比較的スパムの対象になり難いと思われます。

日記文中のリンク

まだ未完成です。
はてなダイアリーの場合リンクは三種類あります。

1. 自分で設定したリンク
2. 自動的に張られるリンク
   1. 半角コロンに反応して張られるリンク
   2. キーワードに反応して張られるリンク

1.はリンクを張るの項で説明したものです。
ここでは2.を詳しく説明することにします。ヘルプの詳しい入力ルール-自動リンクと基本的には同様です。ポイントとしては以下の特殊リンクは<a href="id:youraccount">youraccount</a>
の様にも使えます。覚えておくと一々URLを調べる必要が無く便利です。

URLリンク

まずはURLに反応します。http,https,ftp,mailtoから始まる文字列には自動的にリンクが張られます。

http://xxx.xxx.xxx/
https://xxx.xxx.xxx/
ftp://xxx.xxx.xxx/
mailto:[email protected]

に対して

http://xxx.xxx.xxx/
https://xxx.xxx.xxx/
ftp://xxx.xxx.xxx/
[email protected]

と自動的にリンクが張られる訳です。
途中で止めたい場合があります。例えば以下の様な文章を考えて見ます。

http://xxx.xxx.xxx/-10点

このまま日記を書くと以下の様になります。

http://xxx.xxx.xxx/-10点

-10の部分にはリンクを張りたくないとしましょう。この場合はリンクを張って欲しい場所を[]で囲みます。

[http://xxx.xxx.xxx/]-10点

と書けば

http://xxx.xxx.xxx/-10点

と-10の部分にはリンクが張られません。 また、URLを書きたいけれどもリンクを張りたくないという時があります。そういう場合には[]と[]で囲みます。

[]http://xxx.xxx.xxx/[]

と書けば

http://xxx.xxx.xxx/

とリンクが張られません。

ISBNリンク

「ISBN」は「International Standard Book Number(国際標準図書番号)」の略称です。最近の本ですと、裏表紙の辺りに大抵掲載されています。「はまぞう」を使って検索をした後リンクを挿入するのが一番よいでしょう。

ASINリンク

「ASIN」は「Amazon Standard Identification Number」の略称です。書籍以外のamazon.co.jpで扱っている商品を表す番号です。詳しくはAmazon.co.jp ヘルプデスク ISBN/ASINについてを読んでください。
CDやDVDといった商品へのリンクを張りたい場合はASIN:1234567890と書くと、アマゾンのその商品のページへのリンクとなります。

googleリンク

[google:〜]と書くとGoogleでの検索結果へのリンクとなります。

[google:はてなダイアリー]

と書けば

google:はてなダイアリー

とGoogleでの検索結果へのリンクとなります。
更に

[google:cache:http://www.hatena.ne.jp/]
[google:link:http://www.hatena.ne.jp/]
[google:related:http://www.hatena.ne.jp/]

と書くと

http://www.hatena.ne.jp/

http://www.hatena.ne.jp/

http://www.hatena.ne.jp/

の様にリンクを張ることが出来ます。
上から順に、

1. googleのキャッシュ
2. http://www.hatena.ne.jp/にリンクしているページを検索した結果
3. http://www.hatena.ne.jp/に関連したページを検索した結果

となります*1。

*1:はてなダイアリー日記 2003/03/28 自動リンク新（？）機能参照。

idリンク

他のはてなダイアリーへリンクを張ることが出来ます。xxxとアカウントのはてなダイアリーにリンクを張りたい場合、

id:sample

と書けば

id:sample

と、http://d.hatena.ne.jp/sample/へのリンクが張られます。
日付を指定したい場合は

id:sample:20040820

と半角コロンと日付を付け足すことによって

id:sample:20040820

と、http://d.hatena.ne.jp/sample/20040820へのリンクが張られます。
更に小見出しを指定したい場合は

id:sample:20040820#p1
id:sample:20040820:p1

と小見出しのidを付け足すことによって

id:sample:20040820#p1
id:sample:20040820:p1

と、リンクを張ることが出来ます。
またはてなグループ・はてなアンテナ等にもidリンクを張ることが可能になりました。*1

*1:参考:はてなダイアリー日記@?D 2004/05/11 省略記法の追加

keywordリンク

[[〜]]の代わりに[keyword:〜]と書くことが出来ます。
[[はてなダイアリー]]の様にするとキーワードを作成することが出来ます。また既に存在するキーワードに対しては自動的にリンクが張られますが、稀にリンクが張られない場合があります。そういう場合には[[はてなダイアリー]]として明示的にリンクを張ることが出来ます。

補足A タグの概念。

一応こちらでも簡単な説明を。
ここはタイトル、ここは段落、ここは作成者の名前と目印を付けると文書の構造が分かりやすくなります。この目印をタグと呼びます*1。

試しに手元にある福沢諭吉『文明論之概略』に目印を付けることを考えます。

福沢諭吉『文明論之概略』
文明論之概略
緒言
　文明論とは人の精神発達の議論なり。（以下略）
巻之一
　第一章　議論の本位を定る事
　　軽重長短善悪是非等の字は相対したる考より生じたるものなり。（以下略）
　　　　福沢諭吉

こういう文書があるとします。これに日本語で目印を付けることにしましょう。

<文書の名前>福沢諭吉『文明論之概略』
<大見出し>文明論之概略
<見出し>緒言
<段落>文明論とは人の精神発達の議論なり。（以下略）
<見出し>巻之一
<小見出し>第一章　議論の本位を定る事
<段落>軽重長短善悪是非等の字は相対したる考より生じたるものなり。（以下略）
<書いた人>福沢諭吉

分かりやすくなりました。しかし、どこからどこまでが題名で、どこからどこまでが段落なのかが分かりにくくなっています。始まりの目印以外に終わりの目印もつけることにします。終わりの目印には/を入れることにします。

<文書の名前>福沢諭吉『文明論之概略』</文書の名前>
<大見出し>文明論之概略</大見出し>
<見出し>緒言</見出し>
<段落>文明論とは人の精神発達の議論なり。（以下略）</段落>
<見出し>巻之一</見出し>
<小見出し>第一章　議論の本位を定る事</小見出し>
<段落>軽重長短善悪是非等の字は相対したる考より生じたるものなり。（以下略）</段落>
<書いた人>福沢諭吉</書いた人>

これでそれぞれの範囲が分かりやすくなりました。
さてコンピュータというものは日本語よりも英数字の方が好きです。マークアップ言語であるHTMLでは文書の名前をtitle、見出しはh1-6、段落はp、書いた人はaddressで目印を付けることが薦められています。それに従って目印を付けると

<title>福沢諭吉『文明論之概略』</title>
<h1>文明論之概略</h1>
<h2>緒言</h2>
<p>文明論とは人の精神発達の議論なり。（以下略）</p>
<h2>巻之一</h2>
<h3>第一章　議論の本位を定る事</h3>
<p>軽重長短善悪是非等の字は相対したる考より生じたるものなり。（以下略）</p>
<address>福沢諭吉</address>

これでhtml文書が出来上がりました。
実際に表示させると以下のようになります。

始まりを表す目印を開始タグと呼び、終わりを表す目印を終了タグと呼びます。タグで目印を付ける対象（例えばaddress要素内の「福沢諭吉」）を内容と呼びます。開始タグ+内容+終了タグを全部あわせて要素と呼びます。
一部例外が存在します。例えば画像を表示するためのimg要素や改行するためのbr要素は内容を持ちません。これらは空要素と呼ばれます。はてなダイアリーで使われているHTML4.01TransitionalというHTMLのヴァージョンでは空要素の場合終了タグは書いてはいけません。
要素・タグをそれぞれ細かく解説するとそれだけで一つのサイトが出来上がりますので省略します。

*1:タグ(tag)を辞書で引いてみましょう。ジーニアス英和辞典第2版によると1. 付け札, 下げ札, 荷札, 付箋, (自動車の)ナンバープレートとあります。どうやら目印と説明しても問題なさそうです。