はてなブログ開設後に、イケてるデザインに変更する設定
はてなブログを作成した直後は、デフォルトのデザインテーマが使用されている。デフォルトのテーマもシンプルで良いのだが、個人的には下部のレイアウトの崩れが気になったため、デザインの変更を行った。そのはてなブログ開設後に設定した内容を記録しておく。
1. デザインテーマの変更
まずはブログ全体のデザインテーマを選ぶ。ダッシュボードから「デザイン」>「デザインテーマ」と遷移すると、様々なデザインが選択できることがわかる。また最下部の「テーマストアでテーマを探す」から更に、はてなブログユーザが作成したデザインテーマを選択することもできる。
今回はテーマストアの中から、Written(by jclv)を選択した。
2. ヘッダ・フッタの設定
選択したテーマにさらに微修正を加えていく。ダッシュボードの「デザイン」>「カスタマイズ」と遷移し、以下の変更を行う。
#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を変更すればよい。
最後に記事を投稿して、設定したのデザイン変更がされているかをチェックして完了。