【保存版】初心者〜中級者向け〈マークダウン〉for Steemit（Japanese Ver.）

こんにちは！

Steemit の投稿ではマークダウン（Markdown）形式がサポートされています。
HTML の知識がなくても、シンプルな記述で文字を編集できる使い勝手のよい記述法です。
メモ感覚で使用できるのでスマホからの投稿の際は重宝します。

以下に、使用頻度の高そうな記述をご紹介させていただいておりますので、記事作成の際の参考にしていただければと思います。

テキスト用

文字スタイル

スタイル	Markdown 記述	Steemit の表示
太文字	∗∗太文字∗∗	太文字
斜体（イタリック）	∗斜体（イタリック）∗	斜体（イタリック）
太文字の斜体	∗∗∗太文字の斜体∗∗∗	*太文字の斜体*
打ち消し線	∼∼打ち消し線∼∼	~~打ち消し線~~

引用符

文頭に >（ライトアングル）を記述

〈Markdown 記述〉

>引用符を付加する。
>
>引用符を付加する。
>>引用符を付加する。
>>引用符を付加する。

〈Steemit の表示〉

引用符を付加する。

引用符を付加する。

引用符を付加する。
引用符を付加する。

リンク

リンク（URLそのもの）

URLを記述すると自動的にリンクテキストになります。

スタイル	Markdown 記述	Steemit の表示
リンク（URLそのもの）	http:⁄⁄steemit.com	http://steemit.com
リンク（文言にリンク）	[リンクしたい文字](リンクURL)	リンクしたい文字

見出しのサイズ

#（ハッシュ）の数 = 見出しのサイズ

Steemit の表示	Markdown 記述
header1	# header1
header2	## header2
header3	### header3
header4	#### header4
header5	##### header5
header6	###### header6

ページ内リンク（アンカー）

上記の「見出し記法」を記述するとページ内リンク（アンカー）が自動的に作成されます。
そのアンカーへリンクを貼ることでページ内リンクが作成できます。
これは記事の目次などによく利用されます。

〈Markdown 記述〉

