PetaCMS 無料で始める

導入ガイド

PetaCMS を既存サイトに導入する手順を解説します。所要時間は約5分です。

1 アカウント作成

  1. 新規登録ページからアカウントを作成
  2. 確認メールが届くので、リンクをクリックしてメール認証
  3. ログイン後、「新しいサイトを追加」からサイトを登録

14日間の無料トライアル付き。クレジットカードは不要です。

2 スクリプトタグを設置

管理画面の「埋め込みコード」ページに表示されるスクリプトタグを、 既存サイトの <head> または </body> の直前に追加します。

HTML

<!-- PetaCMS Widget Loader -->
<script
  src="https://cdn.peta-cms.com/widget.js"
  data-site-id="あなたのサイトID"
  defer
></script>

Shadow DOM で完全隔離されるため、既存の CSS に影響しません。

3 記事リストを表示する

お知らせやブログの一覧を表示したい場所に、以下の div タグを追加します。

HTML

<!-- PetaCMS: 記事リスト -->
<div data-petacms-posts data-limit="10"></div>

テンプレート

data-template 属性で表示スタイルを変更できます。

値 説明
list シンプルなリスト表示（デフォルト）
card カードグリッド表示
timeline タイムライン表示

例: カード表示で5件

<div data-petacms-posts data-template="card" data-limit="5"></div>

3b スニペットを埋め込む

ページ内の任意のテキストやHTMLを管理画面からリモート更新できます。 お知らせバナーやキャンペーン情報の更新に最適です。

HTML

<!-- PetaCMS: スニペット -->
<div data-petacms="snippet" data-key="header-notice"></div>

data-key は管理画面のスニペット一覧で確認できます。

テンプレート記法

HTML 内に {{キー名}} と記述すると、 該当するスニペットのテキストに自動置換されます。

HTML 内にそのまま記述

<p>お問い合わせ: {{contact-email}}</p>
<p>営業時間: {{business-hours}}</p>

data 属性リファレンス

属性 用途 値の例
data-petacms-posts 記事一覧を表示 （値不要）
data-petacms="post" 記事詳細を表示 data-slug="my-article"
data-petacms="snippet" スニペットを表示 data-key="notice"
data-petacms="categories" カテゴリ一覧を表示 （値不要）
data-template 表示テンプレート list / card / timeline
data-limit 表示件数（最大100） 10
data-base-path 記事リンクのベースパス /blog/

よくある質問

CSP（Content Security Policy）を設定している場合は？

script-src に https://cdn.peta-cms.com を、 connect-src に https://cdn.peta-cms.com を追加してください。

既存の CSS と干渉しますか？

いいえ。PetaCMS のウィジェットは Shadow DOM 内でレンダリングされるため、 既存サイトの CSS と完全に隔離されます。

サイトの表示速度への影響は？

widget.js は 1KB 未満で defer 属性付きのため、 ページの初期表示をブロックしません。コンテンツは Cloudflare のエッジから配信されます。

準備はできましたか？

14日間の無料トライアルで、今すぐ始められます。

無料で始める