公開連携
ウェブサイトビルダー（HTMLウィジェット）
最終更新日：
HTMLウィジェットをWebflow、Squarespace、Framer、GoDaddy、Weebly、BigCommerce、Duda、Drupal、Joomla、Blogger、Lovableに追加して、記事を表示します。
お使いのサイトビルダーがClodixからの直接公開に対応していない場合（Webflow、Squarespace、Framer、GoDaddy、Weebly、BigCommerce、Duda、Drupal、Joomla、Blogger、Lovableはこの方式です）、Clodixは代わりに小さなコードスニペットを1つ用意します。ブログを表示したいページに一度貼り付けるだけで、公開済みの記事が自動的に表示されます。訪問者が記事をクリックすると、記事の全文も表示されます。
コードを取得する
- Settings → Publishing integrations を開き、ご利用のプラットフォームのタイルをクリックします（それ以外のサイトは HTML widget）。
- 表示されたスニペットをコピーします。
貼り付ける場所
| プラットフォーム | 場所 |
|---|---|
| Webflow | Designerでページに Code Embed 要素を追加し、スニペットを貼り付けて Save & Close をクリックし、サイトを公開します。 |
| Squarespace | ブログを表示したいページに Code Block を追加し、スニペットを貼り付けます。 |
| Framer | ページに Embed（HTML）レイヤーを追加し、スニペットを貼り付けて、公開します。 |
| GoDaddy | GoDaddy Website Builderで HTML セクションを追加し、スニペットを貼り付けて、公開します。 |
| Weebly | Embed Code 要素をページにドラッグし、Edit Custom HTML をクリックして、スニペットを貼り付けます。 |
| BigCommerce | Page Builderで HTML ウィジェットを追加し（またはScript Managerを使用）、スニペットを貼り付けます。 |
| Duda | Dudaのエディターで HTML ウィジェットをページにドラッグし、スニペットを貼り付けます。 |
| Drupal | テキスト形式を Full HTML にした Custom Block を追加し、スニペットを貼り付けて、ページに配置します。 |
| Joomla | ページに Custom HTML モジュールを追加し、スニペットを貼り付けて保存します。 |
| Blogger | Layout → Add a Gadget → HTML/JavaScript に進み、スニペットを貼り付けて保存します。 |
| Lovable | Lovableのチャットで次のように依頼します：「Create a Blog page at /blog and add this code to it exactly as it is」。その後にスニペットを貼り付けて、Publish します。 |
| その他のサイト | ページ内の </body> の直前にスニペットを貼り付けます。 |
プレーンな <div id="clodix-articles"></div> と、その後ろのscriptタグがあれば、名前の挙がっているビルダー以外でも同じように動作します。
- Clodixに戻り、I've added the code をクリックします。
連携後
- Page where you added the widget 欄に入力すると、Clodixがアプリ内から各記事の公開URLに直接リンクできるようになります。任意ですが、入力しておくと便利です。
- View live をクリックしてサイトを開き、ウィジェットに記事が表示されていることを確認します。
- 新規記事や編集した記事は、ウィジェットに 自動的に 反映されます。再公開の必要はありません。Clodixはウィジェットのスクリプトを最大5分間キャッシュするため、完成したばかりの記事が最初に表示されるまで数分かかることがあります。
「コードを追加したのに、サイトにないとClodixに表示される」
I've added the code をクリックしても、ウィジェットが接続済みとしてマークされるだけです。コードの横のステータスが Not found on your site yet から Live on your site に変わるのは、訪問者のブラウザがページからウィジェットを実際に読み込んだ最初のときです。それまでは、Your articles aren't showing on your site yet というバナーも表示されます。
I've added the code をクリックした直後に、Clodixはコード自体も探します。入力したページ、ホームページ、サイトマップにあるページが対象です。コードが見つかった場合、ステータスは約1分以内に Live on your site に変わり、誰かがページを訪れる必要はありません。見つからない場合は、次の項目を順に確認してください。
- 公開したページを通常のブラウザウィンドウで開く。 ビルダーのエディターではありません。ご自身でページを読み込むことも、訪問としてカウントされます。
- 貼り付けたあとにサイトを公開する。 ほとんどのビルダーでは、貼り付けたコードは公開サイトにのみ表示され、下書きには表示されません。
- 適切な種類のブロックを使う。 コードは HTML、Embed code、Code Embed、Custom HTML のいずれかのブロックに入れる必要があります（上の表を参照）。プレーンテキストのブロックでは、コードが取り除かれます。ページのソースに、
<div id="clodix-articles">とそれに続くスクリプトがあるはずです。 - 訪問者が見るページであることを確認する。 メニューにあるブログページで、非表示でなく、パスワードで保護されていないものです。別のページに貼り付けた場合は、記事はそのページに表示されます。
- キャッシュを消去する。 キャッシュプラグイン、CDN、ホストのキャッシュによって、コードのない古いページが配信され続けることがあります。
- 正しいサイトであることを確認する。 アカウントに複数のサイトがある場合、それぞれに固有のコードがあります。使用しているドメインのサイトのコードを貼り付けてください。
それでも解決しない場合は、ページのアドレスとご利用のプラットフォームを添えてサポートに問い合わせるか、サイトを管理している担当者にコードを送ってください。
ビルダー自体のエディター内でウィジェットが空に見える
これは想定どおりの動作です。多くのサイトビルダー（Wix、GoDaddy、Squarespaceなど）は、編集中は貼り付けたコードをサンドボックス化したプレビュー内に表示するため、ウィジェットが内容を表示できないことがあります。記事を確認するには、ビルダーの編集画面ではなく 公開したサイト を開いてください。ウィジェットが実際に動作するのはそこです。
FAQ
SEOに有効ですか？
何もしないよりは良いものの、本物の投稿ほどの効果はありません。ウィジェットはページの読み込み後にJavaScriptで記事をページに追加するため、一部の検索エンジンや多くのリンクプレビューツールは、最初の読み込み時には空のページとして認識します。お使いのプラットフォームが直接公開に対応している場合（WordPress、Shopify、Wix、Ghost、HubSpot）は、そちらを使ってください。比較はウェブサイトを連携するをご覧ください。
ウィジェットのスタイルをサイトに合わせられますか？
ウィジェットはページのフォントを自動的に引き継ぎ、背景に合わせて読みやすい文字色を選びます（data-theme="light" ／ data-theme="dark" を自分で指定することもできます）。現時点では、それ以上の細かなスタイル設定はできません。
新しい記事が公開されるたびに、コードを貼り直す必要がありますか？
いいえ。スニペットは一度貼り付ければ十分です。新規記事や編集した記事は、数分以内に自動的に反映され、追加の操作は必要ありません。
小さなウィンドウ内でウィジェットがスクロールしますか？
いいえ。訪問者が記事を開くと、同じページ上で全文が表示されます。ブロックは記事に合わせて拡大するため、デスクトップでもスマートフォンでも、ウィジェット内にスクロールバーは表示されません。
自分ではコードを追加できません。
サイトを構築または管理している担当者にスニペットを転送してください。追加は一度だけで済みます。担当者がいない場合は、support@clodix.ai までご連絡のうえ、サイトで使っているビルダーをお知らせください。
ウィジェットを複数のページに追加できますか？
はい。同じスニペットを何ページにでも貼り付けられ、どのページでも同じ記事一覧が読み込まれます。