Clipkit サイト構築・改修ガイド
CMS組込を行うマークアップエンジニア向けClipkit で WEB サイトの構築、および Clipkit で構築されたサイトの改修を行うためのガイドです。
まず Clipkit の仕組みとテーマ開発の前提を確認し、必要な章（Liquid リファレンス、サンプルコード、その他ノウハウ）から詳細ページへ進んでください。
Clipkitの仕組みとテーマ開発
テーマ
一つのテーマは WEB サイトのデザインに必要なテンプレート、ファイル等から構成されます。基本的には一つのテーマを作成して適用することで WEB サイトの構築が完成します。複数のテーマを作成して一部のページに適用することも可能です。LP のページはまったく別なデザインにしたい等のケースを想定しています。
テンプレート
HTML とテンプレートタグを記述するための機能です。Clipkit のサイト管理画面上で編集を行うことを想定したもので、編集後保存をすることで WEB サイトに即時反映されますのでご注意ください。編集履歴が記録されるようになっていますのでロールバックすることができます。
全体レイアウト
すべてのページに適用される基本となるテンプレートです。このテンプレートに html タグ、head 及び body タグ、ヘッダー・フッターデザインの要素を記述しておくことを想定しています。各ページの要素は {{ content }} と記述した箇所に展開されます。LP のような 1 ページで完結するデザインを作成したい場合はすべての要素を全体レイアウトに記述するだけで完成します。このような場合は {{ content }} の記述は不要です。
トップページ
トップページの URL に対して適用されるテンプレートです。全体レイアウトには記述しないトップページ独自の要素を記述することを想定しています。デフォルトで有効なオブジェクトは site です。
カテゴリー記事一覧ページ
カテゴリーの URL に対して適用されるテンプレートです。カテゴリーに属する記事の一覧を表示します。全体レイアウトの {{ content }} に展開される想定です。デフォルトで有効なオブジェクトは category です。
記事詳細ページ
記事の URL に対して適用されるテンプレートです。タイトル・本文・日付・カテゴリなど、1 件の記事を表示します。デフォルトで有効なオブジェクトは article です。
記事詳細ページ（AMP）
AMP 配信が有効なサイト向けのテンプレートです。通常の記事詳細とは別ファイルとして管理し、AMP 用の HTML を組み立てます。
タグ記事一覧ページ
タグの URL に対して適用されるテンプレートです。タグに紐づく記事の一覧を表示します。デフォルトで有効なオブジェクトは tag です。
ライター記事一覧ページ
ライター（ユーザー）の URL に対して適用されるテンプレートです。当該ライターの記事一覧を表示します。デフォルトで有効なオブジェクトは user です。
404 ページ
存在しない URL へアクセスしたときに表示されるテンプレートです。サイトのデザインに合わせた Not Found ページを用意します。
トップページ・記事詳細など、管理画面のプルダウンには「（スマホ向け）」テンプレートがあります。PC 用とスマートフォン用で HTML ソースを分けて組み立てたいときに使います。
テーマの設定で「レスポンシブデザイン」を有効にしている場合は、通常テンプレートを画面幅に応じて表示する運用になるため、スマホ向けテンプレートは適用されません。
パーシャルテンプレート
ページテンプレートから切り出して使う、再利用可能な HTML の断片です。
ヘッダー・フッター・グローバルナビ、サイドバー、記事カード、パンくず、ページネーション部品など、複数ページで同じマークアップを繰り返す箇所向けです。
全体レイアウトや各ページテンプレートに同じコードをコピーするのではなく、共通パーツだけをパーシャルにまとめると、修正箇所が一か所に集約され、サイト全体のメンテナンスがしやすくなります。
編集の考え方はページ用テンプレートと同じで、Clipkit のサイト管理画面上で HTML とテンプレートタグを記述します。
プルダウンからパーシャルテンプレートを選んで保存すると、呼び出し元のページに即時反映されますのでご注意ください。編集履歴が記録されるため、テンプレートと同様にロールバックできます。
ページテンプレート側では {% render "パーシャル名" %} で描画します。
記事一覧のループの中で 1 件分のマークアップだけをパーシャルにし、{% selectfor %} と組み合わせる使い方もよくあります。詳細な記法は Liquid リファレンスの render タグを参照してください。
ファイル
テーマに紐づく CSS、JavaScript、画像、フォントなど、テンプレートから参照する静的アセットを置く場所です。
ページの HTML 構造はテンプレートとパーシャル、見た目と動作の資材はファイル、と役割を分けると、どこを直せばよいかが明確になります。
本番 URL を HTML に直書きせず、テーマ内のパスで管理する前提の機能です。
サイト管理画面の「ファイル」からアップロードやパス指定で登録します。
テンプレート内では {% file '/theme/original/css/theme.css' %} のようにパスを指定し、スタイルシートやスクリプトの読み込み、画像の src などに使います。
パスやファイル名を変えたときは、参照しているテンプレート側の指定も合わせて更新してください。
1. Liquid リファレンス
2. サンプルコード
ページを構成する基本的なものと目的別のサンプルコードを記載しました。
3. その他ノウハウ
通常のテンプレート編集だけでは足りないときに見る記事です。
4. Clipkit管理画面の機能
フロントエンドの出力に影響する、管理画面側の設定項目と外部データ連携の仕様です。入稿フローや、RSSを用いた他メディアとの記事同期方法についてまとめています。