【はてなブログ】はてなブログで記述リストを使いたかったお話

　どうも、おはようございます、こんにちは、こんばんは。あめむらです。最近、いろいろブログのコンテンツ内容を模索しています。（この記事自体も！）そんな中、ラノベの人名の索引的なもの、用語集的なコンテンツがあったら、同じものを読む人に役にたつんじゃない？などと思いついたたんですね。

用語集をコーナーの一つに採用した記事の例です。

aods1004.hatenablog.jp

　思いついて、実行！ラノベを読み進めながら用語を抽出できたところまではいいものの、どうやってブログ記事として書くか、そこが難問でした。結局、記述リストのマークアップで、ということで落ち着いたのですが、そこまでに至る経緯と、記述リストで書いたコンテンツをそれなりの見栄えで表示する方法について書いてみたいと思います。

用語集をはてなブログでそれなりに見せる試行錯誤

試行錯誤(1) ヘッダーと段落の組み合わせ

　用語集的なコンテンツをつくるのを考えたとき、最初に思いついたのがヘッダータグと段落で構成する方法でした。

　Markdown形式の編集だとヘッダータグと段落の組み合わせは、以下のように書きますね。基本的な形です。

##### ほげほげ【hogehoge】
サンプルプログラムなどで  
意味のない名前が必要な場合に利用される、  
「意味のない名前」のことです。

　タイトルがあって、その内容が本文にかいてある・・・。マークアップ的にはそれなりに筋が通っていそうな気がしたんですが、目次がだめでした。語句が50個とか溜まってくると、上記に貼った画像のように、目次が使い物にならなくなってしまいます。ということで、別の方法を考えました。

試行錯誤(2) テーブル

　次に思いついたのは、テーブルを使う方法でした。

ちょっと複雑ですが、Markdown形式だと、以下のように書くと、テーブルを書くことができます。表の１マスは、|ほげほげ|ほげほげ|という形で書き、ヘッダーの行と表組み本体を|---|---|で区切るんです。

|用語|解説| 
|---|---|
|ほげほげ【hogehoge】|サンプルプログラムなどで  意味のない名前が必要な場合に利用される、  「意味のない名前」のことです。|

　用語集のようなコンテンツをテーブルで表現するのも、とくにゲームの攻略wikiのキャラクター一覧などでは、それなりによく見るような気がします。

　見栄えは一見、それなりに良さそうに見えましたが、長い用語を表示したとき、読みにくいところで改行されてしまうのでなかなか格好がつかない感じでした。なので、実は最初に検討して挫折していた方法を少し強引に使ってみることにしました。

試行錯誤(3) 記述リスト → これにする！

　最後に思い当たったのが、記述リスト形式をHTMLタグでそのままかくということ！。基本的なMarkdownの記法では、記述リストが対応していないんですよね・・・。Markdownを拡張した記法はいくつか見つかったので試してみたものの、はてなブログのMarkdownパーサーは、どれも対応していないようだったたので、ヘッダー・段落や、テーブルを試していたのでした。

　そもそも記述リストとは、用語とその解説をかくためのHTMLタグの一つです(詳細は以下の記事でご確認してください) ですから、用語集的なコンテンツを書くのであれば、一番適した形式なんですよね。Markdown記法ではなく、HTMLで直接書くことになりますが、うまく表示できるのであれば、これで書くことにしたいと思いました。

techacademy.jp

　記述リストでかくと、目次にも影響しないし、改行もうまいこといきそうです。ただ、解説部分の左の空白がちょっと大きすぎてかっこわるいのと、用語と解説を文字の太さで差別化したいなーというちょっとした問題というか希望がありましたが、CSSをちょこっといじれば解決できそうだったので、記述リストをHTMLでそのまま書く作戦でいくことにしました。(Hatena Blogでは、記述リストのスタイルを指定してないようで、ブラウザの標準のスタイルが適用されているので、もしかしたら、それなりにわかりよく表示できるブラウザもあるかもわかりません。)

　記述リストを書きたいとき、はてなブログのフォームには、このように書きます。

<dl>
<dt>ほげほげ【hogehoge】</dt>
<dd>サンプルプログラムなどで  意味のない名前が必要な場合に利用される、  「意味のない名前」のことです。</dd>
</dl>

記述リストのCSSの設定

さらに、記述リストの見栄えを調整するため、CSSを少しだけ書きます。

CSSを設定するには、はてなブログの設定 → デザイン → スパナ ボタンと、進んでいったところにある「デザインCSS」という入力フォームに設定を入力します。自分は、次のように設定しました。Webデザインはからきし素人なので、あまり格好がよろしくない設定があるかもしれないですが、ご了承を。

.entry-content dl {
    margin-left: 13px;
}

.entry-content dt {
    font-weight: bold;
    white-space: nowrap;
}
.entry-content dd {
    font-weight: normal;
    margin-bottom: 0.6em;
    margin-left: 20px;
}

結果

　用語集のコンテンツを記述リストで書くことにし、CSSを設定！これで、自分としては満足のいく表現ができるようになりました！もしここまでで他のはてなブログユーザーの方でお役に立てるような内容がすこしでもあったら嬉しいです。最後まで読んでいただきどうもありがとうございました。