はてなブログテーマを比較してみる

はてなブログでオリジナルテーマを作成するにあたり、はてなブログの既存テーマを調べて比較してみます。

テーマには公式テーマとオリジナルテーマがありますが、テーマストアから人気順に10テーマずつピックアップして比較します。

人気テーマは更に詳細に見ていきたいと思います。

f:id:hal7pi:20180929082417j:plain

オリジナルテーマ

まずはオリジナルテーマの比較を行います。トップ10を比べてみましょう。

2018年8月時点でのトップ10を表にしてみました。

順位	テーマ	インストール数	投稿日
1	Minimalism	18,493	2017-06-16
2	Brooklyn	21,831	2016-02-04
3	Innocent	24,260	2015-12-20
4	ZENO-TEAL	6,318	2017-03-11
5	Haruni	2,515	2018-03-11
6	SOHO	4,448	2017-07-08
7	Undershirt	1,922	2018-01-06
8	DUDE	17,842	2016-01-17
9	CONTENTS	6,217	2016-05-23
10	Blank	15,881	2015-04-13

あれ？インストール数を元に順位をつけているんじゃないのかな？

1年あたりのインストール数に換算してランキングを見直ししてみましょう。

投稿日を勘案して1年あたりのインストール数を計算しランク付けをやり直したのが以下の表です。

うわ！大分入れ替わりました。

Minimalismがトップは動かず。ですが2位にInnocentが上がり3位のBrooklynと入れ替わりました。またDUDEが4位に躍進です。Haruniは5位動かずですが6位にBlankが食い込んできました。

それではトップ3のオリジナルテーマの特徴を見ていきましょう。なお自作テーマはすべて2コラムが基本と思われます。

圧倒的なインストール数を誇るMinimalismです。

極めてシンプルな2コラムテーマでレスポンシブ対応テーマです。

トップランキングに敬意を表して少し詳しく見ていきましょう。ざっとCSSファイルを眺めました。

基本は2コラムですが簡単に1コラムに変更できるよう予めCSSが準備されています。

メディアクエリのブレークポイントは2か所。640pxまでがSmall Tablet & Smartphone、768pxまでが通常のTablet、それより上がデスクトップ環境です。

フォントファミリーの指定は以下のようになっています。

font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', '游ゴシック Medium', meiryo, sans-serif;

Windowsの方は游ゴシックがメイリオに優先して表示されます。はるなぴはメイリオがお好みですが游ゴシックも美しいですね。

シェアボタンのスタイルが用意されているのも特徴でFontAwesomeを用いてボタンを表示することが可能です。

はるなぴが利用しているテーマです。

サムネイル画像を設定することで見やすいサイドバーつきの2コラムデザインとなります。CSSファイルの容量は36kBです。

またアドセンス広告やアフィリエイト広告を貼り付けるためのデザインがよく考えられているように見えます。はるなぴはこれで決めました。

ナビゲーションバー、SNSシェアボタン、おすすめ記事リストのカスタマイズ方法も詳しく解説されており、人気テーマだけあって情報も豊富でカスタマイズで困ることがありません。

素のデザインはいたってシンプルで、カスタマイズすることが前提でデザインされています。逆に言えばカスタマイズしないままだと素気ないデザインということもできます。

Brooklynはかなり特徴的なテーマです。

白と黒を基調としたデザインです。サイドバーの見出しは吹き出し付きのボックス表示です。好みが分かれるところかもしれません。CSSファイルの容量は31kBです。

レスポンシブデザイン対応でスマートフォンでも美しく表示可能。グローバルメニュー、シェアボタンの設置、読者登録ボタンの追加などのカスタマイズのも簡単に対応できるよう設定が考えられています。

作者のshiromatakumiさんは2018年現在はてなブログで活動中なので今後のメンテナンスも期待できると思われます。

2018年8月現在テーマストアの公式テーマのトップ10を比較します。

インストール数順にトップ10を表にしてみました。

順位	テーマ	インストール数	投稿日
1	Epic	243,004	2011-11-07
2	Evergreen	79,396	2013-03-24
3	Report	64,560	2012-03-16
4	Life	60,161	2016-10-24
5	Handwriting	48,034	2014-01-16
6	Aero	33,904	2011-11-07
7	Reach	33,285	2013-04-18
8	Bordeaux	32,859	2011-11-07
9	Novel	31,938	2013-06-05
10	Natural	31,373	2011-11-07