はじめに
今回はブログ整備のお話である．はてなブログで記事を書くにあたって，デフォルトで設定されているデザインだけでは見やすさの観点からイマイチである場合がある．そこで今回は，コードを(比較的)キレイに載せる方法と囲みブロックを適用する方法について述べる．ついでに，目次を記事中に載せる方法についても述べる．
目次の生成
目次の生成に関しては，[:contents]を目次を載せたい部分に書けば O.K. である．これほど簡単なことはない．目次に採用されるのは，Markdown では，ハッシュタグ#が3つからである．決して，#を2つ以下で記事を作らないように．目次のデザインを変更することや，目次を番号付けで表示させることもできるがここでは割愛する．参考で挙げたページを参照されたい．
コードの挿入
コードに関しては，バッククォートを3つ用いて記述することが一般的だと思われる*1．
#!/bin/python3 print("Hello, World!")
簡単ではあるが，あまり美しくない．そこで代替策を考える．（デザインCSSを修正することによって，“いい感じ”に表示させるようにしました．）
導入方法
導入の仕方は以下の通り：
- 「管理画面」→「デザイン設定」→「フッタ」の順に推移し，HTML を記述する欄に以下のコードを挿入する．
- 以下のコードは
vsというテーマを使用した場合の記述例である． - 他のテーマとしては，
githubやatom-one-darkなどがあり，highlight.jsで確認できる．
- 以下のコードは
<link rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/vs.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
使い方
preタグとcodeタグで記述したいコードを次のように囲めばよい．
<pre style="background-color: rgb(252, 252, 252) !important;">
<code class="html">《記述したいコード》
</code></pre>
例えば，先ほどのPythonのコードは次のようになる．
#!/bin/python3
print("Hello, World!")
コメント
- コードの中に
<>&などがある場合，HTML Escape / Unescapeなどでエスケープする <code>タグで改行すると，一行目が空白になってしまうため，<code>タグの直後からコードを書く必要がある．
囲みブロック
例えば，次のように定理や命題をブロックで囲みたい場合がある．
定理(留数定理)
複素関数 $f(z)$ の $n$ 個の極 $a_k \; (k=1,2,\dots,n)$ を囲む閉曲線 $C$ について，
$$
\begin{align}
\oint_{C} f(z) \mathrm{d}z = 2 \pi i \sum_{k} \mathrm{Res} (a_k, f)
\end{align}
$$が成り立つ．ここに，$\mathrm{Res}(a,f)$ は複素関数 $f$ の極 $z=a$ における留数を表す．
導入方法
.theorem {
position: relative;
margin: 2em auto;
padding: 1.2em;
color: #555555; /* 文章色 */
background-color: #f7f7f7; /* 背景色 */
border: 1px solid #555555; /* 枠線の太さ・色 */
width: 90%;
}
.title-theorem {
position: absolute;
padding: 0 .5em;
left: 20px;
top: -15px;
font-weight: bold;
background-color: #fff; /* タイトル背景色 */
color: #555555; /* タイトル文字色 */
}
使い方
- ブロックで囲みたい定理等を次のように
divタグで囲めばよい．例えば，先ほどの留数定理は次のように記述する．
<div class="theorem"><span class="title-theorem">定理(留数定理)</span>
複素関数 $f(z)$ の $n$ 個の極 $a_k \; (k=1,2,\dots,n)$ を囲む閉曲線 $C$ について，
$$
\begin{align}
\oint_{C} f(z) \mathrm{d}z = 2 \pi i \sum_{k} \mathrm{Res} (a_k, f)
\end{align}
$$
が成り立つ．ここに，$\mathrm{Res}(a,f)$ は複素関数 $f$ の極 $z=a$ における留数を表す．
</div>
コメント
- ブロックの中では，数式の改行が
\2つでよかったりするなど，特有の注意が必要なようである*2．
おわりに
はてなブログにおける
- 目次の生成の仕方
- コードの(比較的)キレイな載せ方
- 囲みブロックの使い方
について扱った．先行記事が多く存在するため，この記事を書くべきかどうか迷ったのだが，自分用の備忘録して書いておいた．
参考
- はてなブログ「目次」の見た目をCSSで変える（コピペOK）
- 目次を番号付けしたい方はこちらを参考にするとよい．他にも同様の記事が多くあるが，一番よかった．
- はてなブログのシンタックスハイライトを綺麗にする
- コードの書き方に関しては，こちらのブログを参考にした．コード内の行間の調整についても扱っているので，行間を調整したいという方は参照されたい．
- 【CSS】おしゃれなボックスデザイン（囲み枠）のサンプル30
- Web 検索で「CSS 囲みブロック」などと検索すれば，同様の記事が多く見つかると思う．今回はトップに出てきたこちらのサイトを参考にした．
