サイトのデザインと追加ページ
テンプレートやページではテンプレート言語が使用できます。次の情報も参照してください。
テーマ
サイト管理 > テーマ
テーマは、サイトのデザインテンプレートパッケージです。「テンプレート」「ページ」「ファイル」「ウィジェット」の要素で構成されます。サードパーティ製のテーマをアップロードして適用したり、さらにそれを自由に編集したりすることができます。
作成したテーマはサイト全体のデザインとして適用できる他、記事ごと、あるいはページごとに個別に適用することもできます。
ダウンロード
テーマに紐付けられたテンプレート、ページ、ファイル、ウィジェットを、1つのテーマファイルとしてダウンロードすることができます。
テンプレート
サイト管理 > テーマ > (テーマを選択) > [テンプレート]
テンプレートをカスタマイズすることで、サイトのデザインを細かく変更したり、広告を挿入することなどができます。
レイアウトテンプレート
レイアウトテンプレートはHTML全体部分（<html>〜</html>）が定義されます。すべてのページで共通のフッタやヘッダ部分の表示や、CSSの読み込みや共通のJavaScriptコードなどはここで定義します。
コンテンツテンプレートで定義された変数は、レイアウトテンプレートで参照できます。
コンテンツテンプレート
フロント側の一部ページ（トップページや記事詳細ページなど）を定義できます。
変更したい項目を選択して、[編集開始] をクリックすると、編集が可能になります。
変更をやめてテンプレートをシステムデフォルトの状態に戻すには、[初期値を使用] をクリックしてから保存します。
パーシャルテンプレート
他のテンプレートやページ内から利用できる、再利用可能な部分テンプレートを作ることができます。
パーシャルテンプレートはLiquidタグ {% render 'テンプレート名' %} で読み込むことができます。
ページ
サイト管理 > ページ
追加のページを作成することができます。利用規約やプライバシーポリシーなどの静的なページはもとより、テンプレート言語が使用可能なので、サイトの情報を使用した動的なページまで応用できます。
パス名(英数字)
ページURLとして使用されます。
タイトル
ページのタイトルです。
編集モード
テンプレート言語を使用する場合はソースコードモードの使用をおすすめします。
ファイル
サイト管理 > ファイル
画像、js、cssなどの静的ファイルをアップロードできます。アップロードしたファイルはテンプレートやページから利用できます。
ドラッグ＆ドロップでファイルをアップロードすることができます。ドラッグ＆ドロップに未対応の一部ブラウザでは、クリックしてファイルを選択できます。ShiftやCtrl(cmd)キーを押しながら選択することで複数ファイルを選択し、まとめてアップロードできます。
アップロードされたファイル一覧が表示されます。ファイルをクリックすると詳細が表示されます。
ファイルの利用方法
テンプレート記述」に表示された文字列をテンプレートやページ内に書くことで、URLを参照することができます。
例）
<img src="{% file "/logo.png" %}" alt="Logo">
ファイルの編集
.cssや.jsなどのテキストファイルはここで直接編集することもできます。
Sass、CoffeeScript、ES6(2015)+の自動コンパイル
Sass（拡張子.scss/.sass）、CoffeScript（拡張子.coffee）、ES6(2015)+（拡張子.mjs）ファイルをアップロード、もしくは編集すると、自動的にコンパイル結果を出力します。
例えばsample.css.scssもしくはsample.scssというファイル名でファイルを作成すると、sample.cssというファイル名でコンパイル結果が出力されます。すでにファイルが存在する場合は上書きされます。
ウィジェット
サイト管理 > ウィジェット
テンプレートやページ内から利用できる、再利用可能な部品を作ることができます。
パーシャルテンプレートと似ていますが、広告やブログパーツなど、デザイン制作者以外の方によって変更する可能性のあるパーツを定義するのに向いています。
ウィジェットはLiquidタグ{% widget 'Name' %}で読み込むことができます。
フォーム
サイト管理 > フォーム
アンケートや問い合わせのフォームを作ることができます。
作成したフォームは固定ページに配置したり、ウィジェット化して記事内に配置することができます。
フォームはLiquidタグ {% form 'Name' %} で読み込むことができます。
コレクション
サイト管理 > コレクションアイテム
記事や画像、広告用HTMLなどのコンテンツをリストとして管理することができます。
作成したコレクションはテンプレートや固定ページに配置したり、記事内に配置することができます。
コレクションはLiquidタグ {% collection 'Name' %} で読み込むことができます。
コレクションのデータにて動的にHTMLが出力されます。デザイン調整をする場合は、cssにて対応が必要になります。
また、HTML構造を変更したい場合は、以下のようにしてテンプレートで自由にHTMLの調整が可能です。
{% assign collection = site.collections | find_by: 'name', 'コレクション Name' %}
{% for item for collection.items %}
{% if item.type == 'CollectionItemArticle' %}
{{ item.label }}
...
{% elsif item.type == 'CollectionItemImage' %}
...
{% elsif item.type == 'CollectionItemHtml' %}
{{ item.caption }}
...
{% endif %}
{% endfor %}