記事のページ
制作会社の方向け · 2026年10月26日 更新
お知らせ・ブログ・実績・施工事例・採用情報は、記事1件ずつのページを書き出せます。サーバに置いたひな形のファイルを写し、記事ごとに中身を入れて書き出します。
- だれ向け:制作会社(ツギテの代理店)の担当の方、テナント管理者。
- 場所:サイト設定の「差し込み箇所」→「記事のページ」の「設定する」。
- 前提:接続設定 が済み、一覧の 差し込み箇所 があること。FAQ には記事のページはありません。
ひな形を作る
ひな形は、記事のページの見た目をそのまま持った HTML のファイルです。今のサイトの記事のページを1つ写し、_template.html に名前を変えて作るのが早いです。
- 記事のページを置くフォルダに、ひな形を置きます(例
news/_template.html)。 - 記事の中身を出したい所を、次のタグの組で囲みます(中にあった記事の HTML は消してかまいません)。
<title>の中の、記事の題名にしたい所をarticle-titleのタグの組で囲みます(任意)。- サーバの公開ディレクトリに置きます。
| タグ | 入るもの | 要るか |
|---|---|---|
<!-- tsugite:article --> 〜 <!-- /tsugite:article --> | 記事の中身 | 要る。ないと記事のページを作りません |
<!-- tsugite:article-title --> 〜 <!-- /tsugite:article-title --> | 記事の題名(文字だけ) | 任意。<title> の中で使います |
例:<title><!-- tsugite:article-title -->お知らせ<!-- /tsugite:article-title --> | サンプル工務店</title>
記事のページを設定する
- 「差し込み箇所」の画面の「記事のページ」の表で、部品の行の「設定する」を押します。
- 「ひな形のファイル」と「書き出す場所」を入れます。初めは
news/_template.html・news/{slug}.htmlのように入っています。 - 「記事の中身の出し方」を選び、「保存する」を押します。
| 欄 | 中身 |
|---|---|
| ひな形のファイル | 公開ディレクトリからの場所。.html か .htm で終わる |
| 書き出す場所 | {slug} を1つだけ入れ、.html で終わる。{slug} は記事ごとの英数字に置き換わる |
| 応募のページ | 採用情報だけ。応募のフォームを置いたページ(例 recruit/entry.html)。空なら「応募する」を出しません |
- ひな形と書き出す場所は、同じフォルダにします。 違うフォルダにすると、相対パスの画像・CSS・リンクがずれることがあります(画面にも注意が出ます)。
- 記事のページはツギテが作るファイルなので、まるごと書き出します。ツギテが作っていない同じ名前のファイルがあるときは、上書きせずに止めます。
- この設定は、その部品の差し込み箇所で共通です。両方を空にして保存すると、記事のページを作りません。
記事の中身の出し方
| 出し方 | どうなるか |
|---|---|
| ツギテの標準の形 | クラス名(tsugite-article、ブログは tsugite-blog__article など)つきの HTML。見た目はサイトの CSS でつけます |
| 自分で書く | 「記事の中身の HTML」に書いた HTML に、{{title}}・{{body}} などの中身が入ります。10,000文字まで |
今のテーマの HTML をそのまま使うには「自分で書く」がおすすめです。代理店の配下のサイトでは、「テンプレートから選ぶ」で共有のテンプレートを写せます。変えたら、次の書き出しで記事のページに入ります。
使える {{…}}
どの部品でも使えるもの:
| 書くもの | 入る中身 |
|---|---|
{{title}} | 題名 |
{{date}}・{{date_iso}} | 日付(2026.10.20 / 2026-10-20) |
{{category}} | カテゴリ(ブログは1つ目のカテゴリ) |
{{image}}・{{image_alt}} | アイキャッチ画像の URL と説明(実績・施工事例は写真の1枚目) |
{{image_tag}} | 画像の <img>。画像がないときは空 |
{{body}} | 本文(整えた HTML のまま) |
部品ごとに増えるもの:
| 部品 | 書くもの |
|---|---|
| ブログ | {{excerpt}}(抜粋。空なら本文の初めの120文字)・{{author}}(書いた人)・{{tags}}(読点「、」でつなぐ)・{{categories}}(付いているカテゴリ全部の <ul class="tsugite-blog__categories">。0件なら空なので {{#categories}}…{{/categories}} で囲める) |
| 実績・施工事例 | {{completed}}(2026年3月)・{{completed_iso}}・{{place}}・{{period}}(工期)・{{cost}}(費用の目安)・{{photo_count}}・{{gallery}}(写真の並び)・{{specs}}(そのほかの項目) |
| 採用情報 | {{status}}・{{employment}}・{{salary}}・{{pref}}・{{city}}・{{place_note}}・{{hours}}・{{holiday}}・{{requirements}}・{{benefits}}・{{flow}}・{{apply_url}}(応募のページ ＋ ?job=職種名。締め切りなら空)・{{is_open}}(open か closed) |
| FAQ(一覧の1件分だけ) | {{question}}・{{answer}}・{{category}}・{{anchor}}(faq-{記事の URL})・{{index}}(1からの番号) |
{{body}}と{{image_tag}}のほかは、値をエスケープして入れます。- 知らない
{{…}}は、そのまま残ります。 - 採用情報の記事のページには、募集中で勤務地の都道府県・市区町村が入っている職種なら、Google しごと検索のデータ(JSON-LD)を記事の中身のあとに出します。
あるときだけ出す・ないときだけ出す
どの {{…}} も、次の形で囲めます。
| 書き方 | はたらき |
|---|---|
{{#キー}}…{{/キー}} | 値があるときだけ、あいだを出す |
{{^キー}}…{{/キー}} | 値がない(空の)ときだけ、あいだを出す |
例:{{#image}}<img src="{{image}}" alt="{{image_alt}}">{{/image}}
- 入れ子は1段までです。
- 閉じ忘れ(
{{/キー}}がない)は、保存のときに止まり、「{{#…}} の書き方を確かめてください」などと出ます。
テーマからひな形を作る
WordPress から移すときは、「WordPress から取り込む」の中の「テーマからひな形を作る」で、今のテーマのページから、ひな形・一覧の1件分・記事の中身をツギテに作らせることができます。WordPress からの移行の手順 を見てください。
うまく出ないとき
- 公開履歴に「ひな形にタグがないので、作っていません」と出る:ひな形に
<!-- tsugite:article -->と閉じのタグがあるか確かめます。 - 公開履歴に「ツギテが作っていないファイルです」と出る:書き出す場所に同じ名前のファイルがあります。ファイルの名前を変えるか、書き出す場所を変えます。
- 画像や CSS が出ない:ひな形と書き出す場所が同じフォルダか確かめます。