あやおり子の不思議なランチタイム

あやおりこのランチタイムは、不思議なことがいっぱいあるよ。

HTMLでブログ書いていない?Markdown方式を使ったブログの書き方。

f:id:ayaoriko:20170910233028j:plain こんにちはーあやおりこです!

いきなりですが、ブログを書くときにどう書いていますか?

どこから書くかは人それぞれですが、私は見出しを考えてから、ブログの中身を書いています。

ブログ以外のメモの時も、私は箇条書きにしてから内容を詰めるのですが、以前の私は見出しの記号がバラバラなのが悩みでした。

例えば

【今日の1日】
今日は"いろいろ"なことがありました。

と書いてある日もあれば、

○今日の1日
今日は【いろいろ】なことがありました。

というように。

しかし、書き方が統一されていないことにより、「あれ?これはリストと見出しのどっちだっけ?」ということが度々起きたり、「見出しを設定し直すのが不便だなー」と悩んだこともしばしばありました

そんな私がたどり着いた方法が、Markdown方式でした。

Markdown方式って?

wikipediaにはこう書いてあります。

Markdown(マークダウン)は、文書を記述するための軽量マークアップ言語のひとつである。本来はプレーンテキスト形式で手軽に書いた文書からHTMLを生成するために開発されたものである。しかし、現在ではHTMLのほかパワーポイント形式やLaTeX形式のファイルへ変換するソフトウェア(コンバータ)も開発されている。各コンバータの開発者によって多様な拡張が施されるため、各種の方言が存在する。
Markdown - Wikipedia

マークアップとは、「ここが見出しですよー」「ここは文字を太くしてくださいねー」といった、コンピュータが読みやすいようにタグ付けをすることです。

そして、今回取り上げるMakrdown方式とは、タグを使わず、改行や記号を使ってテキストに構造を与える「文章のルール」です。

Markdown方式の一つの特徴としては、

  • 見たまま書きよりも、きちんとHTMLに反映できる!
  • HTMLよりも定義が楽!
  • なのに、HTMLで書いた内容が反映される!

といった利点があります。

正式なやり方は[Markdown 書き方]検索すれば出てきますので、今回は割愛させていただきます。

あやおりこ流!Markdown方式を使ったブログの書き方!

一番はHTMLを使うのがSEO的にもいいですが、ブログを書くのにはちょっと・・・という人にうってつけなのがMarkdown方式です。

HTMLを一から書くのはめんどいけど、ブログを効率的に書きたい!

そんな方のために、Markdown方式とHTMLを使った
「あやおりこ流!Markdown方式を使ったブログの書き方!」
をまとめてみました。

1.メモはあらかたMarkdown方式で取る。

f:id:ayaoriko:20170910222326j:plain

ブログの内容をメモする時から、Markdown方式を使っていきます。

しかし全てのMarkdow方式を使うのは面倒なので、私が使っているものを抜粋。

段落を取るときには二つの改行

これは一段落目

これは二段落目です

と書きたいときは

<p>これは一段落目</p>

<p>これは二段落目です</p>

とHTMLでは書きますが、いちいちPタグは面倒。

そこでMarkdown方式を使うと

これは一段落目

これは二段落目です

のように、間に空白の行を入れれば反映されます。

見出しはシャープ

見出しを書きたいとき、HTMLは

<h1>見出し1</h1>
<h2>見出し2</h2>

と書きますが、Markdown方式を使うと

# 見出し1
# 見出し2

と、#(シャープ)に半角スペースを入れます。

しかし、この半角スペースが面倒・・・

しかしここで朗報!!
はてなブログでは半角スペースがなくても反映してくれるのです!

しかし、wordpressや他のエディターを使う人は、反応してもらえない模様ですが、一から見出しをつける負担を考えれば、まだ楽だと思います。

リストは-(ハイフン)で楽々!

  • 内容1
  • 内容2
  • 内容3

と書くところ、HTMLだと見出しを書くのが大変!

<ul>
  <li>内容1</li>
  <li>内容2</li>
  <li>内容3</li>
</ul>

もう途中で書きたくなくなります・・・

そんなときにMarkdown方式!

- 内容1
- 内容2
- 内容3

-(ハイフン書く)と空白だけで、リスト形式になっています!

ちなみにリストは、はてなブログでも空白を入れないと反映されない模様です。

強調は**(アスタリスク2つ)で囲う

テキスト強調テキスト

とイメージするとき、HTMLでは

テキスト<b>強調</b>テキスト

と書き、Markdown方式では

テキスト**強調**テキスト

と、**(アスタリスク2つ)で囲います。htmlと比べて楽とは言い難いですが、強調は文章を書きながら書きたいと思い、追加しました。

ちなみに*(アルタリスク1つ)だと、斜体になります。

サイトにペーストして、HTMLで書いていく!!

Markdown方式で文章を書いた後は、文章をブログサイトにペースト。そして、HTMLで清書していきます。

f:id:ayaoriko:20170910231333j:plain

はてなブログのPC版だと、ここでMarkdown方式に変更できます。 はてなブログのSP版は、左上の「設定ボタン→編集モード→Markdown」で変更できます。 wordpressはプラグインを入れなくちゃいけなかった気がします・・・。

パソコンで編集する場合は、見ながら編集できる機能が便利です。


私がよく使うのは<br>タグです。

Markdown方式だと半角スペース二つを空けるのですが、なんとも分かりにくい・・・ なので仕上げの段階で、改行部分を<br>でコピペをします。

また。段落の間の空白をもっと空けたいときにも<br>タグをペースト連打します。


また、吹き出しなどのMarkdown方式で表現しきれない箇所を

タグなどで装飾していきます。


以上で、ブログの完成です!

私が日本式Markdown方式に求めること

ここまで書いてきましたが、Markdown方式は外国語に合った方式だなぁと思うことが度々あります。

私は、いまの使いからから進歩した日本に合ったMarkdown方式が必要なのではないのかなと思いました。

ここで、私がもし日本式のMarkdown方式にするならばの改善点を書いていきます。

改行は見たまんまで。難しければ全角空白一つで。

文章内で改行する時、空白2つはめんどくさいです。
PCや携帯の設定次第では、スペース=全角スペースなので、 日本語モード→英語モード→空白二つ→日本語モード
と移動しなくちゃいけません。

この手間を無くしてほしい!

全角でも対応して。

上に通じることですが、リストや段落をつけるときに空白が必要になります。

しかし、半角ではないと反応しないので、間違って全角で入力したときに、直すのが面倒です。

また、同じシャープでも全角の#と半角の#の時で変わってくるので、そこの対応も出来たら楽なのになぁと思いました。

強調は*二つではなくて*一つにして

日本語では、あまり斜体を使わないので。

まとめ

日本語で使うには不満点も多いMarkdown方式ですが、HTMLでうまく変換する橋渡しになる言語です。上手く利用して、心地の良いブログライフを!!