Jekyllのテーマを自作する 基本編 – 第3回 – 基本レイアウトを作成する

Jekyll

こんばんは。第3回はサイトの基本となるレイアウトを作成します。よろしくお願いします。

前回までのおさらい

今回は、サイトの核となる基本レイアウトの作成です。前回まででテーマフォルダの中身はこんな感じになってます。

.
├── .git
├── .gitignore
├── _config.yml
├── _includes
├── _layouts
│   ├── default.html
│   ├── page.html
│   └── post.html
├── _posts
├── _sass
├── assets
│   ├── css
│   ├── images
│   └── js
└── index.html

また、サイトの設定ファイルも以下のように作成済みです。

title: My Jekyll
description: >
  My Description. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
baseurl: ""
url: "http://e-joint.jp"

author:
  name: e-JOINT.jp
  email: mail@example.com
  github: ejointjp
  twitter: ejointjp

paginate: 3
paginate_path: page:num

sass:
  style: expanded

gems:
  - jekyll-paginate
  - jekyll-feed

サイトのメインとなるHTMLを作る

まずはサイトの最も基本となるHTMLを作成します。ひとまず、「index.html」にて作成していきます。なお、当シリーズでは、role属性やmicrodataなどは省略します。よしなに。

「index.html」をこんな感じに作成しました。

---
layout: default
---

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <title>サイトタイトルとかページタイトルとか</title>
  <!-- Normalize.css -->
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <!-- Main CSS -->
  <link rel="stylesheet" href="{{ '/assets/css/style.css' | relative_url }}">
  <meta name="description" content="ここにページの説明文">
  <meta name="viewport" content="width=device-width">
  <link rel="canonical" href="{{ page.url | replace:'index.html','' | absolute_url }}">
</head>

<body>

<!-- サイト名とナビゲーション部分。全ページ共通 -->
<header class="header">
  <div class="container">
    <div class="site-title"><a href="{{ '/' | relative_url }}">{{ site.title }}</a></div>
    <nav class="nav">
      <ul class="nav__list">
        <li class="nav__item"><a href="{{ '/' | relative_url }}">Home</a></li>
        <li class="nav__item"><a href="{{ '/about/' | relative_url }}">About</a></li>
      </ul>
    </nav>
  </div>
</header>



<p>ここにコンテンツ。ページによっていろいろ。</p>
  
  
  
<!-- フッター。全ページ共通 -->
<footer class="footer">
  <div class="container">
    <div class="footer__container">
      <p class="copyright"><small>&copy; 2017 {{ site.author.name }}</small></p>

      <div class="social-link">
        {% if site.author.github %}
          <p class="social-link__item">
            <a href="https://github.com/{{ site.author.github }}"><i class="fa fa-github"></i></a>
          </p>
        {% endif %}
        {% if site.author.twitter %}
          <p class="social-link__item">
            <a href="https://twitter.com/{{ site.author.twitter }}"><i class="fa fa-twitter"></i></a>
          </p>
        {% endif %}
      </div>
    </div><!--footer__container-->
  </div><!--container-->
</footer>

</body>
</html>

ページを作る際の注意

まず、最上部にトリプルダッシュ(ハイフン3つ)で囲まれた部分が、前回までに説明しました「Front-matter」というやつです。基本的に、Jekyllで作成するページには必ず必要だと思ってください。Front-matterがないと、設定ファイルで設定したサイトタイトルなどが変換されず、正しく出力できません。

究極的なことを言えば、ハイフン3つを2列、ページの最上部に記述すればOKです。

で、Front-matterで「layout: default」と設定していますが、これは、「_includes/default.html」というレイアウトファイルを適用するという意味です。レイアウトファイルについて説明していきます。

他にも普通のHTMLと違う部分がいくつかありますので、説明していきます。

その他補足

2つのスタイルシートをCDNから読み込んでいます。ひとつは、デフォルトのスタイルをよしなにしてくれるNormalize.css、もうひとつは、TwitterやGithubのアイコンを表示させるために、Font Awesomeを読み込んでいます。

変数の取得(出力)について

レイアウトを作成していく前に、Jekyllの設定値の取得(出力)方法について説明します。

設定ファイル「_config.yml」で設定した値を使う

設定ファイルで設定した値の出力は、 {{ site.○○ }} で取得します。上記index.htmlの47行目では {{ site.author.name }} で著者名を取得し出力しています。50行目以降ではGithubアカウント名とTwitterアカウント名を取得しています。

