手取り計算ウィジェットをあなたのサイトに設置

くらしの計算機の手取り計算ウィジェットを、ブログやWebサイトに無料で埋め込めます。
コピペだけで設置完了。読者に便利な手取り計算ツールを提供できます。

ウィジェットの特長

軽量・高速

10KB以下の軽量スクリプト。サイトの表示速度に影響しません。

レスポンシブ対応

スマートフォンからPCまで、あらゆる画面幅に自動対応。

ダークモード対応

OSのダークモード設定に自動対応。どんなサイトにもマッチ。

カスタマイズ可能

アクセントカラーや幅を自由に変更。サイトデザインに合わせられます。

プライバシー安全

計算はすべてブラウザ上で実行。データは外部送信されません。

2026年税制対応

基礎控除引き上げなど、最新の税制改正に対応済み。

プレビュー

実際のウィジェットの動作を確認できます。年収を入力して「計算」をクリックしてください。

設置方法

たった2行のHTMLをコピーして貼り付けるだけで設置完了です。

  1. 埋め込みコードをコピー
    下のコードをコピーしてください。
  2. HTMLに貼り付け
    ウィジェットを表示したい位置にコードを貼り付けます。WordPressの場合は「カスタムHTML」ブロック、はてなブログの場合は「HTML編集」モードで貼り付けてください。
  3. 完了！
    ページを更新するとウィジェットが表示されます。

基本の埋め込みコード

<div id="calclife-widget"></div> <script src="https://calclife.net/js/embed-widget.js"></script>

カスタマイズ

data属性を使って、ウィジェットの見た目をカスタマイズできます。

#1E3A8A

カスタマイズ済みコード

<div id="calclife-widget" data-accent="#1E3A8A" data-width="460px"></div> <script src="https://calclife.net/js/embed-widget.js"></script>

カスタマイズ属性一覧

属性 説明 初期値
data-accent メインカラー（ヘッダー・ボタン・強調色） #1E3A8A
data-width ウィジェットの最大幅 460px
data-bg 背景色（未指定時は自動） （自動）
data-text テキスト色（未指定時は自動） （自動）

バッジ・バナー

くらしの計算機を紹介いただける場合は、以下のバッジ・バナーをご利用ください。

Powered by バッジ（88x31風）

Powered by くらしの計算機
<a href="https://calclife.net/" target="_blank" rel="noopener"><img src="https://calclife.net/img/badge-calclife.svg" alt="Powered by くらしの計算機" width="176" height="31"></a>

手取り計算バナー（300x60）

年収の手取りを計算する - くらしの計算機
<a href="https://calclife.net/tedori/" target="_blank" rel="noopener"><img src="https://calclife.net/img/banner-tedori.svg" alt="年収の手取りを計算する - くらしの計算機" width="300" height="60"></a>

2026年税制改正対応バッジ

2026年税制改正対応 - くらしの計算機
<a href="https://calclife.net/" target="_blank" rel="noopener"><img src="https://calclife.net/img/badge-2026.svg" alt="2026年税制改正対応 - くらしの計算機" width="160" height="28"></a>

ブログ・サイト運営者の方へ

くらしの計算機の手取り計算ウィジェットを設置いただくことで、以下のメリットがあります。

  • 読者に便利なツールを提供 - 給与・年収に関する記事に手取り計算機能を追加することで、読者の利便性が大幅に向上します。
  • 記事の滞在時間アップ - インタラクティブなツールにより、読者のページ滞在時間が向上します。
  • 設置・運用コストゼロ - コピペだけで設置完了。税制改正時のメンテナンスも不要です（スクリプトは自動更新されます）。
  • サイト速度に影響なし - 10KB以下の軽量スクリプト。Lazy loading対応で、Core Web Vitalsへの影響を最小限に抑えています。

特に、以下のような記事への設置がおすすめです。

  • 年収・給与に関する記事（「年収500万円の手取りは？」など）
  • 転職・就職に関する記事（「この年収で生活できる？」の参考に）
  • 税金・社会保険に関する解説記事
  • ファイナンシャルプランニング関連の記事

利用規約

ご利用にあたっての注意事項

  • クレジットリンクの維持 - ウィジェット下部の「Powered by くらしの計算機」のリンクは削除・非表示にしないでください。これはご利用の必須条件です。
  • 改変の禁止 - スクリプトファイル自体の改変・再配布は禁止します。data属性によるカスタマイズは自由です。
  • 商用利用可 - 商用サイト・アフィリエイトサイトへの設置も可能です。
  • 免責事項 - ウィジェットの計算結果は概算・目安であり、実際の金額とは異なる場合があります。独身・扶養なし・東京都の協会けんぽ基準で計算しています。

その他の利用条件については利用規約をご確認ください。 ご不明点はお問い合わせよりご連絡ください。

よくある質問

WordPressに設置できますか？
はい。「カスタムHTML」ブロックに埋め込みコードを貼り付けるだけで設置できます。ウィジェットエリアに設置する場合は「カスタムHTML」ウィジェットをご利用ください。
はてなブログに設置できますか？
はい。記事編集画面の「HTML編集」モードで埋め込みコードを貼り付けてください。サイドバーに設置する場合は、デザイン設定のサイドバー「HTML」モジュールをご利用ください。
noteに設置できますか？
申し訳ありません。noteは外部JavaScriptの埋め込みに対応していないため、ウィジェットの設置はできません。代わりに、バッジ画像でのリンクをご利用ください。
税制が改正されたらウィジェットも更新されますか？
はい。ウィジェットのスクリプトはcalclife.netから読み込まれるため、税制改正時は自動的に最新のデータで計算されます。設置先のコード変更は不要です。
サイトの表示速度に影響はありますか？
ほぼ影響ありません。スクリプトは10KB以下の軽量ファイルで、外部ライブラリへの依存もありません。iframeではなくDOM直接挿入のため、追加のHTTPリクエストも最小限です。