WordPressで使えるMarkdown記法をまとめます。
なおWordPressでMarkdownを有効にしたい場合は
WordPress.comの純正プラグインのJetpackをインストールしてください。
Jetpack by WordPress.com
見出し
例：h6見出し
Markdown
|
1 2 3 4 5 6 7 8 |
# h1見出し ## h2見出し ### h3見出し #### h4見出し ##### h5見出し ###### h6見出し h1見出し = |
HTML
|
1 2 3 4 5 6 7 |
<h1>h1見出し</h1> <h2>h2見出し</h2> <h3>h3見出し</h3> <h4>h4見出し</h4> <h5>h5見出し</h5> <h6>h6見出し</h6> <h1>h1見出し</h1> |
####### h7以上にはならないので注意。
文字と#の間は半角スペース
h1のみ下に=でもOK
太文字
例：太文字
Markdown
|
1 2 |
**太文字** __太文字__ |
HTML
|
1 2 |
<strong>太文字</strong> <strong>太文字</strong> |
_と*どっちでも良い
斜体
例：斜体
Markdown
|
1 2 |
*斜体* _斜体_ |
HTML
|
1 2 |
<em>斜体</em> <em>斜体</em> |
リンク
例：リンク
Markdown
|
1 2 |
[リンク](http://example.com "タイトル") [リンク](http://example.com) |
HTML
|
1 2 |
<a href="http://example.com" title="タイトル">リンク</a> <a href="http://example.com">リンク</a> |
URLとタイトルの間は半角スペース
Q.リンクを別タブで開きたい
A.Markdownでは不可能なのでJavascriptでこのブログは対応してます。
|
1 2 |
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> <script>$(function(){$('.entry-content a').attr('target','_blank');});</script> |
参照リンク
例：リンク
Markdown
|
1 2 3 4 5 |
[リンク][1] [リンク][2] [1]: http://example1.com/ "タイトル" [2]: http://example2.com/ "タイトル" |
HTML
|
1 2 |
<a href="http://example1.com/" title="タイトル">リンク</a> <a href="http://example2.com/" title="タイトル">リンク</a> |
調べて初めて知ったリンクのやり方
画像
例：
Markdown
|
1 |
 |
HTML
|
1 |
<img src="/wp-content/uploads/2016/10/SampleLogo.png" alt="ネコ" title="タイトル" /> |
画像リンク
例：
Markdown
|
1 |
[](/wp-content/uploads/2016/10/SampleLogo.png) |
HTML
|
1 2 3 |
<a href="/wp-content/uploads/2016/10/SampleLogo.png"> <img src="/wp-content/uploads/2016/10/SampleLogo.png" alt="ネコ" title="タイトル" /> </a> |
箇条書き
- 例：箇条書き
Markdown
|
1 |
* 箇条書き |
HTML
|
1 |
<li>箇条書き</li> |
箇条書きの下は改行を入れること
注釈
例：ひまぬしは暇だ1
Markdown
|
1 2 |
ひまぬしは暇だ[^1] [^1]:彼が言っていた |
HTML
|
1 2 3 4 5 6 7 8 9 |
例：ひまぬしは暇だ<sup id="fnref-118-1"><a href="#fn-118-1">1</a></sup> <div class="footnotes"> <hr /> <ol> <li id="fn-118-1"> 彼が言っていた <a href="#fnref-118-1">↩</a> </li> </ol> </div> |
この記事の一番下に勝手に注釈の内容が下に行く
ヘルプテキスト
例：マウスオーバーしてみて
Markdown
|
1 2 |
マウスオーバーしてみて *[マウスオーバーしてみて]: こんな感じでヘルプコメントが出るぞ |
HTML
|
1 |
<abbr title="こんな感じでヘルプコメントが出るぞ">マウスオーバーしてみて</abbr> |
コード
|
1 2 |
例:コード内容 |
Markdown
|
1 2 3 |
~~~ コード内容 ~~~ |
HTML
都合上貼り付けられなかった…
codeタグで括られる
罫線
例：
|
1 2 3 4 5 6 7 8 9 |
* * * *** ***** - - - --- |
|
1 2 3 4 5 |
<hr /> <hr /> <hr /> <hr /> <hr /> |
上下に改行が必要
ハイフン３つがわかりやすかな
テーブル
例：
| ヘッダ1 | ヘッダ2 | ヘッダ3 | ヘッダ4 |
|---|---|---|---|
| 通常 | 左寄せ | 真ん中寄せ | 右寄せ |
Markdown
|
1 2 3 |
ヘッダ1|ヘッダ2|ヘッダ3|ヘッダ4 --- | :--- | :---: | ---: 通常|左寄せ|真ん中寄せ|右寄せ3 |
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<table> <thead> <tr> <th>ヘッダ1</th> <th align="left">ヘッダ2</th> <th align="center">ヘッダ3</th> <th align="right">ヘッダ4</th> </tr> </thead> <tbody> <tr> <td>通常</td> <td align="left">左寄せ</td> <td align="center">真ん中寄せ</td> <td align="right">右寄せ</td> </tr> </tbody> </table> |
git hub ではヘッダの-は３つ入れることになっている
あとがき
本当は段落分けとかも書きたいので後日更新します
マークダウンで高速なライティングライフを！
参考
Markdown quick reference
official Markdown project
Markdown Extra
- 彼が言っていた ↩
スポンサードリンク