Shallow And Wide

Gadget, Camera, Airplane, etc.===Written By Koishi

Shallow And Wide

Markdown記法を試してみることに

f:id:koishi4041:20180803222108j:plain:w500


iPadで快適にブログ投稿したい・・・けど、iPad上では、はてなブログのWeb版が手軽に扱えない・・・

そんな時にMarkdown記法というものを見つけました。


Markdown記法とは

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

引用元:Markdown - Wikipedia

はてなブログには似た機能として、はてな記法というのもあるが、一応、Markdown記法は他の分野にも応用が効くので、こっちにしてみようかなと思った次第です。

Markdown記法の具体例

そうは言っても、実際に使って見ないとわからないし、自分が忘れないようにするためのメモとして残しておきます。

見出しタグ

とりあえず入力してみる。
# h1
## h2
### h3
#### h4
##### h5
###### h6
####### h7

と入力すると f:id:koishi4041:20180803215347j:plain と表示されます。 見出しはh6までなのですね。ふむふむ。

はてなブログの特徴とh2をどうするか問題

ここで肝なのは、はてなブログで標準で設定されている見出しタグはh3から始まります。
はてなブログでは

大見出し=h3
中見出し=h4
小見出し=h5

なのです。
なので、上図でh1とh2の装飾が付きません。
h1はサイトのタイトル用らしいので使うことはありません。
h2タグはデザインCSSで設定すれば、h3以降のタグと同じように使うことができます。
ですので

大見出し=h2
中見出し=h3
小見出し=h4

に設定し直した方が、今後のことや、他の機会にMarkdownを使うときに便利な気がするんですが、そうなると、これまでの記事も設定し直さないといけない手間も出てきます・・・・
しかし、これまで、テキトーに見出しを使っていたから、綺麗に整え直すという点では確かにいい機会でもあり・・・
と悩み中です。

リスト(箇条書き)タグ

とりあえず入力してみる
- リスト
- あ行
- か行
- さ行
- た行

と入力すると

  • リスト
  • あ行
  • か行
  • さ行
  • た行

と表示されます。

リスト構造のポイント(というかリスト以外でも重要)

ここで、ポイントは、リストの始まりと終わりに必ず、空白の行を入れることです。

入れなかった場合

空白の行が無いと
- リスト
- あ行
- か行
- さ行
- た行
正しく表示されない

と入力すると

空白の行が無いと - リスト - あ行 - か行 - さ行 - た行 正しく表示されない

と表示され、横一列に並んで、リストになってくれない・・・

入れた場合

空白の行を入れると

- リスト
- あ行
- か行
- さ行
- た行

正しく表示される  

と入力すると

空白の行を入れると

  • リスト
  • あ行
  • か行
  • さ行
  • た行

正しく表示される

また、 「-」記号の後ろには半角スペースを入力する必要があります。(Markdown記法においては、リスト以外においても、こうしないといけないみたいです)

入れなかった場合

-の後に半角スペースが無いと

-リスト
-あ行
-か行
-さ行
-た行

正しく表示されない

と入力すると

-の後に半角スペースが無いと

-リスト -あ行 -か行 -さ行 -た行

と、リスト構造にならず、1列に表示されて、正しく表示されない

入れた場合

-の後に半角スペースがあると

- リスト
- あ行
- か行
- さ行
- た行

正しく表示される  

-の後に半角スペースがあると

  • リスト
  • あ行
  • か行
  • さ行
  • た行

正しく表示される

リストの中に入れ子もできる。
- 入れ子にしたいところは、「-」記号の前に半角スペース2つ
  - ねこ
  - いぬ
- タブ1回でもOK
 - ねこ
 - いぬ

と入力すると

  • 入れ子にしたいところは、「-」記号の前に半角スペース2つ
    • ねこ
    • いぬ
  • タブ1回でもOK
    • ねこ
    • いぬ

と表示されます。入力の仕方はそのままサンプルの中に書き込んじゃいました。

とりあえず、これで何かしら書けるかな笑

はてなブログ特有のMarkdown記法

はてなブログ上においてのみ有効な方法をいくつか残しておきます。
他でMarkdown記法をするときは、別のやり方です。

リンクの挿入

[https://koishi4041.hatenablog.com/:embed]

と入力すると
リンクがお馴染みのカード型で埋め込まれます。
サンプルはこのブログのアドレスになってますので、リンクを貼りたいサイトのアドレスを貼ってください。
詳しくは知りませんが、これは「はてな記法」と同じみたいです。(つか、はてな記法Markdownを併用しているということかな?)

:embed

:title
にすると
Shallow And Wide
とページのタイトルを拾ってきて、リンクを付けてくれます。

はてなフォトライフを利用した画像の挿入


fotolife記法というものが、そのままはてなブログMarkdown記法の中で使えるみたいです。
公式がすごくわかりやすいです。

まとめ

他にもMarkdown記法には色々なコマンドがあります。
Qiitaというプログラマー向けのSNSに様々な方法が書いてあります。
プログラマーじゃなくても読めます(私も素人)。
記事も沢山投稿されているので参考になります。(会員登録なしでも読めます)

さて、これで快適なiPad Proによるブログ投稿ができるようになるかな・・・・