Hugoのオススメ３テーマを相互に切り替え可能な環境を作ってみてわかったこと

2019-08-15

Hugoのテーマを色々試してみた結果、ベースを決めてカスタマイズするのがベストという結論に達しました。

数あるテーマの中で特にデザインがすばらしいと感じた３つのテーマをベースに、各テーマのメリット・デメリット、相互切替可能な環境構築のコツなどを紹介します。

オススメのトップ３テーマ

Hexoが起源のテーマ。白と水色とピンクが基本色。レスポンシブデザインにも対応。

テーマの作者は外国人だが記事のスタイルは日本語でもかなり見易い。サイドバーが常に右側にいるのでよくあるWordPressのブログに馴染みのある人は使いやすそう。

検索バーの結果はブログ内部ではなくGoogleに飛ばされて表示される。メニューバーはスマホにすると横スクロール形式になってしまうので、この点はGoogle先生はあまりいい印象をうけないかもしれない。

Archiveのメニューもあるが動作していない様子。本家のHexoでは年表みたいに綺麗に表示される機能があるがまだこちらでは実装されていないようだ。

Hexoが起源のテーマ。かなりデザインが凝っていてオシャレ感がすごい。作り込みもかなり頑張っていて、独自タグも多彩。テーマ自体もGulpで管理されており開発体制は徹底されているイメージ。もちろんレスポンシブデザインにも対応。

記事のレイアウトは**サイドバーが存在しない。**またサイドバー自体もタグやアーカイブへの検索ページへのリンクがメインとなっておりかなりシンプルなのでWordPressに慣れている人は多少使いづらいかもしれない。

独自タグでいちばんすごいと思ったのはコード引用のシンタックスハイライト。かなりの種類の言語に対応しており、プログラマーなら嬉しい機能だ。

３テーマの中で唯一日本人が作っているテーマ。 AMP対応を売りにしているので表示速度を気にしている人にはうれしい。

日本人が作っているので日本語の記事がとても綺麗に表示されるようにデザインされている。 Hタグをうまく使いこなせばかなり見易い記事を作ることができそう。

サムネイルは絶対に表示される作りになっていて、画像がない場合はデフォルトが表示されるよう実装されている。

SNS共有メニューが充実しているのでこれはブロガーにとっては嬉しい。

–	Icarus	Robust	Tranquilpeak
ライセンス	MIT	MIT	GPL
Hugo Ver.	0.20	0.20.2	0.20
Hugo 0.29 互換性	○	○	○
メニューバー	○	×	○
SNS共有機能	×	○	△
サイドバーの使いやすさ	○	○	△
シンタックスハイライト	△	△	○
ギャラリー機能	○	×	○
日本語記事の読みやすさ	○	○	△
オシャレ度	○	○	◎
テンプレ作り込み度	○	△	◎
サムネイル利便性	○	△	○
カスタマイズ性	○	○	△

config.tomlへ記載する内容の差分はかなりあります。

もし３テーマ共通で使えるファイルを作りたいのであればTranquilpeakが一番記載内容が多いのでこれをベースにIcarusの設定を追加していくと楽です。

HugoのThemeはとてもカスタマイズがしやすいように設計されていると感じました。何も考えなくてもある程度レスポンシブな見た目になるのが素晴らしいです。

shortcodesなどは別のthemeで作ったものが使い回しできるところや、テンプレートの中で直感的に条件分岐ができるところがとても便利です。

テーマはHexoと比べるとかなり少ないですが、静的サイトジェネレータの人気としてはHugoの方が高そうです。これはGoogleTrendsで調べれば一目瞭然です。

Hugoのバージョン自体はどんどん上がっているのですが、テーマ側の対応バージョンが古いものが多い印象です。これからもテーマ開発者達が活発に活動してくれることに期待しましょう。