はてな記法とHTMLマークアップまとめ
はてな記法を使ったとき実際にどのようなHTMLが出力されるのか、CSS用にクラスやIDに特化したまとめを作ってみたよー。簡潔にするために
見出し記法
記法
*[カテゴリ1][カテゴリ2]見出し
HTML（1段表示）
<h3> <a><span.sanchor>■</span></a> [<a.sectioncategory>カテゴリ1</a>][<a.sectioncategory>カテゴリ2</a>]見出し <span.timestamp>00:00</span> </h3>
HTML（2段表示）
<h3.title>見出し</h3> <p.sectionheader> <span.sectioncategory><a.sectioncategory>カテゴリ1</a>,<a.sectioncategory>カテゴリ2</a></span> | <span.timestamp>00:00</span> </p>
span.timestampは日記モードのみ
その場編集用のh3の背景色はh3.hover
リスト記法
記法
-北海道 -東北 --北東北 ---青森県 ---秋田県 ---岩手県 --南東北 ---山形県 ---宮城県 ---福島県
HTML
<ul>
<li>北海道</li>
<li>東北
<ul>
<li>北東北
<ul>
<li>青森県</li>
<li>秋田県</li>
<li>岩手県</li>
</ul>
</li>
<li>南東北
<ul>
<li>山形県</li>
<li>宮城県</li>
<li>福島県</li>
</ul>
</li>
</ul>
</li>
</ul>数字つきリスト（+〜〜）の場合はulのかわりにolでマークアップされる。
定義リスト記法
記法
:住所:東京都渋谷区はてな村 :電話番号:03-8888-8888
HTML
<dl> <dt>住所</dt> <dd>東京都渋谷区はてな村</dd> <dt>電話番号</dt> <dd>03-8888-8888</dd> </dl>
表組み記法
記法
|*なまえ|*HP|*MP| |おれ|50|12| |おまえ|62|0| |大五郎|65535|65535|
HTML
<table>
<tbody>
<tr>
<th>なまえ</th>
<th>HP</th>
<th>MP</th>
</tr>
<tr>
<td>おれ</td>
<td>50</td>
<td>12</td>
</tr>
<tr>
<td>おまえ</td>
<td>62</td>
<td>0</td>
</tr>
<tr>
<td>大五郎</td>
<td>65535</td>
<td>65535</td>
</tr>
</tbody>
</table>
引用記法
記法
>http://d.hatena.ne.jp> 快適、安心、シンプルなはてなのブログ <<
HTML
<blockquote> <p>快適、安心、シンプルなはてなのブログ</p> <cite><a>http://d.hatena.ne.jp</a></cite> </blockquote>
スーパーpre記法
記法
>|| プレプレ <br> プレプレ
| < | |
スーパーpre記法（シンタックスハイライト）
記法
>|css| /* sample css */ div#foo { color: #ff0000 !important; }
| < | |
HTML
<pre.syntax-highlight>
<span.synComment>/* sample css */</span>
<span.synStatement>div</span><span.synIdentifier>#foo</span> <span.synIdentifier>{</span>
<span.synType>color</span>: <span.synConstant>#ff0000</span> <span.synSpecial>!important</span>;
<span.synIdentifier">}</span>
</pre>
シンタックスハイライトで使用されるclass
| class名 | デフォルト色 |
|---|---|
| synSpecial | #C000C0 |
| synType | #008000 |
| synComment | #0000C0 |
| synPreProc | #C000C0 |
| synIdentifier | #008080 |
| synConstant | #C00000 |
| synStatement | #804000 |
AA記法
記法
>|aa| ／￣＼ | ＾o＾ | ＜ こんげつ あとにひゃくえんしかありません ＼＿／ ＿| |＿ | |
| < | |
HTML
<div.ascii-art> ／￣＼<br> | ＾o＾ | ＜ こんげつ あとにひゃくえんしかありません<br> ＼＿／<br> ＿| |＿<br> | |<br> </div>
MML記法
記法
>|mml| t120l16 @3 o5 cdefedc8 efgagfe8 c4 c4 c4 c4 ccddeeffe8d8c4; t120l16 @3 o4 r2 cdefedc8 efgagfe8 c4 c4 c4 eeffe8d8c4; t120l16 @3 o6 r1 cdefedc8 efgagfe8 c4 eeffe8d8c4;
| < | |
HTML
<div.mml-player> <img.mml-player-play> <img.mml-player-stop> </div> <pre.mml-source> t120l16 @3 o5 cdefedc8 efgagfe8 c4 c4 c4 c4 ccddeeffe8d8c4; t120l16 @3 o4 r2 cdefedc8 efgagfe8 c4 c4 c4 eeffe8d8c4; t120l16 @3 o6 r1 cdefedc8 efgagfe8 c4 eeffe8d8c4; </pre>
脚注記法
記法
あまりふいんき((なぜか変換できない))がよくない
HTML
日記本文中に<p>あまりふいんき<span.footnote><a>*1</a></span>がよくない</p>その日の最後の記事(div.section)の直後に
<div.footnote>
<p.footnote>
<a>*1</a>: なぜか変換できない
</p>
</div>
続きを読む記法
記法
つづく おわり
HTML
トップページは<p>つづく</p> <p.seemore><a>続きを読む</a></p>それ以外のページでは
<p>つづく</p> <a></a> <p>おわり</p>
ウクレレ記法
記法
[uke: |: C _ Am F G7 1 - C :| ] [uke:tp]
HTML
<p> <img.uke_image> <img.uke_image> <img.uke_image> <img.uke_image> <img.uke_image> <img.uke_image> <img.uke_image> <img.uke_image> <img.uke_image> <img.uke_image> </p> <ul.uke_transposition> <li>-7</li> <li>-6</li> <li>-5</li> <li>-4</li> <li>-3</li> <li>-2</li> <li>-1</li> <li.focus>0</li> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> </ul>移調機能では現在選択中の調にclass="focus"、マウスを乗せている部分にclass="over"が動的に付与される。
http記法(sound,movie)
記法
[http://hoge.jp/music.wav:sound] [http://hoge.jp/video.avi:movie]
HTML
<p><span><object><embed></embed></object><a><img></a></span></p> <p><object><embed></embed></object><a><img></a></p>
question記法(detail)
記法
[q:0000000000:detail]
HTML
<p><a>アンケートのタイトル</a></p>
<table.hatena-question-detail>
<tbody>
<tr><th.hatena-question-detail-title>設問</th></tr>
<tr>
<td.hatena-question-detail-label>選択肢1</td>
<td.hatena-question-detail-value><img.hatena-question-detail-graph>68</td>
</tr>
<tr>
<td.hatena-question-detail-label>選択肢2</td>
<td.hatena-question-detail-value><img.hatena-question-detail-graph>35</td>
</tr>
</tbody>
</table>設問を指定しない場合table.hatena-question-detailは設問の数だけ描画される。
keyword記法
記法
[[さいたま]]
HTML
<p><a.keyword>さいたま</a></p>
isbn/asin/rakuten記法(detail)
記法
[asin:A0001BC2D34:detail]
HTML
<div.hatena-asin-detail>
<a><img.hatena-asin-detail-image></a>
<div.hatena-asin-detail-info>
<p.hatena-asin-detail-title><a>商品名</a></p>
<ul>
<li><span.hatena-asin-detail-label>出版社/メーカー:</span> <a.keyword>出版社</a></li>
<li><span.hatena-asin-detail-label>発売日:</span> 0000/00/00</li>
<li><span.hatena-asin-detail-label>メディア:</span> 単行本</li>
</ul>
</div>
<div.hatena-asin-detail-foot></div>
</div>isbnでもrakutenでもクラス名は全てasin
画像表示系記法
原則として<a><img></a>という形でマークアップされ、a要素とimg要素に同じclassが設定される。 記法に対応するclassは以下。
また、http記法(:image)とfotolife記法のみ、「:right」「:left」を指定することで、img要素に上記のclassに加えて「hatena-image-right」「hatena-image-left」が設定される。はてな記法で画像を日記本文に貼り付けた際の a タグにクラス名を追加しました（開発者向け） - はてなダイアリー日記
記法 class名 http記法での画像ファイル表示(:image) http-image http記法でのスクリーンショット表示(:image) http-screenshot http記法でのQRコード表示(:barcode) http-barcode id記法でのプロフィール画像表示(:image) hatena-id-image id記法での詳細表示(:detail) hatena-id-icon isbn/asin記法での画像表示(:image) asin rakuten記法での画像表示(:image) asin jan/ean記法での画像表示(:image) ean jan/ean記法でのQRコード表示(:barcode) ean-barcode graph記法でのグラフ表示(:image) hatena-graph-image question記法でのアンケートグラフ表示(:image) hatena-question-image keyword記法での統計グラフ表示(:graph) hatena-keyword-graph fotolife記法での写真表示 hatena-fotolife
