Hugoのテーマを自分好みに改造したった
Octopressで生成した旧ブログですが、放置1していたのでHugoで作り直しました。
なぜかは思い出せないですが、前のやつはなんか…いまいち好きになれなかったです。本体の更新と初期設定が面倒臭かったのが主な要因な気がしますが。
さて、「Hugoでブログ作るよ！」なんて記事を書くと「また構築記事なんでしょ？もういいよ」とか言われそうなほど構築記事がある2のですが、みんなと同じことやるのがあまり好きじゃないタイプなので、タイトル通りニッチ（？）なところを攻めていきます。
テーマの改造 is 何
Hugoの好きなところは、テーマの追加・適用・上書きが簡単なところです。
追加はthemesディレクトリにgit clone（個人的にはgit submodule add）するだけで、
$ cd themes
$ git clone [Theme URL]
適用はconfig.tomlのthemeの行をいじるだけ、
theme = "hugo-example"
上書きは元ファイルと同じ構造のディレクトリと、同じ名前のファイルを別の場所に追加するだけです。
[Siteのルート]/themes/hugo-example/static/css/example-design.css
↓
[Siteのルート]/static/css/example-design.css
上書きしまくることで自分が好きなようにテーマをいじくることができます。
実際にやってみた
ベースにしたテーマはPhlat Themeで、改造箇所を軽くまとめると下記のような感じ。
- 日本で馴染みのなさそうなシェアアイコンを削除
- はてなブックマークのアイコン3とシェアボタンを追加
- highlight.jsの配色を
monokai-sublimeに変更 - シンタックスに
no-highlightを指定したときの文字色を変更 - コードブロックのフォントを変更
- ページ最下部のSNSリンクを新しいタブで開くように変更
- ページ右側のDonateを削除
- 画像に枠を追加
箇条書きに載ってない改造箇所はconfig.tomlの変更で対応可能です。
本当はテーマに使われているBootstrapをMarkdownでも最大限生かせるような改造を目指していたのですが、途中で面倒くさくなってHTML直書きすることで対応することにしました。
ブラウザの互換性問題がこの世から完全に無くなるのはいつになるのか…。
ということで
気合とやる気によっては、元のテーマがわからなくなる程度に改造することも可能です。
もっとも、それほどまでに自分がほしいテーマが固まっていたら、テーマを自作したほうが早そうな気もします。
Hugoはドキュメントが結構しっかりしていたり、hugoコマンドで空っぽのテーマをサクッと作れたりするので、Webデザインが大好きな方はチャレンジしてみてはどうでしょうか。
テーマづくりにはプログラミング要素がちょこっとありますが、ドキュメントを読んだり既存テーマを参考にするとテーマづくりも捗ると思います。
僕はやりません。はい。