はてなブロガー必見！Markdown記法にトライしてみたよ

f:id:kawarun:20200911131657j:plain:w450:h300
こんにちは、KAWARUN（カワルン）です。

今日は前回の「はてな記法でブログを書く」の続編「Markdownでブログを書く」に挑戦します！

\ そう、すでに今回もMarkdown入力は開始しています /

はてなブログには「見たままモード」「はてな記法」「Markdown記法」の３つの編集タイプがあります。前回「はてな記法」を試してみて、「見たままモード」よりも「はてな記法」の方が書きやすいと感じました。そこで今回はMarkdown記法にトライしながら「はてな記法」と比較し、今後の編集モードを決定したいと思います。

はてなブログをご利用の方は、今回の感想を参考にしていただけたら幸いです。

■ はてな記法や編集モードの切り替え方法はコチラをチェック ■

【はてなブログ】はてな記法で書いてみた！書き方と感想 - 書く、走る。

Markdown記法とは
では早速書いてみましょう！
見出しをつける
表の作成
文章の引用
htmlコードを表示させる方法
まとめ

<スポンサーリンク>

Markdown記法とは

今回記述する「Markdown記法」について調べました。

「Markdown記法」はマークアップ言語のひとつです。記号を使って素早く入力することができ、簡単で覚えやすいのが特徴です。

昨日の「はてな記法」と似ていますが、「はてな記法」はてなブログ独自の記述法であるのに対して、「Markdown記法」は「Qiita」「Dropbox Paper」など「はてなブログ」以外のサービスにも利用できます。

では早速書いてみましょう！

まずは編集モードを「Markdown記法」に切り替えます。

f:id:kawarun:20200911131503p:plain:w450:h250

■ Markdownの設定方法はこちらをチェック ■

【はてなブログ】はてな記法で書いてみた！書き方と感想 - 書く、走る。

「Markdown記法」も編集画面は「Markdown」と「プレビュー」の２種類しかありません。やはり「html」画面も欲しいのが本音です。

見出しをつける

早速、見出しをつけていきます。

はてなブログではタブにh2タグが含まれておらず、はてな記法にもh2タグの記号が存在しませんでした。
しかしMarkdown記法にはh2タグを表す記号があります！

見出しの付け方は以下のとおりです。

	html	Markdown記法
タイトル	`<h1>タイトル</h1>`	#タイトル
大見出し	`<h2>大見出し</h2>`	##大見出し
中見出し	`<h3>中見出し</h2>`	###中見出し
小見出し	`<h4>小見出し</h2>`	####小見出し

見出しの書きやすさ

▷「Markdown記法」も「はてな記法」も書きやすさに変わりはない
▷ h2の記号があるので「Markdown記法」が◎

表の作成

つづいて表を作成します。

a	左揃え	中央揃え	右揃え	e
aa	bb	cc	dd	ee

たとえば上の表を作るためには、次のように記入します。

    |a|左揃え|中央揃え|右揃え|e|
    |------|:-----|:---:|----:|-----|
    |aa|bb|cc|dd|ee|

Markdown記法を使うと、表も簡単に作成可能です。

また、文字の位置調整も：を使って簡単に指定できるのでGoodです！

表の作成のしやすさ

▷ 表の作成は「はてな記法」の方が簡単
▷「Markdown記法」は文字の位置指定が簡単にできる

<スポンサーリンク>

文章の引用

つぎに他人が書いた文章を引用する方法を記述します。

引用した文章

さらに引用も可能

上記のように引用するには次のように記述します。
メールやチャットでも>記号を使って返信するので、直観的に理解できていいですね！

　　>引用した文章
　　>>さらに引用も可能

引用のしやすさ

▷「Markdown記法」が簡単で直観的にわかる

htmlコードを表示させる方法

つぎはhtmlコードなどを入力したまま表示する方法です。

<h2>大見出し</h2>

上記のように表示するためには以下のように記入します。

    ``     
    (半角４文字以上の空白)<h2>大見出し</h2>
    ``

また、プログラムコードを記述する場合は、 ```（ファイルタイプ）～～``` と記入すると、ソースコードに色付けして表示（シンタックスハイライト）できます。

たとえば私のh2タグのCSSコードを記述してみます。

    .entry-content h2 {
      padding: 0.5em;
      color: #494949;
      background: #f5f5f5;
      border-left: solid 10px #ffb6c1;
    }

上記のように表示するには次のように入力します。

    ```css
         .entry-content h2 {
          padding: 0.5em;
          color: #494949;
          background: #f5f5f5;
          border-left: solid 10px #ffb6c1;
        }
    ```

html表示のしやすさ

▷ 「Markdown記法」の方が記号が簡単で使いやすい

<スポンサーリンク>