はてなブログを使ってて気づいた事
はてなブログを書いてる中で気づいた事を書いてみました。
見出しは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
はてなブログが対応しているファイルタイプの一覧もありました。よければ|д゚)