Skip to main content
ドキュメントへの更新が頻繁に発行されており、このページの翻訳はまだ行われている場合があります。 最新の情報については、「英語のドキュメント」を参照してください。

Hover over a link to another article to get more details. If you have ideas for how we can improve this page, let us know in the discussion.

Jekyll を使用して GitHub Pages サイトにテーマを追加する

テーマを追加およびカスタマイズすることにより、Jekyll サイトをパーソナライズできます。

GitHub Pagesは、GitHub Free及びOrganizationのGitHub Freeのパブリックリポジトリ、GitHub Pro、GitHub Team、GitHub Enterprise Cloud、GitHub Enterprise Serverのパブリック及びプライベートリポジトリで利用できます。 詳しくは、「GitHub の製品」をご覧ください。

リポジトリへの書き込み権限があるユーザは、Jekyll を使用して GitHub Pages サイトにテーマを追加できます。

ブランチから公開している場合、自分のサイトに加えた変更 は、それが該当するサイトの公開元にマージされると、自動的に公開されます。 カスタムの GitHub Actions ワークフローから公開している場合、変更はご利用のワークフローがトリガーされるたびに公開されます (通常は既定のブランチへのプッシュによる)。 まず変更をプレビューしたいなら、GitHub Enterprise Cloud 上ではなくローカルで変更を行うことができます。 そしてサイトをローカルでテストしてください。 詳しくは、「Jekyll を使用して GitHub Pages サイトをローカルでテストする」を参照してください。

テーマを追加する

  1. GitHub Enterprise Cloudで、サイトのリポジトリにアクセスしてください。 1. サイトの公開ソースにアクセスしてください。 詳しくは、「GitHub Pages サイトの公開元を設定する」を参照してください。

  2. _config.yml に移動します。

  3. ファイル ビューの右上の隅で、 をクリックしてファイル エディターを開きます。

    [ファイルの編集] ボタン

    注: ファイルの編集とコミットに既定のファイル エディターを使うのではなく、必要に応じて github.dev コード エディターを使用できます。それには、 の横にあるドロップダウン メニューをクリックし、 [Open in github.dev](github.dev で開く) を選びます。

    ファイルの編集ボタンのドロップダウン

  4. テーマ名のために、ファイルに新しい行を追加します。

    • サポートされているテーマを使用するには、「theme: THEME-NAME」と入力します。THEME-NAME の部分は、テーマのリポジトリの README に示されているテーマ名に置き換えてください。 サポートされているテーマの一覧については、GitHub Pages サイトの「サポートされているテーマ」を参照してください。 構成ファイルでサポートされているテーマ
    • GitHub でホストされているその他の任意の Jekyll テーマを使うには、「remote_theme: THEME-NAME」と入力します。THEME-NAME の部分は、テーマのリポジトリの README に表示されている名前に置き換えます。 構成ファイルでサポートされていないテーマ 1. ページの下部で、ファイルに対して行った変更を説明する短く分かりやすいコミットメッセージを入力してください。 コミットメッセージでは、複数の作者にコミットを関連づけることができます。 詳しくは、「複数の作者を持つコミットを作成する」を参照してください。 変更のコミット メッセージ
  5. GitHub.com のアカウントに複数のメール アドレスが関連付けられている場合は、[メール アドレス] ドロップダウン メニューをクリックし、Git 作成者のメール アドレスとして使用するメール アドレスを選びます。 このドロップダウンメニューには、検証済みのメールアドレスだけが表示されます。 メール アドレスのプライバシーを有効にした場合は、<username>@users.noreply.github.com が既定のコミット作成者のメール アドレスになります。 詳しくは、「コミットメールアドレスを設定する」を参照してください。 コミット メール アドレスの選択 1. コミットメッセージフィールドの下で、コミットの追加先を現在のブランチか新しいブランチから選択してください。 現在のブランチがデフォルトブランチなら、コミット用に新しいブランチを作成してからPull Requestを作成すべきです。 詳しくは、「pull request の作成」を参照してください。 コミット ブランチのオプション 1. [ファイルの変更の提案] をクリックします。 [ファイルの変更の提案] ボタン

テーマの CSS をカスタマイズする

これらの手順は、GitHub Pages によって公式にサポートされているテーマで最もうまくいきます。 サポートされているテーマの完全な一覧については、GitHub Pages サイトの「サポートされているテーマ」をご覧ください。

テーマのソースリポジトリには、テーマのカスタマイズに関するヘルプがあるかもしれません。 たとえば、Minima の README を参照してください。

  1. GitHub Enterprise Cloudで、サイトのリポジトリにアクセスしてください。 1. サイトの公開ソースにアクセスしてください。 詳しくは、「GitHub Pages サイトの公開元を設定する」を参照してください。

  2. /assets/css/style.scss という新しいファイルを作成します。

  3. ファイルの先頭に、以下の内容を追加します。

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

テーマの HTML レイアウトをカスタマイズする

これらの手順は、GitHub Pages によって公式にサポートされているテーマで最もうまくいきます。 サポートされているテーマの完全な一覧については、GitHub Pages サイトの「サポートされているテーマ」をご覧ください。

テーマのソースリポジトリには、テーマのカスタマイズに関するヘルプがあるかもしれません。 たとえば、Minima の README を参照してください。

  1. GitHub 上で、テーマのソースリポジトリにアクセスします。 たとえば、Minima のソース リポジトリは https://github.com/jekyll/minima です。
  2. _layouts フォルダー内で、テーマの default.html ファイルに移動します。
  3. ファイルの内容をコピーします。
  4. GitHub Enterprise Cloudで、サイトのリポジトリにアクセスしてください。 1. サイトの公開ソースにアクセスしてください。 詳しくは、「GitHub Pages サイトの公開元を設定する」を参照してください。
  5. _layouts/default.html という名前のファイルを作成します。
  6. 先ほどコピーしたデフォルトのレイアウトコンテンツを貼り付けます。
  7. 必要に応じてレイアウトをカスタマイズします。

参考資料