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

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

書いた経緯

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

実際に書いた記事
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(ハイパー テキスト マークアップ ランゲージ)の略。

使った感想

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

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

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

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

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

スポンサードリンク
スポンサードリンク

コメントを残す

メールアドレスが公開されることはありません。