ホームページに貼れる無料の天気予報ウィジェット
地点を選び、レイアウトと色を決めたら、1行のコードをコピーするだけ。現在の天気と予報を表示し、自動で更新されます。WordPress、Wix、Shopify、HTMLなど、どんなサイトでも使えます。
<div class="aos-weather" data-place="1850147" data-lang="ja" data-label="東京都の天気" style="max-width:420px"></div>
<script async src="https://atlasofseasons.com/widget.js"></script>遅延読み込みで、高さも自動で調整されます。ウィジェットが複数あっても、scriptタグは1ページに1回だけ追加してください。
<iframe src="https://atlasofseasons.com/widget/v1/1850147?lang=ja" title="東京都の天気" width="100%" height="399" style="border:0;display:block;max-width:420px;" loading="lazy"></iframe>スクリプトが使えない環境でも動作します。高さは固定のため、あとで設定を変えた場合は調整してください。
サイトへの設置方法
WordPress
- ページを編集するか、「外観」→「ウィジェット」を開きます。
- 「カスタムHTML」ブロックを追加します。
- コードを貼り付けて「更新」をクリックします。
Wix
- エディタで「追加」→「埋め込みコード」→「HTML埋め込み」をクリックします。
- 「コード」を選び、コードを貼り付けて「更新」をクリックします。
- 枠のサイズを調整して公開します。
Shopify
- 「オンラインストア」→「テーマ」→「カスタマイズ」を開きます。
- ウィジェットを表示したい場所に「カスタムLiquid」セクションを追加します。
- コードを貼り付けて保存します。
HTML
- ページのHTMLファイルを開きます。
- ウィジェットを表示したい位置（<body>内）にコードを貼り付けます。
- ファイルを保存してアップロードします。
このウィジェットはサーバー側で生成される軽量なカードで、一瞬で表示されます。Webフォント、トラッキングスクリプト、Cookie、広告は一切ありません。アイコンはインラインSVGで、予報は15分ごとに更新されるため、ページは軽いまま、訪問者はいつでも最新の天気を確認できます。
個人サイトでも商用サイトでも無料でご利用いただけます。条件はひとつだけ、ウィジェット下部の小さなリンク「天気 · Atlas of Seasons」を表示したままにしてください。
この天気予報ウィジェットが選ばれる理由
6種類のレイアウト
1行のライン、コンパクトなバッジ、予報カード、横長の7日間バー、時間ごとの予報、フル表示から選べます。
サイトのデザインに合わせて
ライト・ダーク・自動・半透明のガラス風テーマに加え、色、角の丸み、枠線、影、フォントも自由に設定できます。
世界中のあらゆる地点
20万以上の都市・町・リゾート地に対応。現地時刻、°C／°F、4種類の風速単位で表示できます。
12言語に対応
英語、トルコ語、ドイツ語、スペイン語、ポルトガル語、フランス語、イタリア語、ポーランド語、オランダ語、ロシア語、日本語、アラビア語（右から左）。
高速でプライバシーに配慮
軽量なHTMLと遅延読み込み。ウィジェット内ではCookie、アクセス解析、外部へのリクエストを一切使いません。
レスポンシブ対応
サイドバーや本文カラム、スマートフォンに合わせて幅が変わり、高さはスクリプトが自動で調整します。
天気予報ウィジェットに関するよくある質問
天気予報ウィジェットは本当に無料ですか？
はい。個人・商用を問わず、いくつのサイトでも無料でご利用いただけます。アカウント登録やAPIキーも不要です。小さなクレジット表記のリンクは表示したままにしてください。
ホームページに天気予報ウィジェットを設置するには？
上で地点とデザインを選び、コードをコピーして、ウィジェットを表示したい場所に貼り付けます。WordPressでは「カスタムHTML」ブロック、Wixでは「HTML埋め込み」、Shopifyでは「カスタムLiquid」セクションを使います。
予報はどのくらいの頻度で更新されますか？
現在の天気と予報は、世界の気象モデルをもとに約15分ごとに更新されます。コードを変更する必要はなく、常に最新のデータが表示されます。
ウィジェットでサイトが重くなりませんか？
いいえ。スクリプトは3KB未満で非同期に読み込まれ、画面内にスクロールされたときにだけウィジェットを生成します。ウィジェット本体も数KBのHTMLで、フォント・画像・トラッカーは含みません。
Cookieの使用や訪問者の追跡はありますか？
ありません。Cookie、ローカルストレージ、アクセス解析を使用しないため、Cookieバナーに記載する必要もありません。
1つのページに複数の地点を表示できますか？
はい。地点ごとにコードを追加してください。スクリプト版の場合、scriptタグは1ページに1回だけで大丈夫です。