Aikの技術日記

技術的な進捗とか成果とかを細々と投稿するブログです。時々雑記も。

はてなブログを使ってて気づいた事

はてなブログを書いてる中で気づいた事を書いてみました。

見出しはh3~h5レベルで

はてなさん公式では、記事の見出しはh3~h5のレベルのものを想定しているそうです。
staff.hatenablog.com

Markdown記法なら"###"~"#####"のレベルって事ですね。

なお、この項目の見出しはh1レベルにしておりますが、これだと記事のタイトルと遜色ないレベルの文字の大きさになるので気をつけましょう。

記事の概要を設定

はてなブログで記事を書く際に、記事の概要を設定することができます。
この項目は、検索結果やSNSシェア、注目エントリーなどで利用されるそうです。

設定項目へは"サイドバー"→"編集オプション"→"記事の概要"からいけます。

折りたたみコンテンツ

長ったらしいソースコードなどを書く際に、記事が長くなりすぎるのを懸念することも多いと思います。
そんな時に使えるのがこの折りたたみコンテンツです。

試しに書いてみました。

ソースコードはこんな感じです。

<div onclick="obj=document.getElementById('hide-part').style; obj.display=(obj.display=='none')?'block':'none';">
  <a style="cursor:pointer;">▶コンテンツを展開</a>
</div>
<div id="hide-part" style="display:none;clear:both;">
  <div onclick="obj=document.getElementById('hide-part').style; obj.display=(obj.display=='block')?'none':'block';">
展開したいコンテンツ内容
  <a style="cursor:pointer;">▼展開を閉じる</a>
  </div>
</div>

下記の記事を参考に、コンテンツ展開を閉じる項目も実装してみました。
nn-hokuson.hatenablog.com 色々と使える場面も多いと思います。

※2018.08.03追記 HTMLにどうやら折りたたみコンテンツ用のタグがあるらしく…。

こんな感じ 省略コンテンツだよ

下記のようにコンパクトに書けるというのも魅力ですね。

<details><summary>こんな感じ</summary>
省略コンテンツだよ
</details>

何か特別な理由がない限りは、こちらを使うようにした方が良さそうです。

ソースコードシンタックスハイライト

ソースコードシンタックスハイライトが付けられるらしく、
はてな記法Markdown記法でそれぞれ特定の書き方をするといけるらしいです。

方法が載った記事は下記に↓
help.hatenablog.com

はてなブログが対応しているファイルタイプの一覧もありました。よければ|д゚)