ハリテン|天気予報をサイトに埋め込み表示!html貼り付けで簡単設置



天気予報埋め込みツール「ハリテン」とは

ハリテンは、日本国内の天気予報を、サイト内に埋め込み表示するブログパーツです。htmlコードを貼り付けるだけで表示できるので、誰でも簡単に設置できます。

静的サイトにも、WordPress等の動的サイトにも対応しています。プラグインのインストール等も不要です。

※当ツールはリリースして間もないため、予期せぬ不具合が出る可能性があります。うまく表示されないなどありましたら、当ページのコメント欄にご連絡ください。

※当ツールのご利用により、利用者または第三者に生じた損害や不利益、トラブルについて、当社はその一切の責任を負いません。利用の際は自己責任でお願いします。

天気予報埋め込みツール「ハリテン」の使い方

地域を選択する

天気予報を表示したい地域の郵便番号を入力して「反映」ボタンを押してください。
例:451-0045(ハイフンはあってもなくても良いです)。

表示日数を選択する

表示したい日数を選択してください。1~7日まで選択できます。

表示項目を選択する

表示したい項目を選んでください。チェックを入れると表示、外すと非表示になります。選べる項目は以下7つです。

  • 天気予報
  • 気温
  • 風速
  • 最低
  • 最高気温
  • 降水確率
  • 積雪量
色を選択する

ツールのメインカラーを選びます。色の傾向を選び、詳細の色を選んで「反映」ボタンを押してください。

