はてなブログ開設後に、イケてるデザインに変更する設定

はてなブログを作成した直後は、デフォルトのデザインテーマが使用されている。デフォルトのテーマもシンプルで良いのだが、個人的には下部のレイアウトの崩れが気になったため、デザインの変更を行った。そのはてなブログ開設後に設定した内容を記録しておく。

1. デザインテーマの変更

まずはブログ全体のデザインテーマを選ぶ。ダッシュボードから「デザイン」＞「デザインテーマ」と遷移すると、様々なデザインが選択できることがわかる。また最下部の「テーマストアでテーマを探す」から更に、はてなブログユーザが作成したデザインテーマを選択することもできる。

今回はテーマストアの中から、Written（by jclv）を選択した。

2. ヘッダ・フッタの設定

選択したテーマにさらに微修正を加えていく。ダッシュボードの「デザイン」＞「カスタマイズ」と遷移し、以下の変更を行う。

1. 「ヘッダ」＞「タイトル下」に<hr>（分離線）を追加。
2. 同様に「フッタ」に<hr>（分離線）を追加。
3. 「デザインCSS」に以下のスタイルシートをはりつける。

#blog-title {
    text-align: center;
}
#footer {
    text-align: center;
}

この設定を行うことでヘッダ、本文、フッタのボックス領域がはっきりと区別できるようになる。またヘッダとフッタは中央揃え、本文は左揃えのスタイルになる。

3. 見出し用のスタイルの変更

記事作成では見出しにh3、h4タグを選べるのだが、このままだと単に太字になるだけだ。今回はこの見出しもCSSで装飾する。（もしかしたらはてなブログの機能でもっと簡単にできるかも）先ほどCSSを追加した「デザイン」＞「デザインCSS」に、同様に以下のスタイルシートを追記する。

h3 {
    font-size: 26px;
    border-left: 8px solid #03a9f4;
    background: #f1f5fe;
    padding: 0.6em 0.8em;
    margin-bottom: 5px;
}

ちなみに色はマテリアルデザインで指定されているLight Blueを使用している。変更する場合はborder-leftとbackgroudを変更すればよい。

最後に記事を投稿して、設定したのデザイン変更がされているかをチェックして完了。

! スマートフォンの画面

せっかく設定したCSSだが、スマートフォンから見た場合は変更されないようだ。スマートフォン向けにデザインを修正するのはまた別のエントリでまとめる。