チコちゃんに叱られないブログ

人生は雑多なのです😋

Markdown ってなに?


Hatena Blogでブログるときは『編集見たたまま』で作成しています。


 追記:

 見え映えは Markdown の効果というより、そのときに使用しているブログテーマによって変化の差が顕著です。「Markdown ってなに?」は記述方法であって、見せかけの変化はブログテーマによるもの影響でした。ブログテーマを変更することで罫線<hr>は紙面幅いっぱいに表示されました。

 

教訓としてはブログテーマによっても変わるように、何事も自分の見ているものがその現象のすべてではないということです。今見ているものは一方の光によってみている現象に過ぎないということが分かりました。

 

今回使用したテーマであればHTMLはHTMLらしく表現された見え映えに変化しました。よってこの記事の中の画像などは昨日まで使用していたブログテーマによる変化です。

2019年3月20日・追記 


最近、他の方のブログを閲覧するということをやっと覚えまして、あちらこちらのブログにお邪魔しているうちに、 Markdown 記述が簡単で便利って記事が幾つかみられまた。

 

 

それらの記事を見てもなんだか分かりにくいのです。

 

すみません、頭の回転がちょっと並みより悪いのでブログのせいじゃなくてこれは私のせいです(´▽`;;)

 

それで少し Markdown を調べてみました。HTMLと比べて特に便利そうな気もしないけど、タグを覚えるよりは簡単なのかなとも思います。

※比較のために画像を多用してます。 

f:id:i-shizukichi:20190319151850p:plain

編集モードを Markdown にします。

f:id:i-shizukichi:20190319140945p:plain

 

あちらこちらかのブログから Markdown 記述をパクって以下のように記述してみました。※囲ってある中の部分

 

アンダーバー1個で_強調する部分_を囲みます。

アンダーバー2個で__強調する部分__を囲みます。

アンダーバー3個で___強調する部分___を囲みます。

[はてなブックマーク](http://b.hatena.ne.jp/)

アスタリスク1個で*強調する部分*を囲みます。

アスタリスク2個で**強調する部分**を囲みます。

アスタリスク3個で***強調する部分***を囲みます。

左揃え|中央ぞろえ|右揃え
:-|:-:|-:
あ|い|う

左揃え|中央ぞろえ|右揃え
-|:-:|:-
あ|い|う

あ|い|う
||
あ|い|う

あ|い|う
||

あ|い|う
||
||

左揃え|中央ぞろえ|右揃え
:-|:-:|-:
あ|f:id:i-shizukichi:20190318131540p:plain|う
え|お|か

#見出し1
##見出し2
###見出し3
####見出し4
#####見出し5
######見出し6

 上の枠囲いの中に作った文章で、下図の赤い円の部分をクリックします。

f:id:i-shizukichi:20190319141153p:plain

 

赤丸の中をクリックすると、ブログ作成ペイン右側このようなペインが現れます。

f:id:i-shizukichi:20190319141347p:plain

ほぅ、ほぅ、ほぉ、こんな風に見えるってわけですね。

 

んでもこれじゃあ、見出し1-6に関してはただ文字サイズが変わるだけじゃないかなあって思いましたけど、さらにプレビューで見てみました。

プレビューの結果です。

f:id:i-shizukichi:20190319141302p:plain

明らかに変わりました。

※実際のブログでもこのように表示されます。

※強調表示部分に関してはアンダーバーもしくはアスタリスクで囲むだが、ンダーバーもしくはアスタリスク使用個数によっての強調程度差が違いが分からない。また、一つだと変化なしにしか見えない。これに意味があるのか。あるいはなにかアファリエイトに関連があるのかな?

 

特に見出しにこんな変化が起きるなんて驚きました。これが Markdown 記法なわけですね。注意としてMarkdownで作ったブログを『編集見たまま』に戻すと、全文削除されて白紙になると警告が出ます。

 

HTMLは文章階層構造を決めるHタグ(見出し)が大事だといわれますが、私はただ文字サイズの変化だけで見出しをしていたので、見出し指定でこんな変化が起きるのかと驚きました。

 

実はブログを作成しているときに、これまでは一度プレビューをしたことがなかったのです。ここで試しに『編集見たまま』で見出しタグを使ってみます。

 

Hatena Blogでは『編集見たまま』でも四つの見出しが使えますので、四つ全部やってみます。見出し指定は見出しにしたい文字列のどこかにカーソルがあればその段落が見出しになります。

 

出来ました!

見出し1


見出し2(見出しは目次とリンクしています)


見出し3


見出し4

 

『編集見たまま』では見出し効果が反映されないので、『編集見たまま』でブログ作成中は以下の文字サイズを変更したのと同じに見えていました。が、プレビューで見ると Markdown と同じではないですが、ちゃんと見出しになっていました。これ初めて知りました (^^;)

 

見出しに関しては Markdown  の方が階層が深い。

 

見出し1
見出し2
見出し3
見出し4

 ※上は単純に文字サイズを変更しただけです。

 

いまひとつわからなかったのが目次です。これもこの機会に覚えてみようと思います。目次をクリックします。

f:id:i-shizukichi:20190319144428p:plain

 

『編集見たまま』ではこのような [:contents]*1文字列が目次として表示されるだけで分かりにくいですが、この状態で目次は見出し1-3順に下層へリンクされています。ですが、あまりかっこよくはない感じの目次です。もう少し良い何か使い方があるのかもしれません。

※このブログでは見出しが上にあって目次が下なので、見出しをクリックすると上にある見出し部分へ移動します。

※見出しは便利ですが目次は項目によっては結論を急がれてパスされる可能性もあるので、全文読んでもらいたいテキストダイアリー的なものには目次リンク機能は逆効果だと思います。

※テキストダイアリーなどで目次をつけたいなら、リンク機能のないリストや番号付きリストを応用した方がよいでしょう。以下は、目次をこんな風にしてもいいかな的なのです。


 目次

  1. なんかんたら
  2. かんたらなんたら
  3. ほんでもってなんたら

※逆に項目がジャンルに分かれて必要な部分を読んでもらえばよいって場合の Tips などであれば、見出しへのリンクのある目次は便利な機能になると思います。

※罫線は『HTML編集』で<hr>では単純に幅いっぱいに引けなくて50%幅程度で中央表示されるだけです。『編集見たまま』の時は100%になっていますがプレビューでも実際でも50%幅表示です。位置指定も無理です。同じHatena Blogの方でちゃんとHTMLで罫線100%で出来ている方もいるみたいなんで、『HTML編集』その方のHTMLソースを丸ごと貼り付けてもやはり<hr>に関しては50%表示に

 

見出し指定は「大見出し」「中見出し」「小見出し」とありますので、これらを組み合わせてブログの階層構造を作ることができます。

 

例としてこんな見出し階層にしてみました。

 

大見出し

 「中見出し

  「小見出し

 「中見出し

大見出し

 「中見出し

  「小見出し

  「小見出し

 

これで目次を挿入すればこのような階層目次が出来るわけです。こういった階層構造にすることで、文章の構成もしっかり立てられ方向性を見失いようにすることもできそうです。

 

ちなみに自分にはこのような文章構成をする能力そのものがないので、これまで通りに行き当たりばったりで、あっちにフラフラこっちにフラフラのわけわかめブログに仕上げるのを得意としています・・・それって、得意って言うのか? (´▽`)

 