カラーコード(#000000など)でも指定できます。参考:HTMLカラーコード

コードを取得する

「コードを取得」ボタンを押すと、htmlコードが発行されます。これをコピーしてサイトにそのまま貼り付けてください。

天気予報埋め込みツール「ハリテン」の動作環境

天気予報ツールが動作する環境の対応状況です。当社で確認できたものを掲載しています。もし「動作しない」「表示されない」などありましたら、コメント欄にご連絡ください。順次対応いたします。

表示デバイス

◯PC
◯タブレット
◯スマホ

表示対応ブラウザ

◯IE11
◯Edge
◯Chrome
◯Firefox

HP作成ツール

◯WordPress
◯HTMLで作られた静的ページ
◯Jimdo(設定方法

WordPressテーマ

◯Cocoon
◯Swell
◯SANGO
◯Emanon
◯Luxeritas
△LIONMEDIA(サイドバーやスマホでアイコンが潰れて表示)
✕STORK(表示されない)

天気予報埋め込みツール「ハリテン」のデータ取得元

当サイトの天気予報ツールは「気象庁の公開データ」と「Open Weather社のAPI」を使用しています。最大1週間の気象予報データが、リアルタイムで自動的に更新されるようになっています。

天気予報埋め込みツール「ハリテン」利用上のご注意・免責事項

  1. 当ツールは、商用・非商用を問わず無料でご利用いただけます。「気象庁」と「Open Weather」の規約に則ってご利用ください。
  2. 当ツール内に記載されている「制作:株式会社サイトクリエーション」の文字は削除せずにご利用ください。
  3. 当ツールで提供する情報については、当社がその内容を保証するものではありません。
  4. 当ツールのご利用により、利用者または第三者に生じた損害や不利益、トラブルについて、当社はその一切の責任を負いません。利用の際は自己責任でお願いします。
  5. 当ツールは、予告なしに変更や削除を行う場合があります。これらの変更や削除によって生じるいかなる損害や不利益についても、当社は一切責任を負いません。あらかじめご了承ください。
  6. 当ツールのSNSやブログでの紹介はご自由にどうぞ

62 COMMENTS

株式会社サイトクリエーションサポート

不具合のご連絡、ご要望・ご質問などありましたら、お気軽にコメントください。

返信する
田中

こんにちは。

取得したコードをwordpressに貼って公開しましたが、天気予報のデータが全く反映されていなかったです。
ご対応のほどよろしくお願いいたします。

<動作環境>
WordPressバージョン:5.8.2
PHPバージョン:7.4.16
ブラウザ:Chrome
テーマ:Cocoon

返信する
株式会社サイトクリエーションサポート

ご報告ありがとうございます。

コードを貼り付けても、サイト上に何も表示されない状況でしょうか。
それとも、枠等は表示されて、天気予報だけが反映されませんか?

当社でも、同じWordPressバージョン、ブラウザとテーマで実装したところ表示がされました。
もしかすると、貼り付け方が原因かもしれません。
「カスタムHTML」というブロックを挿入し、そこにコードを貼り付けていただけますか。

返信する
匿名

7日間分の天気予報は表示されますが、気温、降水量、降水確率が表示されませんでした。

JIMDO クリエイター 無料
ブラウザ:MIcrosoft Edge

返信する
株式会社サイトクリエーションサポート

ご連絡ありがとうございます。
当社で確認したところ、たしかに天気予報アイコンしか表示されませんでした。
ご不便おかけし恐縮です。こちら表示対応を進めてまいります。
貴重なご意見ありがとうございました。

返信する
株式会社サイトクリエーションサポート

Jimdoに表示する方法が見つかりましたので、設定方法を紹介します。
以下のページを参考に設定してみてください。
https://sitecreation.co.jp/tenkiyohou-jimdo/

Jimdoでは、外部ツールの機能を一部制限しています(javascriptをパーツに入力することの禁止)。
そのため、少し特殊な設定が必要です。簡単にできますのでお試しください。

返信する
崎山勝功

ご多忙中恐れ入ります。
取得したコードをwordpressに貼ってみたのですが、PC表示だとお天気アイコンが一部つぶれて表示されました。
ご確認をお願いいたします。

<動作環境>
WordPressバージョン:5.8.3
ブラウザ:Chrome
テーマ:LIONMEDIA

返信する
株式会社サイトクリエーションサポート

ご連絡ありがとうございます。

PC表示でアイコンが一部つぶれるとのことですね。

症状を詳しく確認したいので、よろしければ以下のメールに、画面のスクショなど撮って送っていただけないでしょうか。
info@sitecreation.co.jp

原因特定と対応に取り組みたいと思います。
よろしくお願いいたします。

返信する
匿名

長崎県の郵便番号を入力し反映するとポップアップが表示され、
『sitecreation.co.jpの内容 失敗』と表示されます。
いくつかの長崎県内の郵便番号を試してみましたが、すべて上記のポップアップが表示されました。
ご確認をお願いいたします。

返信する
株式会社サイトクリエーションサポート

ご連絡ありがとうございます。
長崎の郵便番号でエラー表示が出る件、承知しました。

弊社でも試したところ、たしかにエラー表示が出ました。
こちら原因の特定と対処を進めてまいります。
ご不便おかけして恐縮です。

北海道の表示でもエラーが出るようでしたので、そちらも修正予定です。
※その他の都道府県では動作しました。

返信する
株式会社サイトクリエーションサポート

長崎県の反映の不具合を修正いたしました。
ご不便おかけしすみませんでした。
よろしければご利用くださいますと幸いです。

※北海道のエラーについても対応しました。
その他、都道府県も表示されること確認済みです。

返信する
匿名

2022年2月2日 at 2:10 PMにお問い合わせした者です。
エラー表示が出なくなったことを確認いたしました。
本件、ご対応いただき誠にありがとうございました。

返信する
佐藤正俊

sirius(ホームページ作成ツール)でタグを貼り付けたのですが、全く表示しません。ご教授下さい。

返信する
株式会社サイトクリエーションサポート

ご連絡ありがとうございます。
シリウスで表示されないとのこと、承知しました。
ご不便おかけして恐縮です。

症状の確認と、必要に応じた修正を進めてまいります。
対応完了しましたら、当ページで告知いたします。

返信する
テスト太郎

便利なツールを開発してくださり、ありがとうございます。

WPの自作子テーマにて利用させていただいているのですが、
サイト読み込みの際に『ドメイン名 の内容:失敗』とアラートが出たり、
お天気が表示されないときがあります。(滋賀県を設定しています。)

私のPCではそのような現象は見られないのですが、
一部のデバイス(PC・スマホ)で頻繁に起きているようで、
何が原因なのか、なぜ一部にだけ起きているのか見当がつかない状態です…

ご確認いただけますと幸いです。

返信する
株式会社サイトクリエーションサポート

ご連絡ありがとうございます。
ご不便おかけし恐縮です。

「訪問者のデバイスや閲覧環境によって、エラーアラートが出たり、天気が表示されない」とのことですね。

どのような閲覧環境で上記障害が発生するか、分かりますでしょうか。
症状を確認し、調査したいと思います。

また、可能でしたら、以下のメールにエラーが発生するページのURLをお送りください。
より詳細な調査ができるかと思います。
info@sitecreation.co.jp

返信する
匿名

これいいですね! 全体的に表示を大きくしたいのですが
スタイルシートの方ではどこをいじればいいのでしょうか

返信する
株式会社サイトクリエーションサポート

お褒めの言葉ありがとうございます!

文字サイズや、枠内の余白等は、
ご利用のスタイルシート上でクラスを指定して追記すれば変更可能です。

枠自体のサイズは、変更を想定しておらず、大きくすることは難しいです。
貼り付け場所によって、自動的に最大幅にサイズが調整されるような設定になっております。

コーディングに詳しい方でしたら変更可能かもしれませんので、
恐れ入りますが、最寄りの技術者の方にご相談ください。

返信する
匿名

便利なツールを作っていただき、ありがとうございます。
ところで、コードをコピーした際に
末尾の

の部分で
がで閉じていなかったのですが、これは閉じないほうがいいのでしょうか?
張り付けた際に、表示が崩れちゃったので、ちょっとご確認です。

返信する
匿名

コードが映らなかったので、再度記載します。
divタグのidがweather-wrapperの部分が閉じてなかったということです。

返信する
匿名

もう1点質問です。
別々の場所の天気を同じページ内で別々の枠で表示したいのですが、1つしか表示されません。
何か対策方法などございましたら、ご教授いただければ幸いです。

返信する
株式会社サイトクリエーションサポート

ご連絡ありがとうございます。
表示が崩れてしまったとのことですね。

実際の表示を確認したいので、よろしければ以下のメールに、サイトURLや画面のスクショなど撮って送っていただけないでしょうか。
info@sitecreation.co.jp

お手数ですがよろしくお願いいたします。

返信する
匿名

非表示用の専用コード(有料:税込15,000円)の料金についてのご確認ですが、
こちらは初期のみのお支払いでしょうか?

返信する
株式会社サイトクリエーションサポート

はい、初期のみのお支払いとなります。
その後発行したコードにも使用いただけます。
ただし、第三者にコードを公開するなどは禁止させていただいております。

返信する
匿名

こんにちは。
それぞれ違う地点の天気予報を二つ以上貼ると、いずれか一つしか表示されません。
よろしくお願いします。

返信する
株式会社サイトクリエーションサポート

ご連絡ありがとうございます。
現在の仕様では、1ページに1箇所のみ表示対応しております。
ご不便おかけし恐れ入ります。同ページ内に複数の表示に対応できるよう、今後の対応を検討いたします。

返信する
匿名

初めまして。
地域も細かく取得できるので、このサービスを見つけて嬉しく思います。

デザイン変更について質問です。
免責事項に記載はされていませんでしたが、CSSを全て変更するのは可能でしょうか。

デザインCSSは『~emanon-premium-child/tpl/style.css』だと思うのですが、貼り付けコードからこのリンクコードのみ削除し、中身を自身のCSSに移して変更したいと思っています。

例えばタイトルに『●●の天気予報』とし、w_bgのクラスを『width:0; overflow:hidden;』などにし、本日の予報部分を大きくする等です。
後は背景色やボーダーを変更する程度です。

以上、よろしくお願いいたします。

返信する
匿名

上記質問者です。

直接貼り付けコード内にCSSを追加する事で解決しそうですが、デザイン変更は可能でしょうか。
よろしくお願いいたします。

返信する
株式会社サイトクリエーションサポート

お世話になります。
ご利用を検討いただきありがとうございます。

CSSの変更は可能です。貴サイトのCSSに合わせて変更ください。
ただ、当ページの注意点にあるように「制作:株式会社サイトクリエーション」の文字とリンクは削除せずにご利用ください。

また、当ツールの仕様や利用規約は、予告なく変更になる可能性があるため、CSSの変更に制限をかけさせていただくこともありますのでご容赦願います。

常識的な範囲内でのデザイン変更は問題ございません。現在ご利用者の方も、サイトデザインに合わせて調整されている方もございます。

返信する
匿名

返信ありがとうございます。

制作の文字は削除いたしません。
変更になった際は、その都度こちらで対応いたします。
ご了承いただき、ありがとうございます。
是非とも活用させて頂きます。

返信する
中西

御社の魅力的な天気予報ガジェットを拝見しました.
HTMLを取得して,常用・愛用するサイト「ighome」に貼り付けようとしましたが表示に至りません.
お忙しい中恐縮ですが,解決方法をご教示いただければ有り難く思います.
よろしくお願い致します.

返信する
サイトクリエーション編集部

ご連絡ありがとうございます。

「ighome」での利用につきまして。
恐れ入りますが、こちらは動作対象外となります。

ハリテンは、ホームページでの利用を想定して作成しておりましたので、
一部のサービスではうまく動作しない場合がございます。
ご不便おかけして恐縮です。

今後、ご要望が多くなりましたら、対応を検討したいと思います。

返信する
サイトクリエーション編集部

アイコンリンクのURLについて、ご報告ありがとうございます。
確認いたしました。たしかにhttp://になっていました。

こちら、対処可能か担当部署に確認いたします。
対応完了しましたら、サイト上でお知らせいたします。

返信する
えむ・おー

市町村ベースではなく、近畿とか中部とかのエリアの表示はできませんか?

返信する
まつ

山形県西村山郡朝日町の郵便番号を入力し反映するとポップアップが表示され、
『sitecreation.co.jpの内容 失敗』と表示されます。
対応をお願いします。

返信する
サイトクリエーション編集部

ご報告ありがとうございます。

当社で当該地域の郵便番号を入力したところ、正常にコードが出力されました。
お手数ですが、エラーが表示された郵便番号をお教えいただけますでしょうか。

※入力した住所は「990-1442」です。

返信する
IKB

こちらのツールをワードプレスのウィジェットに設置しようとしておりますが上段のタイトルと本日の天気の部分が型崩れしてしまいます
どこが調整すれば表示できるなどございますでしょうか

返信する
サイトクリエーション編集部

当ツールをご利用いただきありがとうございます。
ウィジェットに設置したら崩れてしまうとのことですね。

WordPressでご利用中のテーマ(テンプレート)を教えていただけますでしょうか。
テーマによって調整方法が異なったり、対応していない場合もございますので、詳細を伺いたいです。

返信する
KTM

便利なツールを開発していただきありがとうございます。

上でも上がっている同一ページに表示する方法ですが、当方初心者ながらなんとか2つ表示するに至りましたが、どうしてもクラスの .w_cityに同じ値が入ってしまいます。
例えば、先にA市のコードを貼り、後に改造したB市のコードを貼ると、気温データなどはしっかりそれぞれ表示されますが、市町村の部分は両方ともB市が入ります。

.w_cityにA市、B市がそれぞれ表示される方法を教示頂けませんでしょうか。

返信する
サイトクリエーション編集部

ハリテンのご利用ありがとうございます。
お問い合わせいただきました、2つ表示させる方法につきまして。

誠に申し訳ございませんが、現状のハリテンのシステムは
同一ページでの2つ以上の表示を前提として設計されておりません。

そのため、弊社からの具体的な対応策や解決策をお伝えすることが難しい状況でございます。
お客様が望まれる機能については、ITの専門家にご相談いただくことをお勧めいたします。

大変お手数をおかけしますが、何卒ご理解賜りますよう、お願い申し上げます。

返信する
サイトクリエーション編集部

ご指摘ありがとうございます。
当ツールのマークは、データ元(https://openweathermap.org/)のアイコンを出力しているため、当方では変更ができかねております。

CSSの上書き表示などで、マークを変更できる可能性もありますので、
システムの専門家の方にご相談ください。

返信する
サイトクリエーション編集部

ご報告ありがとうございます。

当社で当該地域の郵便番号を入力したところ、正常にコードが出力されました。
お手数ですが、エラーが表示された郵便番号をお教えいただけますでしょうか。

※入力した住所は「730-0000」です。

返信する
サイトクリエーション編集部

ご報告ありがとうございます。

コードが取得できないとのことですね。
入力した郵便番号や、ご利用中のブラウザなど教えていただけますでしょうか。
利用環境によって、取得できない原因が変わりますので、詳細を伺いたく思います。

返信する
CSC

サイト等で利用させて頂いております。
PC Edgeで表示しております。
連休前までは、入力地域の天気情報が出ていたのですが、本日になってから一部郵便番号の天気情報が取得出来ずに、反映されていない状態となっている模様です。

例:〒683-0805 鳥取県 たとえばこちら等を入力して反映を押してもプレビューが出てきません。
〒110-0005 東京都台東区 等の郵便番号では 反映が行われております。

以上です、よろしくお願いします。

返信する
サイトクリエーション編集部

詳細なご報告ありがとうございます。

当社で「683-0805」で出力したところ、現在は正常にコード表示されました。
利用が集中していたため、一時的に、取得にエラーが生じていたかもしれません。

お手数ですが、再度取得を試してみただけますでしょうか。

返信する
匿名

PC版を記事の途中に張り付けると、張り付けた以降の記事の幅がこちらの天気予報のサイズに変わってしまいサイトが崩れてしまいます。
サイズをカスタマイズするなど対応方法はありますか。(初心者です)

返信する
サイトクリエーション編集部

当ツールをご利用いただきありがとうございます。
記事の途中にコードを貼り付けたら、それ以降の表示が崩れたとのことですね。

お手数ですが、WordPressでご利用中のテーマ(テンプレート)を教えていただけますでしょうか。
テーマによって調整方法が異なったり、対応していない場合もございますので、詳細を伺いたいです。

返信する
AN

「このページの内容 失敗」とアラートが表示され、エリアによって天気予報が出ないという現象が起きています。(正常に表示されるエリアもあります)
栃木県那須郡〜〜〜〜 → アラート表示

改善可能でしょうか?

返信する
サイトクリエーション編集部

ご報告ありがとうございます。

コードが取得できないとのことですね。
お手数ですが、取得に失敗した郵便番号や、ご利用中のブラウザなど教えていただけますでしょうか。
原因特定のため、詳細を伺いたく思います。

返信する
えむ・おー

サイトで利用させて頂いております。
自サイトに合わせて、背景のグラデーションの方向とフォントの変更をしたいのですが可能でしょうか?グラデーションの方向に関しては、to right の部分を書き換えてみましたが反映されません。

返信する
えむ・おー

ずっとサイト等で利用させて頂いております。
自サイトに合わせてグラデーションの方向やフォントの種類を変更したいです。グラデーションに関しては、スタイルシートの to right のところを書き換えてみましたが反映されないようです。
よろしくお願いいたします。

返信する
匿名

お世話になっております。
神奈川県横浜市鶴見区「230-0001」の天気予報を取得したいのですが、
sitecreation.co.jp 失敗と表示が出てコードが取得出来ません。
神奈川県の他の地区、「220-0001」や「240-0001」は問題ありませんでした。
ご対応していただけると助かります。

返信する
匿名

今まで長野県上伊那郡駒ケ根市「399-4117」の天気を見れていたのに使えなくなりました
コードの習得をし直そうとしたところ sitecreation.co.jp 失敗と出てしまい習得することができません
周りの地域の郵便番号では問題なく習得出来ました

返信する

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です