Ghostでブログを作ってみる(マークダウン編)

140922_web_402

前回の記事で、Ghostをインストールしました。 ブログ作成ということでまずは記事を書いて公開しなければ始まらないので、今回はGhostで記事を書く方法です。

マークダウン

マークダウンは、文章を記述するためのマークアップ言語の一つです。GitHubのREADME作成や、Tumblr、Qiitaなどでも採用されていて、色々なCMSのプラグインも提供されています。

書き方

ここからが実際の書き方の説明なんですが、分かりやすい(?)ようにHTMLと書き方の比較をしながら進めます。

このブログ内でよく使うマークアップ要素は、

ぐらいです。 他にもごくまれに使う要素があるかもしれませんが、上記要素にCSSでスタイルを設定したらほぼ完成ぐらいの簡素な作りになっています。


見出し:h

文頭に#をつけます(#の数によって見出しレベルが決められます)

MARK DOWN
	# 見出し1
	## 見出し2
	### 見出し3
	#### 見出し4
	##### 見出し5
	###### 見出し6
HTML
	<h1>見出し1</h1>
	<h2>見出し2</h2>
	<h3>見出し3</h3>
	<h3>見出し4</h4>
	<h3>見出し5</h5>
	<h3>見出し6</h6>
表示結果

見出し2

見出し3

見出しにIDを設定することも出来ます。

# 見出し1 {#heading1}

テキストの下に[=]か[-]をつけることでh1とh2を区別することも出来るみたいです。

他の見出しレベルは未検証です。

	見出し1
	===========
	見出し2
	-----------

段落:p

空白行で囲まれた段落が段落として扱われます

MARK DOWN
	&nbsp;
	段落
	&nbsp;
HTML
	<p>段落</p>
表示結果

段落

メニューに戻る


リスト:li

* + -を文頭につけます(インデントを下げて記号を変更すると入れ子として扱われます)

MARK DOWN
* リスト1
	+ リスト1-1
	+ リスト1-2
	+ リスト1-3
* リスト2
* リスト3
* リスト4
	- リスト4-1
	- リスト4-2
* リスト5
Markup
<ul>
<li>リスト1</li>
	<ul>
		<li>リスト1-1</li>
		<li>リスト1-2</li>
		<li>リスト1-3</li>
	</ul>
<li>リスト2</li>
<li>リスト3</li>
<li>リスト4</li>
	<ul>
		<li>リスト4-1</li>
		<li>リスト4-2</li>
	</ul>
<li>リスト5</li>
</ul>
表示結果
  • リスト1
    • リスト1-1
    • リスト1-2
    • リスト1-3
  • リスト2
  • リスト3
  • リスト4
    • リスト4-1
    • リスト4-2
  • リスト5

メニューに戻る


順序リスト: ol li

h5>

半角数字 + 半角スペース + .(ドット)でol(順序リスト)が表示されます。

MARK UP
			1. リストA
			2. リストB
			3. リストC
		

htmlのolとは違い上から順に理数との順序をならべない場合にはそのまま表示されます。

			8. リストC
			1. リストA
			4. リストB
		
HTML
			<ol>
				<li>リストA</li>
				<li>リストB</li>
				<li>リストC</li>
			</ol>
		
結果
  1. リストA
  2. リストB
  3. リストC

メニューに戻る


定義リスト:dl, dt, dd

定義リストは、マークダウンでは表記できないので直接HTMLで記述する必要があります。リスト内にマークダウンを記述することもできません。

MARK DOWNでは記述できません

HTML内にマークダウンを記述することはできません

	    <dl>
			<dt>ベジータ: </dt>
			<dd>エイジ732年生まれで身長164cm、体重56kg。趣味はトレーニング。食べ物の好き嫌いはなし。好きな乗り物はアタックボール。惑星ベジータの王子。</dd>
			<dt>ナッパ: </dt>
			<dd>ラディッツやベジータと比べて屈強な体格で、口髭と **禿げ頭 ** が特徴。惑星ベジータではエリート階級出身者ゆえ、王家の側近を務めていたが、フリーザ一味の中では大した地位ではなく、下級戦闘員からは「ナッパさん」と呼ばれていた。</dd>
		</dl>
	
