ドキュメントには頻繁に更新が加えられ、その都度公開されています。本ページの翻訳はまだ未完成な部分があることをご了承ください。最新の情報については、英語のドキュメンテーションをご参照ください。本ページの翻訳に問題がある場合はこちらまでご連絡ください。
記事のバージョン: GitHub.com

Jekyll テーマ内の CSS および HTML のカスタマイズ

GitHub Pages は、GitHub Free のパブリックリポジトリ、GitHub Pro のパブリックおよびプライベートリポジトリ、GitHub Team、GitHub Enterprise Cloud、GitHub Enterprise Server で利用いただけます。詳細は「GitHub の製品」を参照してください。

Jekyll テーマにカスタムスタイルを追加してテーマのレイアウトを変更することで、GitHub Pages サイトをカスタマイズできます。

Jekyll をインストールして、公開前にローカルで変更をテストすることをおすすめします。 変更内容はサイトの公開ブランチにマージした後で、サイトに公開されます。 詳細は「Jekyll のビルドプロセス」を参照してください。

Jekyll テーマのソースリポジトリにも、テーマのカスタマイズに関するヘルプがあるかもしれません。 例については、Jekyll テーマ Minima の README をご覧ください。

こうした手順は、GitHub Pages により公式にサポートされている Jekyll テーマの作業に最適化されています。 全リストについては「サポートされているテーマ」を参照してください。

Jekyll テーマの CSS のカスタマイズ

  1. サイトのリポジトリのルートに /assets/css/style.scss というファイルを作成します。

  2. ファイルの先頭に以下のコンテンツを、書かれているとおりそのまま追加します:

    ---
    ---
    
    @import "{{ site.theme }}";
  3. カスタム CSS (または Sass、インポートファイルも含む) があれば @import 行の直後に追加します。

Jekyll テーマの HTML レイアウトのカスタマイズ

  1. GitHub 上の _layouts フォルダにある Jekyll テーマソースリポジトリの default.html ファイルに移動します。 たとえば、https://github.com/pages-themes/THEME_NAME/blob/master/_layouts/default.html に移動して、THEME_NAME を Jekyll テーマ名に置き換えます。

  2. default.html ファイルのコンテンツをコピーします。

    参考: ページの右上にある [Raw] をクリックして、コピーしやすいようにファイルの表示を変更します。

  3. 自分のサイトリポジトリに /_layouts/default.html というファイルを作成します。

  4. ステップ 2 でコピーしたデフォルトのレイアウトコンテンツを、自分のサイトリポジトリの新しい /_layouts/default.html ファイルに貼り付けます。

  5. 必要に応じてレイアウトをカスタマイズします。

参考リンク

担当者にお尋ねください

探しているものが見つからなかったでしょうか?

弊社にお問い合わせください