kiyoblo(@kiyohero)

個人のブログです。

社内向け「はてな記法講座(初級編)」を公開します

※このドキュメントは2008年に社内のサポートスタッフ研修用に書いたものです。公開しても問題なさそうな内容だったので細かいところを修正しつつ公開します。主にはてなダイアリー、はてなグループでの利用を想定しています。はてなブログで使えるかは検証してません。(記法を意識しなくても書けるのがはてなブログです!!!)

はじめに

はてなには「はてな記法」と呼ばれる、テキストを整形するための独特の記法があります。これを使うとテキストをすっきりと記述することができ、さらに使いこなすとパワーポイントのように自分の思考をまとめるのにも役に立つので、最初はとっつきにくいかもしれませんが、ぜひ覚えて活用してみてください。

目次

  • 基本の記法
    • id記法
    • 小見出し記法
    • リスト記法
    • 引用記法
    • スーパーpre記法
    • 表組み記法
    • 続きを読む記法
  • 応用
    • はてな記法を回避する
      • 「*」や「-」をそのまま行頭に表示する
    • 編集画面の裏側
  • 課題

基本の記法

id記法

これはすでに活用しているかもしれませんが、「id:」に続けてユーザー名を書くことで、自動的にidコール(メール通知)が送信されます。

今日もがんばります!よろしくお願いします!>id:rapico

のように特定の相手に向けて報告を書くときなどに使いましょう。

小見出し記法

行頭にアスタリスク( * )を2個続けて、「**」と書くと、小見出しになります。何かタイトルを付けるときに使います。

**今日の日報

と書くと、

今日の日報

といったように、少し目立つ体裁で表示されます。

さらに * の数を増やして「***感じたこと」のように書くと、小々見出しになります。見出し>小見出し>小々見出しという構成になるように文章を書くと、よりわかりやすくなります。

リスト記法

行頭にハイフン( - )を使い、続けて「- 好きなもの」のように書くと、箇条書きリストになります。「-」を続けて「--」「---」とすることで入れ子にすることができます。

- 好きなもの
-- イケメン
-- 妄想

と書くと、

  • 好きなもの
    • イケメン
    • 妄想

と表示されます。

さらに「-」を「+」にすると、数字付きリストになります。

- 好きなもの
-+ イケメン
--- 特にもっさりしたイケメン
-+ 妄想

  • 好きなもの
    1. イケメン
      • 特にもっさりしたイケメン
    2. 妄想

となります。すっきりしましたね。リスト項目の中で改行したいときは、br タグを使います。

引用記法

どこかのページを読んで気づいたことなどを引用したい場合は、引用記法が便利です。「>>」と「<<」で引用したい部分を囲みます。

>>
はてなには「はてな記法」と呼ばれる、テキストを整形するための独特の記法があります。
これを使うとテキストをすっきりと記述することができ、さらに使いこなすとパワーポイントのように自分の思考をまとめるのにも役に立つので、最初はとっつきにくいかもしれませんが、ぜひ覚えて活用してみてください。
<<

ヘルプをみながら試してみました。とても勉強になりました。特に...

と書くと、

はてなには「はてな記法」と呼ばれる、テキストを整形するための独特の記法があります。
これを使うとテキストをすっきりと記述することができ、さらに使いこなすとパワーポイントのように自分の思考をまとめるのにも役に立つので、最初はとっつきにくいかもしれませんが、ぜひ覚えて活用してみてください。

ヘルプをみながら試してみました。とても勉強になりました。特に...

と表示されます。

さらに引用元のURLを併記したりといった使い方も可能です。

スーパーpre記法

引用記法と似た記法で、「>||」と「||<」で囲むスーパーpre記法を使うと、改行位置などをそのまま表示できます。

これは主にエンジニアの人向けの記法ですが、非エンジニアでもメール本文を貼り付けるときなどに便利です。

※パイプ( | )は、キーボードの右上にある「\」とShiftの同時押しです。

>||
こんにちは。はてなスタッフの山田と申します。
いつもはてなをご利用いただき、ありがとうございます。

お問い合わせいただきありがとうございます。
はてな記法の使い方について回答させていただきます。
 ||<

