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

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

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

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

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

Changes to your site are published automatically when the changes are merged into your site's publishing source. If you want to preview your changes first, you can make the changes locally instead of on GitHub. Then, test your site locally. For more information, see "Testing your GitHub Pages site locally with Jekyll."

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

テーマを追加する

  1. On GitHub, navigate to your site's repository.

  2. Navigate to the publishing source for your site. For more information about publishing sources, see "About GitHub Pages."

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

  4. In the upper right corner of the file view, click to open the file editor.

    Edit file button

  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. ページの下部で、ファイルに行った変更について述べた短く意味のあるコミットメッセージを入力してください。コミットメッセージ内でコミットを複数の作者に関連付けることができます。詳細は「複数の共同作者を持つコミットを作成する」を参照してください。

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

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

    Choose commit email addresses

  2. コミットメッセージフィールドの下で、コミットを現在のブランチに追加するか、新しいブランチを作成するかを判断してください。現在のブランチが master なら、コミットに新しいブランチを作成することにして、プルリクエストを作成してください。

    Commit branch options

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

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

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

These instructions work best with themes that are officially supported by GitHub Pages. For a complete list of supported themes, see "Supported themes" on the GitHub Pages site.

Your theme's source repository may offer some help in customizing your theme. For example, see "Minima's README."

  1. On GitHub, navigate to your site's repository.

  2. Navigate to the publishing source for your site. For more information about publishing sources, see "About GitHub Pages."

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

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

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

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

These instructions work best with themes that are officially supported by GitHub Pages. For a complete list of supported themes, see "Supported themes" on the GitHub Pages site.

Your theme's source repository may offer some help in customizing your theme. For example, see "Minima's README."

  1. GitHub 上で、テーマのソースリポジトリにアクセスします。 たとえば、Minima のソースリポジトリは https://github.com/jekyll/minima です。

  2. _layouts フォルダ内で、テーマの default.html ファイルに移動します。

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

  4. On GitHub, navigate to your site's repository.

  5. Navigate to the publishing source for your site. For more information about publishing sources, see "About GitHub Pages."

  6. _layouts/default.html というファイルを作成します。

  7. 先ほどコピーしたデフォルトのレイアウトコンテンツを貼り付けます。

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

参考リンク

担当者にお尋ねください

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

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