各ページ固有の値を使う

後述しますが、ページタイトルやページのURLなどは {{ page.○○ }} で取得します。headタグ内canonicalでは {{ page.url }} でページのURLを取得しています。

{{ page.url | replace:'index.html','' | absolute_url }}">

サイト内リンクの書き方

サイト内リンクの書き方はこのように書くのがお作法となります。

{{ '/assets/css/style.css' | relative_url }}

このようにrelative_urlを指定することで、設定ファイルで設定した設定した「baseurl」(サイトのドメイン以下のパス)を先頭に付与した相対URLに変換して出力してくれます。。「baseurl」が空の場合は /assets/css/style.css となり、「baseurl」に「/mysite」と設定されている場合は /mysite/assets/css/style.css と出力されます。

また、httpからはじまる絶対URLを出力する場合は「absolute_url」を使います。

{{ '/assets/css/style.css' | absolulte_url }}

if文を使う

ページ内でif文を使うことができます。以下は「site.author.github」の値が存在する場合に、中身を表示させる処理です。もちろん {% else %} も使えます。

{% if site.author.github %}
  <i class="fa fa-github"></i>
{% endif %} 

Jekyllの基本となるレイアウトファイルについて

さて本題です。Jekyllでは、いくつかの基本レイアウトを作成し、それらを各ページ(投稿や固定ページ)で選択して反映させる、といった形でページレイアウトを形成します。

「_layouts」フォルダに、あらかじめ3つのファイルが作成されています。この「_layouts」フォルダ内のファイルが、レイアウトのテンプレートファイルとなります。

_layouts
 ├── default.html
 ├── page.html
 └── post.html

基本的に、「default.html」はサイトの基本レイアウト、「page.html」は固定ページ用レイアウト、「post.html」は投稿記事用レイアウトとして使用します。

デフォルトレイアウト「default.html」は、初期状態でこのように {{ content }} とだけ書かれています。

{{ content }}

Front-matterで「layout: default」を設定したファイルに記述された内容が、この「_layouts/default.html」内の {{ content }} 部分に反映されて出力されます。つまり、今の状態であれば、index.htmlのFront-matter以下をそのまま出力します。

サイトの全ページ共通のデフォルトレイアウトを作成する

まず、全てのページに共通のデフォルトレイアウトを作成します。トップページ、固定ページ、投稿記事、いずれにも共通するレイアウト部分の作成となります。これには「_layouts/default.html」を使います。

上で作成した「index.html」から「_layouts/default.html」へ、共通部分を移植します。

---
layout: default
---

<div class="contents front-page">
  <div class="container">
    トップページのコンテンツです。記事一覧が入ります。
  </div><!--container-->
</div><!--contents-->
<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <title>サイトタイトルとかページタイトルとか</title>
  <!-- Normalize.css -->
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <!-- Main CSS -->
  <link rel="stylesheet" href="{{ '/assets/css/style.css' | relative_url }}">
  <meta name="description" content="ここにページの説明文">
  <meta name="viewport" content="width=device-width">
  <link rel="canonical" href="{{ page.url | replace:'index.html','' | absolute_url }}">
</head>

<body>

<!-- サイト名とナビゲーション部分。全ページ共通 -->
<header class="header">
  <div class="container">
    <div class="site-title"><a href="{{ '/' | relative_url }}">{{ site.title }}</a></div>
    <nav class="nav">
      <ul class="nav__list">
        <li class="nav__item"><a href="{{ '/' | relative_url }}">Home</a></li>
        <li class="nav__item"><a href="{{ '/about/' | relative_url }}">About</a></li>
      </ul>
    </nav>
  </div>
</header>



{{ content }}
  
  
  
<!-- フッター。全ページ共通 -->
<footer class="footer">
  <div class="container">
    <div class="footer__container">
      <p class="copyright"><small>&copy; 2017 {{ site.author.name }}</small></p>

      <div class="social-link">
        {% if site.author.github %}
          <p class="social-link__item">
            <a href="https://github.com/{{ site.author.github }}"><i class="fa fa-github"></i></a>
          </p>
        {% endif %}
        {% if site.author.twitter %}
          <p class="social-link__item">
            <a href="https://twitter.com/{{ site.author.twitter }}"><i class="fa fa-twitter"></i></a>
          </p>
        {% endif %}
      </div>
    </div><!--footer__container-->
  </div><!--container-->
</footer>

</body>
</html>
$ jekyll serve

