天気予報埋め込みツール「ハリテン」とは
ハリテンは、日本国内の天気予報を、サイト内に埋め込み表示するブログパーツです。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週間の気象予報データが、リアルタイムで自動的に更新されるようになっています。
天気予報埋め込みツール「ハリテン」利用上のご注意・免責事項
- 当ツールは、商用・非商用を問わず無料でご利用いただけます。「気象庁」と「Open Weather」の規約に則ってご利用ください。
- 当ツール内に記載されている「制作：株式会社サイトクリエーション」の文字は削除せずにご利用ください。
- 当ツールで提供する情報については、当社がその内容を保証するものではありません。
- 当ツールのご利用により、利用者または第三者に生じた損害や不利益、トラブルについて、当社はその一切の責任を負いません。利用の際は自己責任でお願いします。
- 当ツールは、予告なしに変更や削除を行う場合があります。これらの変更や削除によって生じるいかなる損害や不利益についても、当社は一切責任を負いません。あらかじめご了承ください。
- 当ツールのSNSやブログでの紹介はご自由にどうぞ
不具合のご連絡、ご要望・ご質問などありましたら、お気軽にコメントください。
こんにちは。
取得したコードを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の部分が閉じてなかったということです。
もう１点質問です。
別々の場所の天気を同じページ内で別々の枠で表示したいのですが、１つしか表示されません。
何か対策方法などございましたら、ご教授いただければ幸いです。
ご連絡ありがとうございます。
表示が崩れてしまったとのことですね。
実際の表示を確認したいので、よろしければ以下のメールに、サイト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」での利用につきまして。
恐れ入りますが、こちらは動作対象外となります。
ハリテンは、ホームページでの利用を想定して作成しておりましたので、
一部のサービスではうまく動作しない場合がございます。
ご不便おかけして恐縮です。
今後、ご要望が多くなりましたら、対応を検討したいと思います。
ただいま実装を検討しておりますが、次の日以降のアイコンリンクがhttp://になっており、ブラウザの安全性情報がエラーになっています。
https://に対応可能ですか？
アイコンリンクのURLについて、ご報告ありがとうございます。
確認いたしました。たしかにhttp://になっていました。
こちら、対処可能か担当部署に確認いたします。
対応完了しましたら、サイト上でお知らせいたします。
上記の件、今後対策の予定はございますでしょうか。
市町村ベースではなく、近畿とか中部とかのエリアの表示はできませんか？
ご連絡ありがとうございます。
恐れ入りますが、エリアで指定しての表示には対応しておりません。
今後、ご要望が多くなりましたら、対応を検討したいと思います。
山形県西村山郡朝日町の郵便番号を入力し反映するとポップアップが表示され、
『sitecreation.co.jpの内容 失敗』と表示されます。
対応をお願いします。
ご報告ありがとうございます。
当社で当該地域の郵便番号を入力したところ、正常にコードが出力されました。
お手数ですが、エラーが表示された郵便番号をお教えいただけますでしょうか。
※入力した住所は「990-1442」です。
こちらのツールをワードプレスのウィジェットに設置しようとしておりますが上段のタイトルと本日の天気の部分が型崩れしてしまいます
どこが調整すれば表示できるなどございますでしょうか
当ツールをご利用いただきありがとうございます。
ウィジェットに設置したら崩れてしまうとのことですね。
WordPressでご利用中のテーマ（テンプレート）を教えていただけますでしょうか。
テーマによって調整方法が異なったり、対応していない場合もございますので、詳細を伺いたいです。
便利なツールを開発していただきありがとうございます。
上でも上がっている同一ページに表示する方法ですが、当方初心者ながらなんとか2つ表示するに至りましたが、どうしてもクラスの .w_cityに同じ値が入ってしまいます。
例えば、先にA市のコードを貼り、後に改造したB市のコードを貼ると、気温データなどはしっかりそれぞれ表示されますが、市町村の部分は両方ともB市が入ります。
.w_cityにA市、B市がそれぞれ表示される方法を教示頂けませんでしょうか。
ハリテンのご利用ありがとうございます。
お問い合わせいただきました、2つ表示させる方法につきまして。
誠に申し訳ございませんが、現状のハリテンのシステムは
同一ページでの2つ以上の表示を前提として設計されておりません。
そのため、弊社からの具体的な対応策や解決策をお伝えすることが難しい状況でございます。
お客様が望まれる機能については、ITの専門家にご相談いただくことをお勧めいたします。
大変お手数をおかけしますが、何卒ご理解賜りますよう、お願い申し上げます。
天気予報の精度が悪過ぎるのと表示（マーク）が解り辛い！
王 様
ご指摘ありがとうございます。
いただいたご意見をもとに、改善に努めてまいります。
お天気マークの意味が理解し辛い！ 改善して欲しい。
ご指摘ありがとうございます。
当ツールのマークは、データ元（https://openweathermap.org/）のアイコンを出力しているため、当方では変更ができかねております。
CSSの上書き表示などで、マークを変更できる可能性もありますので、
システムの専門家の方にご相談ください。
広島市中区の天気が範囲できません。改善をよろしくお願いします。
ご報告ありがとうございます。
当社で当該地域の郵便番号を入力したところ、正常にコードが出力されました。
お手数ですが、エラーが表示された郵便番号をお教えいただけますでしょうか。
※入力した住所は「730-0000」です。
何度押してもコード取得ができない
ご報告ありがとうございます。
コードが取得できないとのことですね。
入力した郵便番号や、ご利用中のブラウザなど教えていただけますでしょうか。
利用環境によって、取得できない原因が変わりますので、詳細を伺いたく思います。
サイト等で利用させて頂いております。
PC Edgeで表示しております。
連休前までは、入力地域の天気情報が出ていたのですが、本日になってから一部郵便番号の天気情報が取得出来ずに、反映されていない状態となっている模様です。
例：〒683-0805 鳥取県 たとえばこちら等を入力して反映を押してもプレビューが出てきません。
〒110-0005 東京都台東区 等の郵便番号では 反映が行われております。
以上です、よろしくお願いします。
詳細なご報告ありがとうございます。
当社で「683-0805」で出力したところ、現在は正常にコード表示されました。
利用が集中していたため、一時的に、取得にエラーが生じていたかもしれません。
お手数ですが、再度取得を試してみただけますでしょうか。
PC版を記事の途中に張り付けると、張り付けた以降の記事の幅がこちらの天気予報のサイズに変わってしまいサイトが崩れてしまいます。
サイズをカスタマイズするなど対応方法はありますか。（初心者です）
当ツールをご利用いただきありがとうございます。
記事の途中にコードを貼り付けたら、それ以降の表示が崩れたとのことですね。
お手数ですが、WordPressでご利用中のテーマ（テンプレート）を教えていただけますでしょうか。
テーマによって調整方法が異なったり、対応していない場合もございますので、詳細を伺いたいです。
「このページの内容 失敗」とアラートが表示され、エリアによって天気予報が出ないという現象が起きています。（正常に表示されるエリアもあります）
栃木県那須郡〜〜〜〜 → アラート表示
改善可能でしょうか？
ご報告ありがとうございます。
コードが取得できないとのことですね。
お手数ですが、取得に失敗した郵便番号や、ご利用中のブラウザなど教えていただけますでしょうか。
原因特定のため、詳細を伺いたく思います。
サイトで利用させて頂いております。
自サイトに合わせて、背景のグラデーションの方向とフォントの変更をしたいのですが可能でしょうか？グラデーションの方向に関しては、to right の部分を書き換えてみましたが反映されません。
ずっとサイト等で利用させて頂いております。
自サイトに合わせてグラデーションの方向やフォントの種類を変更したいです。グラデーションに関しては、スタイルシートの to right のところを書き換えてみましたが反映されないようです。
よろしくお願いいたします。
お世話になっております。
神奈川県横浜市鶴見区「230-0001」の天気予報を取得したいのですが、
sitecreation.co.jp 失敗と表示が出てコードが取得出来ません。
神奈川県の他の地区、「220-0001」や「240-0001」は問題ありませんでした。
ご対応していただけると助かります。
今まで長野県上伊那郡駒ケ根市「399-4117」の天気を見れていたのに使えなくなりました
コードの習得をし直そうとしたところ sitecreation.co.jp 失敗と出てしまい習得することができません
周りの地域の郵便番号では問題なく習得出来ました