MENU
  1. ホーム
  2. ツール
  3. 天気予報サイト貼り付けツール｜HTMLでエリア天気予報を自動表示

天気予報サイト貼り付けツール｜HTMLでエリア天気予報を自動表示

天気予報埋め込みコード生成

または






最高気温
最低気温
温度（昼）
風速
風向き
降水確率
降水量
積雪量


プレビュー

PCプレビュー（幅1200px想定）
スマホプレビュー（最大300px）

貼り付けコード


            

              
            

          


                  

              

    


    
    
    

    

    
    

    

      

        
        

        
        

          
使い方（ステップ）

          
最短 3 分。地域・日数・表示項目・カラーを選び、生成→クリップボードにコピー→外部サイトへ貼り付け。


          

            

              
1地域を指定

              
「郵便番号」または「都道府県市町村名」を入力。内部で緯度経度に変換します。

            


            

              
2日数を選択

              
最大 7 日。必要な日数だけ表示させられます。

            


            

              
3表示項目を選ぶ

              
最高/最低気温、降水確率、降水量、風向・風速、積雪量（任意）など、チェックを入れたものだけが出力されます。

            


            

              
4カラーを決める

              
ベース色 → 濃淡の 2 段階で選択。プレビューのヘッダーに即時反映。（外部サイト用コードは 生成後に最新色へ更新されます）

            


            

              
5生成 → 貼り付け

              
生成を押すと「貼り付けコード」が作成されます。クリップボードにコピーし、貼り付け先の HTML / WordPress 投稿本文にそのまま貼ってください。

              
貼り付け先で <head> を触る必要はありません。必要な CSS/JS とフォントは自動で読み込みます。

            

          

        


        
        

          
埋め込みコードについて

          
生成されるコードは 1 ブロック完結。貼ったページのロード時に、あなたのサイトの API エンドポイントへアクセスして最新の天気を取得します。


          
    
            
  • データ取得先：/wp-json/tenki/v1/onecall（自サイト内 REST API）
    • 
            
  • 自動更新：キャッシュが切れたタイミングで毎回最新データに（標準 30 分キャッシュ）
    • 
            
  • 貼り付け先：WordPress、静的 HTML、CMS 全般に対応（iframe 不要）
    • 
            
  • 文字化け対策：インライン <meta charset="UTF-8"> と Blob 埋め込みを採用済み
    • 
          


          

            
            <link rel="stylesheet" href="...weather-icons.css">
            <link rel="stylesheet" href="(あなたのサイト)/assets/css/page-common.css?...">
            <style>/* ヘッダーの色を反映 */ ... </style>
            <script>/* オプション・測位・API ベース URL を定義 */ ...</script>
            <script src="(あなたのサイト)/assets/js/page-common.js?..."></script>
            <div class="w_bg"><div id="weather-wrapper" data-weather-root></div></div>
          

          
実際のコードはジェネレーター下部の「貼り付けコード」に出力されます。

        


        
        

          
動作環境

          
    
            
  • ブラウザ：Chrome / Edge / Firefox / Safari（iOS 15+）いずれも最新版推奨
    • 
            
  • JavaScript：有効であること（無効時は表示されません）
    • 
            
  • ネットワーク：貼り付け先からあなたのサイトの REST API に HTTPS アクセスできること
    • 
            
  • セキュリティ：ブラウザの「トラッキング防止」などで外部フォント/アイコン読み込みがブロックされると見た目が崩れる場合があります
    • 
            
  • レイアウト：スマホ幅ではウィジェットは基本 100% 幅。貼り付け先で左右に余白を付けたい場合は親要素に padding を与えてください
    • 
          

        


        
        

          
利用規約


          
    
            
  • 本ウィジェットは「現状有姿」で提供されます。正確性・最新性を保証しません。
    • 
            
  • 天候情報を用いた判断・損害等について、提供者は一切の責任を負いません。
    • 
            
  • コードの再配布は可。ただし出力先での改変による不具合はサポート対象外となります。
    • 
            
  • API の利用制限・仕様変更により予告なくサービスが停止・変更される場合があります。
    • 
          

        


        
        

          
よくある質問

          

            
色が反映されません

            
色を変えた直後はプレビューのみ更新されます。外部貼り付け用コードにも反映するには一度生成を押してコードを更新してください。


            
スマホで左右に余白（白）が見えます

            
貼り付け先の親コンテナに固定幅や左右パディングが設定されている可能性があります。基本はウィジェットが幅 100% で広がります。親側の max-width/padding を調整してください。


            
自動更新のタイミングは？

            
貼り付けページの表示時に自サイトのエンドポイントへアクセス。標準は 30 分キャッシュで、以降は最新データを取得します。


            
WordPress 以外に貼れますか？

            
はい。HTML 直書きサイトや他 CMS にも貼れます。<head> 変更は不要です。


            
その他のお問い合わせ

            

              お問い合わせフォームよりご連絡ください。

              お問い合わせはこちら