HTML

こう書きます

	<dl>
		<dt>ベジータ: </dt>
		<dd>エイジ732年生まれで身長164cm、体重56kg。趣味はトレーニング。食べ物の好き嫌いはなし。好きな乗り物はアタックボール。惑星ベジータの王子。</dd>
		<dt>ナッパ: </dt>
		<dd>ラディッツやベジータと比べて屈強な体格で、口髭と<strong>禿げ頭</strong>が特徴。惑星ベジータではエリート階級出身者ゆえ、王家の側近を務めていたが、フリーザ一味の中では大した地位ではなく、下級戦闘員からは「ナッパさん」と呼ばれていた。</dd>
	</dl>
表示結果
ベジータ:
エイジ732年生まれで身長164cm、体重56kg。趣味はトレーニング。食べ物の好き嫌いはなし。好きな乗り物はアタックボール。惑星ベジータの王子。
ナッパ:
ラディッツやベジータと比べて屈強な体格で、口髭と禿げ頭が特徴。惑星ベジータではエリート階級出身者ゆえ、王家の側近を務めていたが、フリーザ一味の中では大した地位ではなく、下級戦闘員からは「ナッパさん」と呼ばれていた。

メニューに戻る


角括弧でテキスト、丸括弧でURLを囲むとテキストリンクが表示されます。

