nKB

nKB

シンプルにいこうよ

トップ > Hatena Blog > はてなのMarkdown記法＋HTMLタグ

はてなのMarkdown記法＋HTMLタグ

Hatena Blog

ブログで記事を書くときのリファレンスとして使用


目次

MarkDown記法

[:contents]


エスケープ

MarkDown記法の前に\(バックスラッシュ)を入れる

MarkDown記法

 \# 見出し

表示例

# 見出し


文字の強調

簡単な記述で文字を強調できる

MarkDown記法

*太字*  
**太字**  
***太字***  
~~取り消し線~~  
**_太文字と斜体_**

表示例
太字
太字
太字
取り消し線
太文字と斜体


改行

・行の終わりに半角スペースを2つ付ける


表組み記法

  • パイプ「|」で区切る。
  • 表組みと前の段落の間に空行
  • 1行目：項目名
  • 2行目：データ区切り「---」
  • 3行目以降：データ

MarkDown記法

|項目1|項目2|項目3|
|---|---|---|
|データ1|データ2|データ3|
|データA|データB|データC|

表示

項目1 項目2 項目3
データ1 データ2 データ3
データA データB データC

表組み記法（HTML）

見出しを付けたくない場合

  • 表組みはtable要素を使う
  • 行はtr要素（Table Row）で表す
  • 列はtd要素（Table Data）で表す

https://tabletag.net/ja/

HTMLタグ

<table>
  <tr><td>項目1</td><td>内容1</td></tr>
  <tr><td>項目2</td><td>内容2</td></tr>
  <tr><td>項目3</td><td>内容3</td></tr>
  <tr><td>項目4</td><td>内容4</td></tr>
  <tr><td>項目5</td><td>内容5</td></tr>
</table>

表示例

項目1内容1
項目2内容2
項目3内容3
項目4内容4
項目5内容5

HTLMタグ

<table>
  <tr>
    <td>項目1</td>
    <td>内容1</td>
  </tr>
  <tr>
    <td>項目2</td>
    <td>内容2</td>
  </tr>
  <tr>
    <td>項目3</td>
    <td>内容3</td>
  </tr>
  <tr>
    <td>項目4</td>
    <td>内容4</td>
  </tr>
  <tr>
    <td>項目5</td>
    <td>内容5</td>
  </tr>
</table>

表示例

項目1 内容1
項目2 内容2
項目3 内容3
項目4 内容4
項目5 内容5


箇条書き

  • 行頭に「*」を付ける
  • リストと前の段落の間に空行が必要
  • 「*」の後ろは半角スペースが必要

MarkDown記法

* 箇条書き1  
* 箇条書き2  
* 箇条書き3  
* 箇条書き4

表示例

  • 箇条書き1
  • 箇条書き2
  • 箇条書き3
  • 箇条書き4


番号付きリスト

  • リストと前の段落の間に空行が必要
  • 行頭に半角英数字＋「.」
  • 数字は並び順で付けられる

MarkDown記法

1. 文字列
2. 文字列
3. 文字列
1. 文字列
1. 文字列
1. 文字列

表示例

  1. 文字列
  2. 文字列
  3. 文字列
  4. 文字列
  5. 文字列
  6. 文字列


水平罫線

・3つ以上の「-」

 ---


リンク

[リンクさせる文字列](URL)

MarkDown記法

[nkb](http://blog.hatena.ne.jp)

表示例

nkb


pre記法

ソースコードやコマンドを枠で囲って書くときに使う

バッククオート(`)を3つ並べたものを囲みたいコードの前後に付ける

 ```
 test
 ```


test


pre記法（シンタックスハイライト）

ソースコードやコマンドを枠で囲って書くときに使う

バッククオート(`)を3つ並べたものを囲みたいコードの前後に付ける

構文を見やすく色分けして表示する

 ```vb
 Function test()

 Dim i as Long
 
 If i = 0 Then

 MsgBox "TEST"

 End If

 End Function
 ```


Function test()

Dim i as Long
 
If i = 0 Then

MsgBox "TEST"

End If

End Function

画像の挿入

そのまま表示

[f:id:<user name>:<image no>:plain]

横幅（width）指定 例）幅300pixel

[f:id:<user name>:<image no>:plain:w300]

特殊文字（HTML）

記号 表記 意味
＆ &amp; アンパサンド
< &lt; 小なり
> &gt; 大なり
" &quot; ダブルクォーテーション
&nbsp; 空白
@ &copy; コピーライト
¥ &yen; 円マーク


表示したい記号 入力する文字
( &#x28;
) &#x29;
[ &#x5b;
] &#x5d;
| &#x7c;


見出し

  • 行頭に「#」を付ける
  • 「#」の数でレベルが決まる。6まで。文字の大きさやデザインが変わる
  • h2、h3、h4の３つを使うこととする
    h1：主題を表す。1ページ（1記事）に一つだけ
    h2：SEO=大
    h3：はては=大、SEO=中
    h4：はてな=中、SEO=小
    h5：はてな=小
    h6：？

例

見出し1

見出し2

見出し3

見出し4

見出し5
見出し6

注 見出しを記事の最後にしないと目次の表示がおかしくなる


－EOF－