書く、走る。

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


はてなブロガーさんは読者登録をお願いします

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

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

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

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

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

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


<スポンサーリンク>


Markdown記法とは

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

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

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

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

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

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

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


「Markdown記法」も編集画面は「Markdown」と「プレビュー」の2種類しかありません。やはり「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>

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

    ``     
    (半角4文字以上の空白)<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記法」の方が記号が簡単で使いやすい



<スポンサーリンク>

まとめ

今回はMarkdown記法で記事を書いてみました。

【結論】Markdown記法がおすすめ!

見出しの付け方、htmlコードの表示など、「はてな記法」と比較した結果、「Markdown記法」が書きやすいです!


昨日、今日とはてなブログの編集モードについて検証してみましたが

Markdown記法 > はてな記法 >>>> 見たままモード


という結論に達しました。

実はかなり「はてな記法」が書きやすいと思っていたのですが、明日からは「Markdown記法」で記述していきます!

まだ編集モードで「Markdown記法」を試していない方は、トライしてみてくださいね♪