ついでに脚注使い方もやってみました。

 

脚注をする文字列の末尾にカーソルを移動しt脚注ボタンを押して二重カッコの中に説明を入れれば文末にその脚注が表示されます。脚注はクリックで移動可能にもなっています。脚注は脚注数に応じて自動で番号付けがなされると思います。

 

今回の他の方のブログを参考にするようになって記述次第でよりコンテンツを面白くできるのだなと思いました。

 

Hatena Blogにはまだはてな記法なるブログ作成方法があるので、今度はそちらも一応見てやってみようと思う。

 

でも、一番大事なのは話法ですかね。

 

ちょっとしたネタでも読ませる書き方ってやっぱり素晴らしいです。

 

そんな話法の前にはHTML表現なんて問題ではないです。

 

ネットは画像どころか動画もありますから、視覚効果に訴えることが手軽で便利な媒体のように一見思えますが、それは大間違いです。文章こそが最終的に最も力のある媒体なのです。

 

磨くべくはそんな読ませる話法文章の作成ですが、これはどうも天性な感性が大きく左右しているようなので難しいです。

 

 

最近理解したことは自分でブログるより、いろいろな方のブログを見ている方がよっぽど楽しいし面白いなあってことです。ん、勉強になった。これからは夜の徘徊ならぬブログ徘徊することにした(´▽`)

 



See you.


*1:文字列表示のためコロンを全角にしてある