MaterialDesignカラーを適用したJekyllテーマ「Materi」

昨年末、久々にブログを書いてみたら自ら作ったBootstrap臭のテーマに飽きてしまったので、 巷で流行りのマテリアルデザイン風なカラーリングでJekyllのテーマを作ってみました。

Materi for Jekyll

以前にBootstrapベースのJekyllテーマを作ったときは一からすべて作りましたが、 今回はm3xmさんがGitHubで公開している「Hikari」というテーマが個人的にシンプルで良さげだったので、 これをforkしてMaterialDesignっぽいスタイルやいくつか機能を追加したり、カスタマイズしてみました。

https://github.com/ogaclejapan/materi-for-jekyll

主な特徴

• マテリアルデザインっぽい背景色やテキスト色を採用
• 本文にGoogle Noto Font、それ以外の部分にUbuntu系Fontを採用
• タグ一覧、タグ毎の記事一覧ページを生成(後述する補足を参照のこと)
• sitemap.xml, robots.txt, 404ページを生成
• OGP, Twitter Cardsのmetaタグ対応(記事ページのみ)
• テーマにあったfaviconをデフォルトで用意

使い方は他のJekyllテーマと同様リポジトリをcloneして使うと非常に簡単です。 使ってみたいと思ったら、ぜひGitHubスターをポチってくださいな☆（ゝω・）vｷｬﾋﾟ

補足: ローカルに試すには？

Bundlerで必要なgemファイルはすべてインストールできます。 RubyとRubyGemsが入っていればBundlerをインストールして実行するだけで簡単に起動できます。

$ git clone https://github.com/ogaclejapan/materi-for-jekyll.git
$ cd materi-for-jekyll

$ gem install bundler

$ bundle install
$ bundle exec jekyll serve -w
# Server running http://localhost:4000/materi-for-jekyll/

補足: タグページを生成するには？

GitHub Pages上ではJekyllのプラグインが動かない仕様のため、 プラグインを使わずに生成できる方法を採用しています。 そのため、生成するためのテンプレートファイルを手動で用意する必要があります。

Jekyllにはタグをつけるための機能が標準で実装されています。 tagsという属性にタグを一意に表すキー文字列を定義してください。

---
layout: post
title: MaterialDesignカラーを適用したJekyllテーマ「Materi」
tags: [jekyll]
---

次に、data/tags.ymlに先ほど定義したキー文字列と表示するタグ名を定義します。 記事ページ内のタグリンクを有効にするかどうかをこの定義で制御してます。

# To generate the tag page will need to be defined here

jekyll:
  name: Jekyll

最後に、タグ付けされた記事一覧を生成するためのテンプレートファイルを作ります。 テンプレートはtags/*配下に作成してください。

• e.g. tags/jekyll.md

---
layout: tag
title: 'Tags: Jekyll'
tag: jekyll
permalink: tags/jekyll/
---

attribute	value
layout	必ず'tag'固定にしてください
title	htmlのtitleタグに表示する文字列
tag	記事に定義したタグのキー文字列
permalink	'tags/(タグのキー文字列)/'

タグキー文字列の冗長な記述が多いのでほんとは自動生成できれば一番いいんですが、 Jekyllではプラグインを使わないとファイルを生成できないので残念なところです。

自前でRakeファイルにこの辺を処理するタスクを定義しておくと、多少手間が省けるかもですね。

補足: WebFontを変更するには？

デフォルトでは英語圏でも使えるようなWebFontを採用しています。

• 本文: Noto Serif
• 本文のコード部分: Ubuntu Mono
• それ以外: Ubuntu

このブログは日本語向けなのでGoogle Noto Japaneseに一部変更しています。 日本語のWebFontはサイズが大きいのでパフォーマンス面ではよくないですが、読みやすさ重視で採用しました。

フォントを変更するには以下の２ファイルを編集してください。

• _includes/link_your_font.html
• _sass/base/_your_font_family.scss