シンプル志向のはてなブログデザイン設定

概要

はてなブログを開設するにあたり、多少はデザインを整えておきたいけど、あまり設定をガチャガチャしたくもない。デザインも設定内容も極力シンプルに、ちょうどいい感じの設定を探した。以下の画像のようなデザインに落ち着いたので、設定内容をメモしておく。

デザインテーマ

公式テーマのReportを使用した。手動で設定する項目が少なく済むように、ある程度デフォルトで満足できるデザインのものを選んだ。

背景色

カラーパレットにある中から薄めのベージュっぽい色 #f4efe3 を設定。

デザインCSS

デザインCSSの設定内容の全文は次の通り。記事の横幅とコードブロックの体裁について調整を加えた。

/* <system section="theme" selected="report"> */
@import "/css/theme/report/report.css";
/* </system> */

/* <system section="background" selected="f4efe3"> */
body{background:#f4efe3;}
/* </system> */

#container {width: 1000px;}
#main {width: 750px;}
#box2 {width: 220px;}
#footer {width: 1020px;}

.entry-content pre.code {
    background-color: #272822;
    color: #F8F8F2;
    font-size: 14px;
    line-height: 20px;
}

記事の横幅

デフォルトでは少し記事部分の横幅が狭かったので広くした。記事部分の横幅を750px #main {width: 750px;} に設定。これに合わせて全体の横幅を1000px #container {width: 1000px;} に、フッターの横幅を1020px #footer {width: 1020px;} に設定。サイドバーの横幅はデフォルト値と同じ #box2 {width: 220px;} にした。

#container {width: 1000px;}
#main {width: 750px;}
#box2 {width: 220px;}
#footer {width: 1020px;}

ちなみに、Reportテーマのデフォルト値は下記の値のようだ。

#container {width: 810px;}
#main {width: 560px;}
#box2 {width: 220px;}
#footer {width: 830px;}

コードブロックの体裁

コードブロックは黒背景が好みなので、背景色を黒 background-color: #272822; に、文字色を白 color: #F8F8F2; に設定。フォントサイズや行間もデフォルトでは少しバランスが悪く感じたので、フォントサイズを14px font-size: 14px; に、 行の高さを20px line-height: 20px; に設定。

.entry-content pre.code {
    background-color: #272822;
    color: #F8F8F2;
    font-size: 14px;
    line-height: 20px;
}

補足：ヘッダ、フッタの設定

「Hatena Blog」などが表示される一番上のヘッダや、「Powered by Hatena Blog」などが表示される一番下のフッタについてもCSSで細かく設定を変更することが可能だが、改変や非表示にあたる行為は利用規約で禁止されているようだ。非表示にしたい場合は、PROプランの機能として提供されているものを利用する必要がある。

第6条 (禁止事項)
2. ユーザーは、本サービスを利用するに際し、以下のような社会的に不適切な行為を行ってはなりません。
g. 本サービス内でのページデザイン変更により、当社が標準的に表示しているヘッダ、フッタ、広告及び著作権表示を当社の許諾なく体裁や位置を改変し表示する、あるいは非公開にする行為

はてな利用規約 - Hatena Policies