はてなブログで「連載小説」を書くためのHTML,CSS設定

はてなブログでの小説連載におすすめのテーマ

　サブブログの方で連載小説を書いていて、その際に設定したHTMLとCSSをメモ書きとして書き残しておきたい。（※現在はサブブログを削除）

　まず、おすすめのテーマは"Innocent"。前身の"Blank"の頃から愛用していたが、15年12月にバージョンアップ版が公開された。非常にカスタマイズ性が高く扱いやすい。グローバルナビも簡単に設定することができ、本当に素晴らしい。下のテーマストアからインストールできる。

　Innocent - テーマストア

　じつは連載小説を投稿し終えてからこのテーマの存在を知った。くっ、もっと早くに知っていれば……。

HTMLの設定

　小説をブログに投稿するのであれば、あまり凝ったマークアップはやらないと思う。文字を大きくしたり、文字色を変えたりもできるが、小説ではあまりトリッキーなことはしない方が無難。したがって、ぜひとも知っておきたいHTMLはこれだけである。

<ruby>漢字<rp>(</rp><rt>るび</rt><rp>)</rp></ruby>

<!-- 使い方の例 -->
<ruby>匿名日記<rp>(</rp><rt>アノニマスダイアリー</rt><rp>)</rp></ruby>

　匿名日記(アノニマスダイアリー)
　と、上のようにうまい具合に表示される。漢字とカタカナの組み合わせでなくても大丈夫。いろいろ試してみると面白い。異能力バトルものを書く場合には使用頻度も高いと思う。ルビタグは便利なので、辞書登録をしておくと捗る。

　ちなみに以前は、漢字の方に"rb"タグも付けていた。けれど、HTML5からは不要となったらしい。
www.htmq.com

CSSの設定

　僕の場合は、以下のように設定している。デザインは大元のテーマのCSSが継承されるので、若干の見え方は異なる。ここでは冒頭で挙げた"Innocent"を使用。文字サイズ、フォントカラー、行間、段落のマージンなど、果たしてどれが読みやすいのかは悩ましい問題で、絶対的な答えは出ていない。

/*デフォルトの文字色を変える*/
body {color:#222;}

/*記事中の文章設定*/
.entry-content {
  font-size: 15px; /*文字の大きさ*/
  line-height: 1.6; /*行間*/
  letter-spacing:0.5px; /*文字と文字の間隔*/
}

/*段落と段落の余白*/
.entry-content p {
　　margin: 0.7em 0 1em 0;
}

/*引用文の文字色*/
.entry-content blockquote{
    color:#555;
}

/*記事下のnext,prevの設定*/
.pager-prev::before,
.pager-next::before {
	color: #555;
}

.pager-prev::before {
	content: "次の話";
}

.pager-next::before {
	content: "前の話";
}