* [目次１](###太文字)
* [目次２](###斜体（イタリック）)

〈Steemit の表示〉

目次１
目次２

改行ルール

① 空白の行で挟まれた行、または複数行の文章は、１段落になります。

〈Steemit の表示〉

サンプルテキスト、サンプルテキスト、サンプルテキスト。

サンプルテキスト、サンプルテキスト、サンプルテキスト
サンプルテキスト、サンプルテキスト、サンプルテキスト。
サンプルテキスト、サンプルテキスト、サンプルテキスト。

② 段落内での改行 = 改行したい行の末尾に半角スペース × ２

〈Steemit の表示〉

サンプルテキスト、サンプルテキスト。（半角スペース × ２）
サンプルテキスト。（半角スペース × ２）
サンプルテキスト、サンプルテキスト。（半角スペース × ２）

リスト表示

① 番号なしリスト

-（ハイフン）、+（プラス）、*（アスタリスク）のいずれでも箇条書きリストを記述できます。

〈Markdown 記述〉

+ 箇条リストA
    + 入れ子 リストA-1
        + 入れ子 リストA-1-1
        + 入れ子 リストA-1-2
    + 入れ子 リストA-2
+ 箇条リストB
+ 箇条リストC

〈Steemit の表示〉

箇条リストA
- 入れ子リストA-1
  - 入れ子リストA-1-1
  - 入れ子リストA-1-2
- 入れ子リストA-2
箇条リストB
箇条リストC

② 番号付きリスト

1.(space)、で番号付きリストの記述が可能です。

〈Markdown 記述〉

1. 番号付きリスト1
    1. 入れ子番号付きリスト1-1
    1. 入れ子番号付きリスト1-2
1. 番号付きリスト2
1. 番号付きリスト3

〈Steemit の表示〉

番号付きリスト1
1. 入れ子番号付きリスト1-1
2. 入れ子番号付きリスト1-2
番号付きリスト2
番号付きリスト3

- -

レイアウト用

テーブル（表組み）

マークダウンはテーブル表示にも対応しています。
一見、複雑に見えますが慣れてしまえば HTML でテーブルを組むよりもずっと簡易です。

〈Markdown 記述〉

|題字１|題字２|題字３|
|:--|--:|:--:|
|align left|align right|align center|
|左|右|中央|

〈Steemit の表示〉

題字１	題字２	題字３
align left	align right	align center
左	右	中央

横線

*（アスタリスク）、_（アンダースコア）、-（ハイフン）を３つ以上連続して記述。スペースが入っても有効。

〈Markdown 記述〉

---

〈Steemit の表示〉

^{↑ サンプルの横線}

マークダウンの表示はブラウザやプラットフォームにより差異があり、
すべての環境で同じように表示される保証がないところは HTML と同じです。

- -

マークダウンの記述ができるエディタ

マークダウン記述法は特別なツールがなくても記述することができることが魅力ですが、プレビューや動作確認をしながら
記述することができるアプリケーションも開発されています。

ブログの下書きには何かしらのメモ用アプリを使用されている方もおられるかと思います。
マークダウンの導入をされる際に専用アプリをつかってみるのもよいかもしれません。

デスクトップアプリケーション

■ Atom

Icon	特　徴	環　境
	GitHub が開発した無料アプリです。左右にソースとプレビューを同時に表示しながら記述できます。	_{Win／mac〈無料〉}

→ Atom 公式 Website

■ Visual Studio Code

Icon	特　徴	環　境
	Microsoft社のテキストエディタです。プレビューウィンドを開きながらマークダウン記述をすることができます。	_{Win／mac〈無料〉}

→ Visual Studio 公式 Website

■ typora

Icon	特　徴	環　境
	直感的な操作系。高機能にしてシンプル。アプリの設計が秀逸でファンの多いエディタです。記述したその場でスタイリングされる仕組みなのでプレビュー表示の概念がありません。	_{Win／mac／Linux〈無料〉}

→ typora 公式 Website

携帯端末用アプリケーション

■ # Type

Icon	特　徴	環　境
	fromkk さんが個人で制作された Markdown エディタです。 Extension に対応し、記述の入力補助ツールも付いています。	_{Win／mac／Linux〈無料〉}

→ Visual Studio 公式 Website

■ iA Writer

Icon	特　徴	環　境
	シンプルながら充実した補助機能を実装したエディタです。それなりの価格がしますが Markdown入門に。	_{iOS〈¥600〉／mac〈¥3,600〉}

→ iA Writer ダウンロード

■ Uiysses

Icon	特　徴	環　境
	Markdown の拡張版である Markdown XL に対応。 Word形式/PDF形式や WordPress など各種別フォーマットへの書き出し機能や UI 編集機能まで実装した充実のエディタです。	_{iOS〈無料 + App内課金〉}

→ Uiysses ダウンロード

■ Boostnote

Icon	特　徴	環　境
	プログラマー用に開発された高機能エディタ。ユーザの評価はとても高いですがファイル共有は Dropbox のみ。	_{iOS／mac／Android／Windows〈無料〉}

→ Boostnote ダウンロード

■ JotterPad

Icon	特　徴	環　境
	基本的な機能を実装したシンプルなエディタ。PDF 変換やフレーズ検索を実装。	_{Android〈無料〉}

→ JotterPad ダウンロード

以上、マークダウンのまとめでした。
steemit の標準エディタのツールバーにもマークダウン用のツールが
いくつかありますのですでに活用されておられる方も多いかと思います。

今回紹介させていただいた記述法の中に１つでも今後の投稿の役に
立ちそうなものが見つけていただけたなら幸いです。

HTML タグ集もありますので、参考にしてくださいね！

【保存版】初心者〜中級者向け〈 HTML タグ〉for Steemit（Japanese Ver.）

では〜！

Sort:

Trending

[-]

yoshiko (72) 7 years ago

ありがとう！使わせていただきます✨🍀

$0.00

noteman (45) 7 years ago (edited)

リブログありがとうございます。

ヒントは@yoshikoさんのビギナー用ガイドだったりします（笑）

その節はこちらこそお世話になりました。

記法の情報が分散している印象があったのでそれらのまとめになるような投稿をさせていただきましたー。

近々英語版も作ってみようと思います。

tonpa (64) 7 years ago

これはすごいめちゃわかりやすいですね！

色とかは変えられないですよね（´；ω；`）

ありがとうございます😊

返信が遅れてしまいましてごめんなさい。

色はもしかするとコードのプレ表示のときに変えられるかもしれないのですが、通常の文章の文字は今のところできないようです。

neeeeeeeeeef (55) 7 years ago

はじめまして！
使わせて頂きますm(_ _)m

noteman (45) 7 years ago

ぜひぜひ！

地味なのですが、正しい見出しの付け方は SEO 的にも有効なのでそのあたりもまたご紹介させていただきますね。

ありがとうございます！宜しくお願いしますm(_ _)m

【保存版】初心者〜中級者向け〈マークダウン〉for Steemit（Japanese Ver.）

テキスト用

文字スタイル

引用符

リンク

リンク（URLそのもの）

見出しのサイズ

header1

header2

header3

header4

header5

header6

ページ内リンク（アンカー）

改行ルール

① 空白の行で挟まれた行、または複数行の文章は、１段落になります。

② 段落内での改行 = 改行したい行の末尾に半角スペース × ２

リスト表示

① 番号なしリスト

② 番号付きリスト

レイアウト用

テーブル（表組み）

横線

マークダウンの記述ができるエディタ

デスクトップアプリケーション

■ Atom

■ Visual Studio Code

■ typora

携帯端末用アプリケーション

■ # Type

■ iA Writer

■ Uiysses

■ Boostnote

■ JotterPad