ロケLOG

大学生のロケットマンによるブログ

はてな記法でブログ書いてみた。ソースコードを背景黒で表示したかったんですー。

はてな記法とかいう謎の記法でブログを書いてみた。

書いた経緯

ソースコードをかっこよく乗せたかった
はてな記法を使ったのは、ブログカスタマイズに関する記事のためだ。


実際に書いた記事
www.rocketman-blog.com



ブログカスタマイズ記事にはソースコードをたいていの人はのせるだろう。
普通に枠とかで掲載する方法もある。


ただ、おれはかっこよくのせたかったのだ。


はてなブログで掲載方法を調べたのだが、Git Hubとかいう謎の謎を使わなければならなかったのだ。
しかし、
「はてな記法」でも書けるよ!
みたいなのがあったのだ。


で、使ってみたってわけさ。


ちなみにこの記事もはてな記法で書いておる。

ソースコードの表示はこんな感じ

ソースはこんな感じに表示されるのだ。全然関係ないコードだけど。

/*投稿日・執筆者の消去*/
span.author.vcard{ display:none; } 
span.entry-footer-time {display: none;}


かっこいいだろ
ちなみにデフォルトでは背景は白色である。
現在、上に表示されているのは背景が黒だが、それはこの記事を見てcssにコードをコピペすれば簡単にできる。


orangain.hatenablog.com


はてな記法の編集画面とおおまかな使い方

これがはてな記法の編集画面だ。
実際に書いた記事を例にするとこんな感じである。
f:id:rocketman5th:20171208140739p:plain


これをプレビューで見るとこんな感じ
f:id:rocketman5th:20171208140824p:plain


使い方については公式に書いてある。
はてな記法一覧 - はてなダイアリーのヘルプ


やり方がわからなかったところ

改行の仕方

改行が2行を改行するとプレビューでは1行の改行になるという仕様。最初、改行できなくて焦った。

HTMLのコードの掲載方法

f:id:rocketman5th:20171208141855p:plain

って書けばよいんだけど、コード名のところに「html」でなくて「HTML」と打っていて、表示されなかった。


小文字で「html」だ


ちなみに「html」とはHyper Text Markup Language(ハイパー テキスト マークアップ ランゲージ)の略。

使った感想

改行が少しやりやすいなって思った。普通の編集画面だと、いまいち改行がわからない。画像の後ろに文字が改行せずに入っていたりする。あと見出しが上の空白も選択されて、目次画面に空白ができたりと。


はてな記法は文字だけなので、どこに改行があるかわかりやすい。


スマートフォンでの編集などはどうなるかわからないけど、そこらへんも今度やってみたい。


編集画面は文字だけなので、どうなってんのかいちいちプレビューを見ないといけないところは面倒くさいがしょうがないと思った。


普通の人なら、少しやればなれる。
普通じゃない人はしらない。