{ "componentChunkName": "component---src-templates-blog-post-jsx", "path": "/post/write-post-with-markdown-without-plugin-beginner/", "result": {"data":{"site":{"siteMetadata":{"title":"WEB EGG","author":"Leko - CTO at Yuimedi"}},"markdownRemark":{"id":"4de5521c-db1b-588c-98c9-bb9a47ada14d","excerpt":"こんにちは。 平成生まれですが昭和の曲にハマっています。 今回の記事は、Markdown記法というものでで書いています。 Markdownとは、ざっくり言うとタグを書かずに効率よくマークアップが出来る言語です。 WordPressでブログを書いていて、 勝手にp…","html":"

こんにちは。
\n平成生まれですが昭和の曲にハマっています。

\n

今回の記事は、Markdown記法というものでで書いています。
\nMarkdownとは、ざっくり言うとタグを書かずに効率よくマークアップが出来る言語です。

\n

WordPressでブログを書いていて、
\n勝手にpタグが入るビジュアルリッチエディタは使いたく無いけど
\nタグをいちいち書くの面倒臭い…
\nMarkdownでブログ更新したいなー。
\nと思うことは無いでしょうか。私はあります。

\n

そこを解決するために調べてみたら、
\nMarkdown記法でWordpressのブログを更新することが出来たので、
\nMarkdownの勉強がてら、Wordpressのブログを更新する方法をまとめます。

\n\n

目標

\n

今回は長くなりそうなので、基礎編と実践編の２部構成にしています。
\n基礎編では

\n\n

ことを目標にしています。

\n

今回は基礎編で、Markdownに基礎ついての学んだことをまとめていて、
\n応用編では、Markdownが使える環境と、実際にブログを更新することについて書いていきます。

\n

では早速Markdownについて書いていきます。

\n

Markdownとは

\n

wikipediaにはこう書いてあります。

\n
\n

Markdown は、文書を記述するための軽量マークアップ言語のひとつである。
\n「書きやすくて読みやすいプレーンテキストとして記述した文書を、妥当なXHTML（もしくはHTML）文書へと変換できるフォーマット」として、ジョン・グル―バー（John Gruber）により作成された。
\n[中略]Markdownの記法の多くは、電子メールにおいてプレーンテキストを装飾する際の慣習から着想を得ている。
\nMarkdown – Wikipedia

\n
\n

要は、HTMLをより書きやすく・読みやすくしたマークアップ言語の一つです。
\nタグを１文字も書かずに、ブログを書き上げることができます。

\n

実際に使われている例では、
\nGithubのREADMEファイルはMarkdownで書かれています。

\n

基本的な文法

\n

Markdownについて把握した所で、
\n実際に書き方について勉強していきます。

\n

Daring Fireball: Markdown Syntax Documentation

\n

Markdownの公式ページ（英語）から
\n私が使いそう・便利だと思うものを掻い摘んでまとめます。

\n

なお、勉強した過程で作ったMarkdown記法まとめファイルをGithubにて公開しています。
\n実際の見た目と書いているコードが読めるようにしていますので、
\n記事よりもっとくわしく知りたい方など、宜しければそちらも御覧ください。
\nGithub – markdown_plactice

\n

見出し

\n
行頭に`#`をつけると見出しになります。\n`#`の個数により、見出しのレベルが変わります。\nex.\n# 見出し1\n### 見出し3\n##### 見出し5
\n

行頭に#をつけると見出しになります。
\n#の個数により、見出しのレベルが変わります。 ex.

\n

見出し1

\n

見出し3

\n
見出し5
\n

段落、改行

\n
段落（`p`）を使う場合は、そのまま書きます。\n改行しただけではMarkdown上では改行されません。\n明示的に改行をしたい場合には、行末に半角スペースを２つ（` `）入れます。\n段落を分ける場合には空行を間に１つ入れます。
\n

段落（p）を使う場合は、そのまま書きます。
\n改行しただけではMarkdown上では改行されません。
\n明示的に改行をしたい場合には、行末に半角スペースを２つ（“）入れます。

\n

段落を分ける場合には空行を間に１つ入れます。

\n

文字の強調

\n
文字を強調したい場合には、\nアスタリスク（`*`）かアンダースコア（`_`）で強調したい単語を囲みます。\n*１つで囲むと弱い強調*（斜体）、**２つで囲むと強い強調**（太字）になります。\nどちらを使っても変わらないので、好みに合わせて使えるようです。
\n

文字を強調したい場合には、
\nアスタリスク（*）かアンダースコア（_）で強調したい単語を囲みます。
\n１つで囲むと弱い強調（斜体）、２つで囲むと強い強調（太字）になります。
\n*と_どちらを使っても変わらないので、好みに合わせて使えるようです。

\n

引用

\n
> 引用をする場合には行頭に`>`を付けます。\n> この中でも段落や見出し、リンクなどが使うことが出来ます。
\n
\n

引用をする場合には行頭に>を付けます。
\nこの中でも段落や見出し、リンクなどが使うことが出来ます。

\n
\n

リスト

\n
+ 行頭にアスタリスク（`*`）かプラス（`+`）かハイフン（`-`）をつけるとリストになります。\n+ どれを使ってもいいし、混ぜても使えますが、揃えたほうが見やすいと思います。\n    - また、リストは入れ子にすることも出来ます。\n    - リストは空行で囲わないと、変になることがあります。
\n\n

参照型リンク

\n
文章中にリンクを使いたい時には、`[リンクしたい文字][]`を書きます。\nそして、文章の最後に`[リンクしたい文字]: URL`を書くとリンクが貼れます。\n非常に見やすいし、リンクが管理しやすいのでお勧めです。\n例えばこんな感じです。[Google][]\n\n[Google]: http://google.com
\n

文章中にリンクを使いたい時には、[リンクしたい文字][]を書きます。
\nそして、文章の最後に[リンクしたい文字]: URLを書くとリンクが貼れます。 非常に見やすいし、リンクが管理しやすいのでお勧めです。

\n

例えばこんな感じです。Google

\n

必要に応じてHTMLタグも使う

\n
<span>必要に応じて</span>HTMLのタグを<a href=\"#\">使うことも</a>できます。\n<strong>Markdowでは出来ない事や限界</strong>があるので、<small>そこを補うために</small>使うことができます。\nしかし、多用すると可読性や保守性が落ち、<cite>Markdown</cite>の理念に反するので、必要最小限に留めておくのが吉です。\n多数使う必要がある場合には、<em>Markdownを使うのを見直す</em>ほうがいいかもしれません。
\n

必要に応じてHTMLのタグを使うこともできます。
\nMarkdowでは出来ない事や限界があるので、そこを補うために使うことができます。
\nしかし、多用すると可読性や保守性が落ち、Markdownの理念に反するので、必要最小限に留めておくのが吉です。
\n多数使う必要がある場合には、_Markdownを使うのを見直す_ほうがいいかもしれません。

\n

インラインコード

\n
インラインコードとは、さっきから説明で使っている`こういうの`です。\nこれをやるためには、インラインコードにしたい文字をバックスラッシュ（`）で囲います。
\n

インラインコードとは、さっきから説明で使っているこういうのです。
\nこれをやるためには、インラインコードにしたい文字をバックスラッシュ（`）で囲います。

\n

コード

\n
コードを書きたい場合には行頭に半角スペース４つ（`    `）かタブ（`\\t`）を入れます。\nこの中で書かれたものはMarkdown記法は無効になり、プレーンテキストになります。\nソースコードなどを載せたい場合にいいと思います。
\n

コードを書きたい場合には行頭に半角スペース４つ（ ）かタブ（ ）を入れます。 この中で書かれたものはMarkdown記法は無効になり、プレーンテキストになります。 ソースコードなどを載せたい場合にいいと思います。

\n

Markdownのメリットデメリット

\n

如何でしたでしょうか。
\naタグなど文章中に埋め込むと読みにくくなるものも、
\nシンプルに読み書きできると思います。

\n

個人的にMarkdownの好きなところは、

\n\n

です。
\nそんな素敵なMarkdownですが、文書構造を表す事が目的の為、
\nwebサイトに用いようとすると、どうしても限界があります。

\n\n

一応、ブロック要素もインライン要素もMarkdown内に書くことは出来るのですが、
\nゴリ押すくらいなら、普通にHTMLを書いたほうがいいと思います。
\nあくまでブログ記事やドキュメントなどに使う程度と割り切ったほうが幸せになれそうです。

\n

また、

\n\n

というデメリットもあります。

\n

次回予告

\n

次回、実践編では

\n\n

ことについて書こうと思います。

\n

最期まで読んで頂きまして、ありがとうございました。

","timeToRead":10,"frontmatter":{"title":"プラグインを使わずにMarkdownでWordPressのブログを更新する（基礎編）","tags":["Markdown","Wordpress"],"date":"February 26, 2013","featuredImage":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='144'%20viewBox='0%200%20400%20144'%20preserveAspectRatio='none'%3e%3cpath%20d='M0%2072v72h401V0H0v72m0%201'%20fill='%23d3d3d3'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":2.783333333333333,"src":"/static/28ecc7f5bc93d06521e4a877256df39e/2db26/featured-image.jpg","srcSet":"/static/28ecc7f5bc93d06521e4a877256df39e/466a3/featured-image.jpg 334w,\n/static/28ecc7f5bc93d06521e4a877256df39e/2db26/featured-image.jpg 549w","srcWebp":"/static/28ecc7f5bc93d06521e4a877256df39e/f142c/featured-image.webp","srcSetWebp":"/static/28ecc7f5bc93d06521e4a877256df39e/cd98f/featured-image.webp 334w,\n/static/28ecc7f5bc93d06521e4a877256df39e/f142c/featured-image.webp 549w","sizes":"(max-width: 549px) 100vw, 549px"}}}}}},"pageContext":{"slug":"/write-post-with-markdown-without-plugin-beginner/","previous":{"fields":{"slug":"/write-jquery-plugin-with-coffeescript/"},"frontmatter":{"title":"CoffeeScriptでjQueryプラグインを書いてみて思ったこと","tags":["CoffeeScript","JavaScript","jQuery"]}},"next":{"fields":{"slug":"/create-site-with-github-pages-and-jekyll/"},"frontmatter":{"title":"Githubページを作ってjekyll+Markdownで更新する方法","tags":["Github","jekyll","Markdown"]}}}}, "staticQueryHashes": ["2585454260","2954598359"]}