と書くと(※実際には「||<」の直前の半角スペースを削除してください)、

こんにちは。はてなスタッフの山田と申します。
いつもはてなをご利用いただき、ありがとうございます。

お問い合わせいただきありがとうございます。
はてな記法の使い方について回答させていただきます。

と表示されます。改行位置などが、メールと同じ見た目で表示されています。

HTMLのソースなどを貼り付ける際には、スーパーpre記法のシンタックス・ハイライトを使うと、コードが色分けされて表示されるので便利です。HTMLタグや記法が展開されるpre記法というのも存在します。

表組み記法

HTMLタグの table を使うと表組みを作れますが、タグでうつのはめんどうですよね。はてな記法だったら、パイプ( | )を使うことでかんたんに表組みを書けます。

今週のランチ予定
|*	|*月|*火|*水|*木|*金|
|*メニュー|カレー|カレー|ハンバーグ|魚|からあげ|
※メニューは筆者の希望であり実際とは異なります

と書くと、

今週のランチ予定

メニュー カレー カレー ハンバーグ からあげ

※メニューは筆者の希望であり実際とは異なります

のように表組みになって展開されます。パイプに続けてアスタリスクがついているセルは、見出しという意味で少し強調して表示されます。

続きを読む記法

ダイアリーやグループ日記で長文記事を書いた際に、興味のある人だけが続きを読めるようにリンクを表示させることが可能です。続きを隠したい箇所に「====」という行を書いてみてください。

今日の業務報告です。
興味のある方だけお読み下さい。
ここから先は「続きを読む」をクリックした人だけが見れる場所です。

と書くと……実際にどう表示されるかは、自分のダイアリーやグループ日記で書いて試してみてください。(記事を保存した後、「最新の日記」をクリックする必要があります。)

イコールの数を1つ増やして「=====」とすると、その下の記事を全部隠すことができます。これを「スーパー続きを読む記法」といいますが、こちらも実際に試してみて確かめてください。

応用

はてな記法を回避する

「*」や「-」をそのまま行頭に表示する

行頭で「*」や「-」、「+」を使うことで見出しやリストをかんたんに記述できることがわかりましたが、では、行頭でこれらの文字を使いたいときはどうしたらよいのでしょうか?


答えはかんたんです。そのまま表示したい文字の直前に半角スペースを加えてみてください。

- リストです
- リスト2です
 - これは半角スペースがあるのでリストになりません

と書くと、

  • リストです
  • リスト2です

- これは半角スペースがあるのでリストになりません

となります。どうです、かんたんでしょう?

編集画面の裏側

最近開設されたダイアリーやグループ日記では、見出しと本文を直接入力できる「その場編集モード」という直感的なインターフェースになっていますが、その裏側ではこのようなテキストが入力されています。(「詳細編集画面」というリンクをクリックすると移動できます。)

アスタリスクで始まる行が記事の見出しに当たります。続いて角カッコで囲われた「[日記]」がカテゴリーに当たります。以前から使っているダイアリーユーザーさんは基本的にこの画面を見ているので、この画面表示にも慣れておいてください。

「1226502856」といった数字はエポック秒と言い、時間を表します。設定にもよりますが、この数字は基本的に自動で挿入されます。この数字によって、何時に投稿された記事かをプログラムが判断し、またその記事のURLが決定されます。(例→http://d.hatena.ne.jp/kiyohero/20081017/1224170387)

この数字の部分を好きな文字列に変更することでURLをかっこよくすることもできます(name属性付き見出し記法)。

課題

以下の内容を、あなたのはてなダイアリーに書いてみましょう。

  1. 小見出し記法、id記法、リスト記法、続きを読む記法を活用して、誰かの印象を書いてみてください
  2. blockquoteタグとpreタグの違いについて、引用記法とスーパーpre記法を活用してわかりやすく説明してください(パソコンがあまり得意でない方に説明するつもりでお願いします。http://www.tohoho-web.com/www.htm に書かれているものを引用したりすると良いです。)
  3. 表組み記法を使って、あなたの来週のスケジュールを書いてください