して、http://127.0.0.1:4000 をプレビューしてみましょう。このように表示されていればOKです。「index.html」に記述した内容が、「default.html」の {{ content }} 部分にちゃんと反映されています。

固定ページのレイアウトを作成する

固定ページ、というのはWordPressの用語ですが、分かりやすいようにそう呼びます。要はブログ記事とは違う、投稿日時やカテゴリーなどの要素を持たない、一枚のページだと思ってください。例えば、自分のプロフィールページなどが当てはまります。

固定ページのレイアウトには「_layouts/page.html」を使います。

「page.html」にはあらかじめデフォルトレイアウトを読みこむ記述がされていますので、そのまま使います。

---
layout: default
---

{{ content }}

つまり、「page.html」も「default.html」を通して出力することで、先ほど作ったページの共通部分を利用することができます。

「page.html」に、固定ページ専用のレイアウトを作成します。

---
layout: default
---

<article class="contents page">
  <div class="container">
    
    <div class="page__header">
      <h1 class="page__title">{{ page.title }}</h1>
      <p class="page__description">{{ page.description }}</p>
    </div>

    <div class="page__body">


        {{ content }}


    </div><!--page__body-->
    
  </div><!--container-->
</article><!--page-->

ややこしいのでもう一度説明しますが、これから作成する固定ページ(例えばabout.md)から「layout: page」でこのレイアウトを呼び出すと、「page.html」のレイアウトが反映され、さらに「page.html」は「layout: default」を指定しているので「default.html」のレイアウトを反映して出力される、というあんばいです。

試しに、プロフィールページ「about.md」を作成します。

$ touch about.md

ちなみに、htmlファイルでもOKですが、.mdや.markdownファイルにすることで、本文をマークダウン形式で出力することができます。

「about.md」の中身を記述します。

---
layout: page
title: About
description: プロフィールページのサンプルです。よろしくお願いします。
permalink: /about/
---

マークダウン形式で書けます。

## Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

「permalink: /about/ 」を設定しているので、URLは「http://127.0.0.1:4000/about/」となります。

$ jekyll serve

して、「http://127.0.0.1:4000/about/」にアクセスしてプレビューしてみましょう。

ページのFront-matterで設定したページタイトルや説明文が {{ page.○○ }} の部分に反映されています。また、本文は {{ content }} の部分に出力されています。

投稿記事のレイアウトを作成する

お次は投稿記事のレイアウトです。基本的には今までと同じです。

レイアウトファイルは「_layouts/post.html」を使います。

---
layout: default
---

<article class="contents page">
  <div class="container">

    <div class="page__header">
      <h1 class="page__title">{{ page.title }}</h1>
      <p class="page__date">{{ page.date | date: '%B %d, %Y' }}</p>
    </div>

    <div class="page__body">


      {{ content }}


    </div><!--page__body-->

    <!-- 前後のページへのリンクを表示したい -->
    <div class="pager">

      <p class="pager__item--next">
        <a href="">&lt; 次のページ</a>
      </p>

      <p class="pager__item--prev">
        <a href="">前のページ &gt;</a>
      </p>

    </div><!--pager-->
    
  </div><!--container-->
</article><!--page-->

{{ page.date }} で投稿日時を取得します。

記事の日付の設定についてはこちらをご覧ください。

dateフォーマットについてはこちらをご覧ください。

テスト記事を作成します。

$ touch _posts/2017-02-21-hello-world.md

中身はこんな感じに記述します。

---
layout: post
title: Hello World!
---

First Post.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Front-matterで「layout: post」を指定します。これによって、「_layouts/post.html」のレイアウトが反映されます。

「http://127.0.0.1:4000/2017/02/21/hello-world.html」をプレビューします。

日付などもちゃんと反映されました。なお、前後の記事へのリンクについては、第7回のページネーションの記事で作成します。

「default」「page」「post」以外のレイアウトを作りたい

ここで出てきたもの以外のレイアウトを使うこともできます。例えば「fuga」というレイアウトを使いたい場合は、「_layouts」フォルダに「fuga.html」を作成し、使いたいページのFront-matterで「layout: fuga」を指定します。

まとめ

レイアウトの作成については以上です。今回紹介したように、基本的には「default」を全てのページの基盤とし、「page」「post」のレイアウトも「default」を基盤に作成していくことをおすすめします。

次回はスタイルシート(Sass)についてです。

次は Jekyllのテーマを自作する 基本編 – 第4回 – Sass(CSS)でスタイルを作成する