はてなブログのテーマを"Brooklyn”に変更＆カスタマイズ

以前まで、このはてなブログのテーマとしては、2次元レイアウトであるテーマストアの"Silence"を使っていましたが、

• entry-description （記事説明文）を見やすくしたい*1
• PC閲覧時のレイアウトをシンプルにしたい

という理由で、1次元レイアウトである Brooklynに変更しました。

blog.hatena.ne.jp

blog.hatena.ne.jp

参考先

大部分は以下のWebサイトを参考にさせて頂き、カスタマイズしました。どちらの記事も非常に分かりやすいです。

Brooklynをカスタマイズする際はご一読されることをオススメします！

nanana015.hatenablog.com

www.hiromaki.net

その他のカスタマイズ

h1要素

.entry-content h1 {
    background-color: #fff;
    color: #d25767;
    border-top: 2px solid #d25767;
    border-bottom: 2px solid #d25767;
    border-left: 12px solid #d25767;
    padding: 0 0 0 1em;
}
.entry-content h1:before {
    border-style: none;
    display: none;
}

カテゴリのフォントサイズ

.categories { font-size: 150%; }

サムネイルの大きさ

.page-archive .entry-thumb {
    width: 200px;
    height: 200px;
    background-size: cover;
    background-position: 50%;
    background-repeat: no-repeat;
    float: left;
    margin-right: 10px;
}

記事説明文

サムネイルのサイズをデフォルトより大きくしたため、こちらも調整しました。

.page-archive .archive-entries .entry-description {
    margin: 0 0 1em;
    line-height: 2.0em;
    font-size: 100%;
}

サイドバーのタイトルの枠の色

.hatena-module-title {
    color: #d25767;
    border: 2px solid #d25767;
}
.hatena-module-title a{
    color: #d25767;
}
.hatena-module-title:before {
    border-top-color: #d25767;
}

読者になるボタンの色

.reader-button a { border: 2px solid #333333; background-color: #d25767; }

シンタックスハイライト

デザインテーマとは直接関係はありませんが、よくブログにプログラムのソースコードを掲載するので、コードが見やすくなるようにダークテーマっぽくしました。

CSSははてなブログシンタックスハイライト CSS ジェネレータを利用して作成しました。

kawmra.github.io

まとめ

はてなブログのテーマを"Brooklyn”に変更＆カスタマイズしました。

洗練されたデザインなので非常に気に入っています。

外観が整ったので、今後は記事のカテゴリーや目次ページの作成など記事・コンテンツをより見やすく、また充実させていきたいと思っています。

*1:技術周りの記事が多いため