Movable Type 4の投稿は、Markdown一択です。

December 10, 2008

前々からMT4純正の、WYGIWYGは嫌いでした。特に1行開けたいときなんかに<br />タグを連発するあたり、大嫌いです。

かといって、プラグインのWYGIWYGも何個か試しましたが、どれもしっくり来るものが無く半ば諦めかけていましたが、ここに来て凄いのを発見しました。

それも純正です。 以前書いたエントリMovableTypeでコメントスパム防止ってやつでも、純正機能を見落としていました。

見落とし第二弾です(笑

nishiakiさんが提案しているこの方法なんかも非常に良案だと思いますし、私も有り難くまねさせて頂いています。
でも、これはあくまでもhtmlの知識がある前提なので、プロユースだったりします。

このMarkdownは、特にhtmlの知識が無くても、文章を構造化したいという要望に応えられます。

前置きはこれぐらいで、実践へ。

markdown.png まずMTの投稿画面の右上の「フォーマット」で「Markdown」を選択。 (Markdown+SmartyPantsってのもありますが、あまり必要ないかも、興味がある方はこちらへ「小粋空間: SmartyPants とは」)

実際の投稿は至って簡単。タグで囲う必要がなく、ある特定の記号をマークアップしたい文言の頭(末尾)に記入するだけです。

見出し

一番手軽さを理解し易い。見出しから。

見出しは、「#」(シャープ)で表します。
「#」1つを頭に付けると<h1>タグに。2つにすると<h2> 3つだと<h3>凄い便利。

#見出し1ですよ。
<h1>見出し1ですよ</h1>

##見出し2ですよ。
<h2>見出し2ですよ</h2>

###見出し3ですよ。
<h3>見出し3ですよ</h3>

###見出し3ですよ。###(閉じる事も可能です)
<h3>見出し3ですよ</h3>

こんな感じでマークアップされます。恐らくブログの場合は、サイトタイトルとページタイトルで、h1とh2は使っていることが多いと思うので、実際に多用するのは、h3〜h6になるかと思います。

リスト

次にリストを。

これも凄い簡単。頭に「*」(アスタリスク)を記入し半角スペースを空けること。半角スペースを忘れるとマークアップされません。

* リスト1
* リスト2
* リスト3
こんな感じで記入すると

<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>
こんな感じにマークアップされ

  • リスト1
  • リスト2
  • リスト3

こんな感じに表示されます。 「*」の代わりに「-」「+」でもOKです。

数的リストは

1. リスト1
2. リスト2
3. リスト3
このように記入すると

<ol>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ol>

こんな感じでマークアップされ

  1. リスト1
  2. リスト2
  3. リスト3

こんな感じに表示されます。

アンカー(リンク)

よく使われると思われるアンカー(リンク)を。 若干面倒ですが、覚えれば簡単です。

[google](http://google.com)
こんな感じで書くと

<a href="http://google.com">google</a>
こんな感じでマークアップされ

google
こんな感じなります。

XHTML 1.1 では target="blank" という書き方は準拠していないのであれなんですが、一応target="blank"も調べてみたのですが、発見出来ませんでした。知っている方、教えて下さい。

強調

強調表現のstrongとemですがこれは「*」「_」(アンダーバー・アンダースコア)を使います。

_こうすると斜体に_

<em>こうすると斜体に</em>

こうすると斜体に

__こうすると太文字に__

<strong>こうすると太文字に</strong>

こうすると太文字に

「_」を「*」に替えてもOKです。

段落と改行

段落(<p>タグ)は、一行開けて投稿を行えば自動で。 改行(<br />)は、改行したい場所に、半角スペースと2個入れると改行してくれます。

その他

自動リンク

http:google.com このように、http~から始まるURLをそのままアンカーする場合は、 <http:google.com>
と記入します。

罫線

罫線<hr />は、3つ以上の「*」「_」を並べます。 * * *
***
*****
- - -

イメージ

MTの場合アップローダーがあるので、それを使うのが一番楽だと思いますが、一応方法を。

![代替えテキスト](http://bulanco.net/images/img.jpg)
こんな感じで記入すると、イメージが表示されます。「[ ]」の中は代替えテキストを入れます。

イメージをリンクさせたいときは、こんな感じです。
[![Alt 代替えテキスト](http://bulanco.net/images/img.jpg)](http://google.com)
複雑に見えますが、基本的にはアンカーとイメージ表示の組み合わせです。

codeと引用文

ソース等をブログに投稿する時なんかに使う、<code>タグを入れるのは、「```」バッククォーテーション。

引用文は、「>」です。

以上です。 皆さんも、Markdownを使って簡単に正しい構文でエントリーされてみて下さい!

このエントリーは以下のページを参考にさせて頂きました。
2310::blog: Markdown文法の全訳
原文訳をされた2310::blog様参考になりました。ありがとうございました。

[実績紹介]Fireworld福岡(五大株式会社)[BaserCMS]
[実績紹介]Fireworld福岡(五大株式会社)[BaserCMS]
Fireworld福岡（五大株式会社）様のWebサイトを公開しました。 薪ストーブを専門に販売、設置、施工をされている会社です。 うちのシンプルなページを気に入って下さり、お問い合わせを頂きました... MORE »
[Movable TypeをCMSとして使う] 第4回 MT4?MTOS?
[Movable TypeをCMSとして使う] 第4回 MT4?MTOS?
前回のエントリ([Movable TypeをCMSとして使う] 第3回 ファイル構成を考える)の続きです。 MTこと、Movable Typeには、バージョン4から、MT4とMTOS(オープンソ... MORE »
[Movable TypeをCMSとして使う] 第3回 ファイル構成を考える
[Movable TypeをCMSとして使う] 第3回 ファイル構成を考える
前回のエントリ([Movable TypeをCMSとして使う] 第2回 プラグインを考える)の続きです。 Movable Typeは、あくまでBlogとして使うことを前提に作られていますので... MORE »
[Movable TypeをCMSとして使う] 第2回 プラグインを考える
[Movable TypeをCMSとして使う] 第2回 プラグインを考える
前のエントリ([Movable TypeをCMSとして使う] 第1回 構成を考える)の続きです。 書く順番が違う気もしますが、MTをCMSとして使う時に、便利なプラグインをご紹介します。 プラ... MORE »
[Movable TypeをCMSとして使う] 第1回 構成を考える
[Movable TypeをCMSとして使う] 第1回 構成を考える
前置き 先日、告知したサト研が来週末2月21日に行われます。今回から数回にわたりのサト研LT(ライト人グトーク)用に、ブログで先に書いてまとめておきます。時間的にも全部話せないと思うので、「詳し... MORE »

Category

只今、コメント機能が正常に機能していません。ご意見ご要望はこちらからどうぞ。

コメントする

このブログ記事に対するトラックバックURL

モカモカ工房 - Movable Type4の入力フォーマットはMarkdownがいいかな ( January 30, 2009 4:26 PM )

　Movable Type4のブログの記事を作成する時、エディターのフォーマット... 続きを読む

ヤマダヤスヒロ
ヤマダヤスヒロ

福岡県 福岡市在住 Webデザイナー。
1973年福岡生まれ。射手座、B型。HNは、やいぶ・Yaive など。

幼少期から、モノを作ることが大好き。しかし、小学生の頃の夢は弁護士。 中学生で、漫画家を志すも、高校生時に建築に強く興味を持ちあっさり方向転換。 某デザイン系大学を経て、インテリアデザイナーになる。その後建築士の免許を取得。 建設会社で現場監督を経験、建築塗装会社で営業を経てWebマスターになる。 2006年に独立開業、BULANCOとしてWeb制作に携わる。現在に至る。

業務範囲
制作環境
参加コミュニティー
ページトップへ