MARK DOWN
	[Yahoo!Japan](http://yahoo.co.jp)
	

また、リンクを変数風に指定しておき、必要な箇所で呼び出すことも出来ます。

	[1]: http://google.co.jp/	"Google"
	[2]: http://www.apple.com/	"Apple"
	[3]: http://yahoo.co.jp/	"Yahoo"

	[Google] [1]と[Apple] [2]は自社開発のスマートフォンを発売しているが[Yahoo] [3]からは発売されていない。
	

リンクをtarget=”_blank”にしたい場合は、HTMLで記述する方法しかないらしいですが、毎回HTMLを書くのがちょっとめんどくさいなって場合は

	<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<script language="JavaScript">
		$(document).ready( function () {
		   $("a[href^='http']:not([href*='" + location.hostname + "'])").attr('target', '_blank');
		})
	</script>
	

ってjsをheadタグ内に記述して下さい。

このjsの内容は、リンク先のドメインが外部(自分が運営するサイトのルートではない)の場合は、別ウィンドウで開くです。

HTML
			<a href="http://www.google.co.jp" target="_blank">Google</a>と<a href="http://www.apple.com" target="_blank">Apple</a>は自社開発のスマートフォンを発売しているが<a href="http://www.yahoo.co.jp" target="_blank">Yahoo</a>からは発売されていない。
		
表示結果

GoogleAppleは自社開発のスマートフォンを発売しているがYahooからは発売されていない。

メニューに戻る


改行:br

文末にスペースを二つ挿入します

MARK DOWN
		改行前&nbsp;&nbsp;改行後
	
HTML
		改行前<br />改行後
	
表示結果

改行前
改行後

メニューに戻る


画像の表示:img

![altテキスト](url “title”)で画像を挿入できます。( [altテキスト]と”title”は省略できます。)

MARK DOWN
		![LOGO](http://copycat.tokyo/99dd3h05/wp-content/uploads/2014/09/cc_logo.png"COPYCAT.TOKYO")
	

画像リンクは[![alt](画像パス)](url)です。

	[![LOGO](http://copycat.tokyo/99dd3h05/wp-content/uploads/2014/09/cc_logo.png)](http://copycat.tokyo)
	

Markdownでは画像のwidth, heightを指定するできないので指定するときは、imgタグを直接書き、CSSも記述する必要があります。

HTLM
		<img src="http://copycat.tokyo/99dd3h05/wp-content/uploads/2014/09/cc_logo.png" width="150" height="150" alt="LOGO" title="COPYCAT.TOKYO" />
	
表示結果

LOGO

メニューに戻る


コードの表示:code

`code`でcodeの部分に実際に表示したいコードを記述します。

コードタグを逆クォーテーションで括ると中にコードを記述できます。タグで括るだけではなく、エスケープもしてくれます。

ちなみに逆クォーテーション`はShift+@です。内容に`を含めたい場合は“code“です。

コードブロック上下に空行を挿入しないと正しく表示されないことがあるみたいです。

MARK DOWN
		&nbsp;
		`print "Hello World!"`
		&nbsp;
	
HTML
		<pre>print "Hello World!"</pre>
	
表示結果
print "Hello World!"

メニューに戻る


罫線:hr

3つ以上の*(アスタリスク), -(ハイフン), _(アンダースコア)と半角スペースのみの行は、罫線として扱われる。

MARK DOWN
		***
		---
		___
	
HTML
		<hr />
	
表示結果

 

メニューに戻る


強調:strong

** ** か __ __ で囲みます。

MARK DOWN
		** strong **
		__ srong __
	
HTML
		<strong>strong</strong>
	
表示結果

strong

メニューに戻る


斜体:em

* * か _ _ で囲みます

MARK DOWN
		* em *
	
HTML
		<em>em</em>
	
表示結果

em

メニューに戻る


打ち消し:i

打ち消し線を使うには ~~ ~~ で囲みます。

MARK DOWN
		 ~~ 打ち消し ~~
	
HTML
		<s>打ち消し</s>
	
表示結果

打ち消し

メニューに戻る


引用:q, blockquote

> を文頭につけます

通常

> 引用するテキスト

複数の段落を引用する場合は

> 引用するテキスト1

>

> 引用するテキスト2

MARK DOWN
		 > 引用するテキスト1
		 >
		 > 引用するテキスト2
	
HTML
		<q>引用するテキスト</q>
                <blockquote>引用するテキストが2行以上の場合</blockquote>
	
表示結果

引用するテキスト

引用するテキストが2行以上の場合

メニューに戻る


テーブル:table

※ 今のところGhostではなぜかMarkDownでテーブルが表示されません。
マークダウンの2行目の:の位置がalignの位置になります。

MARK DOWN
	| Left align | Right align | Center align |
	|:-----------|------------:|:------------:|
	| This       |        This |     This     |
	| column     |      column |    column    |
	| will       |        will |     will     |
	| be         |          be |      be      |
	| left       |       right |    center    |
	| aligned    |     aligned |   aligned    |
HTML
<table>
	<thead>
		<tr>
			<th style="text-align: left">Left align</th>
			<th style="text-align: right">Right align</th>
			<th style="text-align: center">Center align</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td style="text-align: left">This</td>
			<td style="text-align: right">This</td>
			<td style="text-align: center">This</td>
		</tr>
		<tr>
			<td style="text-align: left">column</td>
			<td style="text-align: right">column</td>
			<td style="text-align: center">column</td>
		</tr>
		<tr>
			<td style="text-align: left">will</td>
			<td style="text-align: right">will</td>
			<td style="text-align: center">will</td>
		</tr>
		<tr>
			<td style="text-align: left">be</td>
			<td style="text-align: right">be</td>
			<td style="text-align: center">be</td>
		</tr>
		<tr>
			<td style="text-align: left">left</td>
			<td style="text-align: right">right</td>
			<td style="text-align: center">center</td>
		</tr>
		<tr>
			<td style="text-align: left">aligned</td>
			<td style="text-align: right">aligned</td>
			<td style="text-align: center">aligned</td>
		</tr>
	</tbody>
</table>
表示結果
Left align Right align Center align
This This This
column column column
will will will
be be be
left right center
aligned aligned aligned

You may also like...