大さじ グラム換算
料理ブログ向け無料ウィジェット

料理ブログに大さじ・グラム換算ウィジェットを埋め込む

読者がレシピ記事を読みながら、大さじ・小さじとグラムをリアルタイムに換算できます。WordPress、はてなブログ、Squarespace対応。

埋め込みHTMLコードを取得

以下のHTMLコードをレシピ記事のHTMLブロックに貼り付けてください：

<iframe
  src="https://tbsptograms.com/embed?lang=ja"
  width="100%"
  height="315"
  style="width:100%;max-width:370px;height:315px;border:1px solid #e5e7eb;border-radius:16px;overflow:hidden;background:transparent;"
  title="TBSP to Grams Converter Widget"
  loading="lazy">
</iframe>
<p style="font-size:11px;color:#6b7280;margin-top:6px;font-family:sans-serif;">
  Powered by <a href="https://tbsptograms.com/ja/" target="_blank" rel="noopener" style="color:#65a30d;text-decoration:underline;">大さじ グラム換算</a>
</p>
HTML5 iframe · 0 scriptsOpen in new tab ↗

料理ブロガーに選ばれる理由：

  • 超軽量（10KB未満）で表示が高速
  • 外部トラッカーなしでプライバシー安心
  • 製菓・料理の28材料に対応
  • 分量の計量ミスを防止
  • 大さじ⇄グラムの双方向換算
  • スマホ・タブレット完全対応
yourfoodblog.com/recipe
インタラクティブ
ウィジェットプレビュー

ブログ記事やサイドバーに以下のように表示されます：

各ブログサービスへの設置手順

W

WordPress（Gutenberg）

  1. 記事編集画面で「+」をクリックしてブロックを追加します。
  2. 「カスタムHTML」ブロックを検索して選択します。
  3. コピーしたコードを貼り付けてプレビューを確認します。
S

Squarespace / はてなブログ

  1. レシピ記事の編集画面を開きます。
  2. 「HTML/コード」ブロックを追加します。
  3. コードを貼り付けて保存します。
</>

Webflow / その他CMS

  1. 記事内にEmbed（埋め込み）ブロックを挿入します。
  2. コードスニペットを貼り付けます。
  3. 公開すると読者がいつでも計量換算できます。