Jekyll テーマ内の CSS および HTML のカスタマイズ
GitHub Pages は、GitHub Free のパブリックリポジトリ、GitHub Pro のパブリックおよびプライベートリポジトリ、GitHub Team、GitHub Enterprise Cloud、GitHub Enterprise Server で利用いただけます。
Jekyll テーマにカスタムスタイルを追加してテーマのレイアウトを変更することで、GitHub Pages サイトをカスタマイズできます。
Jekyll をインストールして、公開前にローカルで変更をテストすることをおすすめします。 変更内容はサイトの公開ブランチにマージした後で、サイトに公開されます。 詳細は「Jekyll のビルドプロセス」を参照してください。
Jekyll テーマのソースリポジトリにも、テーマのカスタマイズに関するヘルプがあるかもしれません。 例については、Jekyll テーマ Minima の README をご覧ください。
こうした手順は、GitHub Pages により公式にサポートされている Jekyll テーマの作業に最適化されています。 全リストについては「サポートされているテーマ」を参照してください。
Jekyll テーマの CSS のカスタマイズ
-
サイトのリポジトリのルートに /assets/css/style.scss というファイルを作成します。
-
ファイルの先頭に以下のコンテンツを、書かれているとおりそのまま追加します:
--- --- @import "{{ site.theme }}"; -
カスタム CSS (または Sass、インポートファイルも含む) があれば
@import行の直後に追加します。
Jekyll テーマの HTML レイアウトのカスタマイズ
-
GitHub Enterprise 上の _layouts フォルダにある Jekyll テーマソースリポジトリの default.html ファイルに移動します。 たとえば、
https://github.com/pages-themes/THEME_NAME/blob/master/_layouts/default.htmlに移動して、THEME_NAMEを Jekyll テーマ名に置き換えます。 -
default.html ファイルのコンテンツをコピーします。
参考: ページの右上にある [Raw] をクリックして、コピーしやすいようにファイルの表示を変更します。
-
自分のサイトリポジトリに /_layouts/default.html というファイルを作成します。
-
ステップ 2 でコピーしたデフォルトのレイアウトコンテンツを、自分のサイトリポジトリの新しい /_layouts/default.html ファイルに貼り付けます。
-
必要に応じてレイアウトをカスタマイズします。