熱しやすく冷めやすいコーンポタージュ

気分屋アラサーOLによる着の身着のままブログ

はてなブログを始める時に覚えたい!Markdown記法

ごきげんよう〜かみやです。
私はhtmlにもcssにも疎いのですが、はてなブログを始めるにあたって書き方としてMarkdown記法」に興味が湧いたので少しずつ勉強していきたいと思います!

Markdown(マークダウン)とは

そもそもMarkdownとはどのような意味があるのでしょうか?

主な意味 : 値下げ、値下げ額

なるほど。値下げ額。
これは全然関係なさそうですね〜!
次の説明文を読んでみましょう。

Markdown(マークダウン)は、文書を記述するための軽量マークアップ言語のひとつである。
「書きやすくて読みやすいプレーンテキストとして記述した文書を、妥当なXHTML(もしくはHTML)文書へと変換できるフォーマット」として、ジョン・グルーバー(英語版)により作成された。アーロン・スワーツも大きな貢献をしている。Markdown の記法の多くは、電子メールにおいてプレーンテキストを装飾する際の慣習から着想を得ている。

こちらの文章がまさしく、Markdownについての説明ですね!
ジョンさんがという方が作成したマークアップ言語の一つという事です。
マークアップ言語がマークダウンという名前なのがすでにモヤモヤしているのですが、そこは勉強不足なので今回は置いておきます。

基本的な記法

今回は私にとって初記事ですが、下記の方法を使用しています。

1.見出しの文字サイズ(みだしのもじサイズ)
2.改行(かいぎょう)
3.引用(いんよう)
4.リンク(リンク)
5.水平線(すいへいせん)
6.リスト(リスト)
7.code記法(コードきほう)
8.強調(きょうちょう)
9.おまけ(おまけ)〜リアルタイムプレビュー〜

1.見出しの文字サイズ(みだしのもじサイズ)

見出しにしたい文字の手前に「#(シャープ)」を1〜6個入力することによって、6段階の大きさに表示されます。

記述方法

#シャープ1個
##シャープ2個
###シャープ3個
####シャープ4個
#####シャープ5個
######シャープ6個

表示される文字例

シャープ1個

シャープ2個

シャープ3個

シャープ4個

シャープ5個
シャープ6個

シャープが多いほど文字は小さくなるんですね!
普段PtとかQとかの感覚だと数字が大きい方が文字サイズも大きくなりますが、それと反対の考え方なので注意が必要です。
ちなみにシャープを7個にしても、これ以上は反映されませんでした。

2.改行(かいぎょう)

入力した文字データにいくらエンターキーを押して改行をしていたとしても、Markdown記法では反映されません。
でも今この瞬間、改行されてますよね?

反映されません。 <改行!>
でも今この瞬間、改行されてますよね?

ここです!
改行を入れたい場合は、文末の後に半角スペースを2つ入力します。

記述方法

・矢印の先にスペースを入れていない場合→

改行が失敗している
・矢印の先にスペースを入れている場合→
改行が成功している

表示される文字例

・矢印の先にスペースを入れていない場合→ 改行が失敗している
・矢印の先にスペースを入れている場合→
改行が成功している

慣れたら簡単な記法ですが、改行に関しては、直感的な表記ではないし打ち忘れのないように慣れるまでが大変そうですね。
スペースって目には見えないので、記述ミスしやすそうですし……。 必ずプレビューで読み返してみて、綺麗な見た目の文章になっているか確認が必要です。

3.引用(いんよう)

引用文として他の本文と見た目を区別する時などに便利ですね。
文頭に記号の「>」を入れるだけでOKです。

記述方法

>文頭に「>」を入力すると引用文になります  
>このブログのフォーマットだと、枠線で囲いができます。
フォーマットにより、文頭に線がつくタイプや、ダブルコーテーションで囲うようなデザインになることもありますね。

表示される文字例

文頭に「>」を入力すると引用文になります
このブログのフォーマットだと、枠線で囲いができます。 フォーマットにより、文頭に線がつくタイプや、ダブルコーテーションで囲うようなデザインになることもありますね。

4.リンク(リンク)

文字に飛ばしたいURLの情報をつけておくには、[]と()を使用し、下記の方法でURLを埋め込んでおきます。

記述方法

例えば[【はてなブログ】](http://hatenablog.com/)に飛ばしたい

表示される文字例

例えば【はてなブログ】に飛ばしたい

5.水平線(すいへいせん)

これですね〜〜〜↓

↑これです!!!

記述方法

---    
水平線^▽^  
***

表示される文字例


水平線^▽^


6.リスト(箇条書き)(リスト(かじょうがき))

リスト化したい文章の行頭に、「*」を半角でつけると箇条書きになっていきます。
なお、「*」の直後には半角スペースかタブが必要です。
また、文章に挟まれている場合、リストにしたい行の前後には空行が必要です。
階層を作りたい場合は、「*」の前に半角スペース4つかタブ1つを差し入れます。

記述方法

* リスト1
    * リスト1−1
    * リスト1−2
* リスト2
    * リスト2−1

表示される文字例

7.code記法(コードきほう)

バッククォート「`」で文字列を囲むことで、コードを表示することができます。

記述方法

文字色を<span style="color:#62c7c9">これ</span>にしたい場合は`<FONT color="#62c7c9">`このようなhtml`</FONT>`を入力します。

表示される文字例

文字色をこれにしたい場合は<FONT color="#62c7c9">このようなhtml</FONT>を入力します。

8.強調(きょうちょう)

ここでは、太字にすることを強調と表現しています。
__ か ** で囲むと、太字になります。

記述方法

強調したい部分は、__囲みます!__

表示される文字例

強調したい部分は、囲みます!

9.おまけ(おまけ)〜リアルタイムプレビュー〜

はてなブログを書く上でMarkdown記法が便利そうなことはわかったのですが、マスターするまではメモ帳や他テキストソフトではなく、直接はてなブログの編集画面で記事を書いた方がいいと思います。
その理由は二つあります!

1.下書き保存ができる!

どこのブログ機能にもあるのかもしれませんが、公開前の文章を下書き保存できるのは便利ですね。

2.プレビューで確認しながら書ける!

はてなブログのプレビューには二種類あり、本当にリアルタイムで文字の大小等の確認ができる「リアルタイムプレビュー」と、実際のフォーマットに表示した場合の確認ができる「プレビュー」があります。 f:id:ccamya:20170305185033p:plain リアルタイムプレビューは画面が縦に2分割され、
左が入力ボックス、右がプレビュースペースとなります。

この二つのプレビューを駆使して、誤字脱字がなく見やすい文章を書いて行きたいですね。

とにかく便利なMarkdown記法!

今回は初心者ということで、はてなブログに記事を書く際に使えそうな基本的なMarkdown記法を勉強してきました。
勉強してみると、全くのweb初心者はもちろんのこと、htmlに慣れた方でも 覚える価値がある記法だと感じます。
私は今後もMarkdown記法をどんどん使用して、はてなブログを書いていこうと思います〜〜!
知識を蓄えるメモを兼ねた雑多ブログになる予定ではありますが、その1記事目を閲覧いただきましてありがとうございました。
ではみなさん、ごきげんよう^▽^