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

in #jp-newbie7 years ago (edited)



こんにちは!

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

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

→ マークダウンについて(Wikipedia)

markdown_steemit.png


テキスト用


文字スタイル

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


引用符

文頭に >(ライトアングル)を記述

〈Markdown 記述〉

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

〈Steemit の表示〉

引用符を付加する。

引用符を付加する。

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



リンク

リンク(URLそのもの)

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

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



見出しのサイズ

#(ハッシュ)の数 = 見出しのサイズ

                                                                     
Steemit の表示Markdown 記述

header1

# header1

header2

## header2

header3

### header3

header4

#### header4
header5
##### header5
header6
###### header6



ページ内リンク(アンカー)

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

〈Markdown 記述〉

* [目次1](###太文字)
* [目次2](###斜体(イタリック))

〈Steemit の表示〉



改行ルール

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


〈Steemit の表示〉

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

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


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


〈Steemit の表示〉

サンプルテキスト、サンプルテキスト。(半角スペース × 2)
サンプルテキスト。(半角スペース × 2)
サンプルテキスト、サンプルテキスト。(半角スペース × 2)



リスト表示

① 番号なしリスト

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

〈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-1
    2. 入れ子番号付きリスト1-2
  2. 番号付きリスト2
  3. 番号付きリスト3




- -

レイアウト用


テーブル(表組み)

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

〈Markdown 記述〉

|題字1|題字2|題字3|
|:--|--:|:--:|
|align left|align right|align center|
|左|右|中央|

〈Steemit の表示〉
題字1題字2題字3
align leftalign rightalign center
中央


横線

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


〈Markdown 記述〉

---

〈Steemit の表示〉

↑ サンプルの横線




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



- -

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

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

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



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

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


→ Atom 公式 Website

■ Visual Studio Code
Icon特 徴環 境
VScode.pngMicrosoft社のテキストエディタです。
プレビューウィンドを開きながらマークダウン記述をすることができます。
Win/mac〈無料〉


→ Visual Studio 公式 Website

■ typora

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


→ typora 公式 Website



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

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


→ Visual Studio 公式 Website

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

→ iA Writer ダウンロード

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


→ Uiysses ダウンロード

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


→ Boostnote ダウンロード

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


→ JotterPad ダウンロード



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

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


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

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



では〜!


Sort:  

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

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

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

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

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

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

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

色とかは変えられないですよね(´;ω;`)

ありがとうございます😊

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

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

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

ぜひぜひ!

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

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