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

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

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

GitHub Pagesは、GitHub Free 及びGitHub FreeのOrganizationではパブリックリポジトリでのみ使用でき、GitHub Pro、GitHub Team、GitHub Enterprise Cloud、GitHub Enterprise Server ではパブリックおよびプライベートリポジトリで使用できます。 詳しい情報については「GitHubの製品」を参照してください。

ここには以下の内容があります:

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

変更がサイトの公開ソースにマージされると、サイトへの変更は自動的に公開されます。 まず変更をプレビューしたいなら、GitHubではなくローカルで変更を行えます。 そしてサイトをローカルでテストしてください。 詳しい情報については、「Jekyll を使用して GitHub Pages サイトをローカルでテストする」を参照してください。

テーマを追加する

  1. GitHubで、サイトのリポジトリにアクセスしてください。

  2. サイトの公開ソースにアクセスしてください。 公開元に関する詳しい情報については、「GitHub Pages について」を参照してください。

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

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

    ファイルの編集ボタン

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

    • サポートされている名前を使うには、theme: THEME-NAME と入力します。THEME-NAME の部分は、テーマのリポジトリの README に表示されている名前に置き換えます。 サポートされているテーマのリストについては、GitHub Pages サイトで「サポートされているテーマ」を参照してください。
      Supported theme in config file
    • GitHub にホストされているその他の任意の Jekyll テーマを使うには、remote_theme: THEME-NAME と入力します。THEME-NAME の部分は、テーマのリポジトリの README に表示されている名前に置き換えます。
      Unsupported theme in config file
  6. ページの下部で、ファイルに対して行った変更を説明する短く分かりやすいコミットメッセージを入力してください。 コミットメッセージでは、複数の作者にコミットを関連づけることができます。 詳しい情報については「複数の共作者を持つコミットの作成」を参照してください。

    変更のコミットメッセージ

  7. コミットメッセージのフィールドの下で、メールアドレスのドロップダウンメニューをクリックし、Gitの作者のメールアドレスを選択してください。 このドロップダウンメニューには、検証済みのメールアドレスだけが表示されます。 メールアドレスのプライバシーを有効化している場合、<username>@users.noreply.github.comがデフォルトのコミット作者メールアドレスになります。 詳細は「コミットメールアドレスを設定する」を参照してください。

    コミットメールアドレスの選択

  8. コミットメッセージフィールドの下で、コミットの追加先を現在のブランチか新しいブランチから選択してください。 現在のブランチが master であれば、コミット先として新しいブランチを作成することを選択し、続いてプルリクエストを作成しなければなりません。 詳しい情報については「新しいプルリクエストの作成」を参照してください。

    コミットブランチのオプション

  9. [Propose file change] をクリックします。

    ファイル変更の提案ボタン

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

こうした手順は、GitHub Pages により公式にサポートされているテーマで最もうまくいきます。 サポートされているテーマの完全なリストについては、GitHub Pages サイトで「サポートされているテーマ」を参照してください。

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

  1. GitHubで、サイトのリポジトリにアクセスしてください。

  2. サイトの公開ソースにアクセスしてください。 公開元に関する詳しい情報については、「GitHub Pages について」を参照してください。

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

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

    ---
    ---
    
    @import "";
    
  5. カスタム 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で、サイトのリポジトリにアクセスしてください。
  5. サイトの公開ソースにアクセスしてください。 公開元に関する詳しい情報については、「GitHub Pages について」を参照してください。
  6. _layouts/default.html というファイルを作成します。
  7. 先ほどコピーしたデフォルトのレイアウトコンテンツを貼り付けます。
  8. 必要に応じてレイアウトをカスタマイズします。

参考リンク

担当者にお尋ねください

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

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