著作者：fullvector／出典：Freepik
こんにちは。KOU VLOGのこうです。
野外のイベント情報などの記事を書く際に、
読者にわかりやすくするために天気ウィジェットを追加したいなんてときありますよね。
今回はそんなときに使える、天気ウィジェットの一番簡単な挿入方法をご紹介していきます。
ではいこう！
プラグインの天気ウィジェットはもう使えない？
以前さまざまなサイトで天気ウィジェットを追加する際に活用されていた方法として、
天気プラグインでの挿入方法がありました。
ですが2022年7月31日に「livedoor 天気」から、天気サービスを終了するという情報が正式に発表されました。
これにより、livedoor APIを活用して天気情報を提供していたWeather in Japanなど、
さまざまな日本版の天気ウィジェットのプラグインが使用不可能となりました。
そのため現在Weather in Japanのプラグインを有効化しようとすると、
このような表示が出て、使えなくなっていることがわかりますね。
では現在使える天気ウィジェットの挿入方法を紹介していきます。
天気ウィジェットの挿入方法
Booked.jp
現在はプラグインではなく、宿泊予約サイト「Booked.jp」が提供している天気ウィジェットを使用していきます。
様々なデザインのウィジェットが用意されており、
「大型ウィジェット、小型ウィジェット、ライトウィジェット」の3項目から選ぶことができます。
ウィジェットの設定
Booked.jpの天気ウィジェット挿入方法はとても簡単で、まず使用したいウィジェットを選択します。
今回はこちらの大型ウィジェットを使用したいと思います。
使用したい天気ウィジェットが決まったら、「カスタマイズ」をクリックします。
カスタマイズ画面に移動してきましたら、ウィジェットのデザインを変更するから、
・ウィジェットの言語
・温度レイアウト
・ウィジェットの幅
この4つを選択していきます。
場所の選択
ここでは天気を表示したい地域を選択します。
今回は東京の新宿区の天気を表示させたいので、入力窓に「shinjuku」と入力します。
するとプルダウンメニューが表示されるので、「Shinjuku-ku, Japan」を選択します。
見事、右のライブプレビューに新宿の天気が表示されましたね。
ウィジェットの言語
ここではウィジェットに表示する言語の選択をしていきます。
例で、言語選択で「English」を選択すると、ちゃんと英語表記になりましたね。
今回はデフォルトの日本語表記のままで行きます。
温度レイアウト
ここでは温度のレイアウトとして、摂氏と華氏が選択できます。
アメリカなどでは華氏が使われることが多いですが、今回は日本語表記のため「摂氏」を選択します。
ウィジェットの幅
ここでは表示するウィジェットの幅を選択していきます。
スクロールバーか右側の入力欄からpx表記で幅を変更することができます。
今回は画面の横いっぱいに天気ウィジェットを表示させたいので、一番最大の「430px」にします。
ウィジェットの挿入
カスタマイズ画面で、ウィジェットの設定が完了したら実際にサイトにウィジェットを挿入していきます。
作成したウィジェットの下にある「HTMLコードを取得」をクリックします。
ウィジェットコードの取得画面に移動したら、コードをダブルクリックして全選択し、コピーします。
コピーが完了したら、天気ウィジェットを挿入したい投稿に移動し、
「＋」>「カスタムHTML」を選択します。
カスタムHTMLを表示したら、先ほどコピーしたウィジェットコードを張り付けます。
これで天気ウィジェットの挿入は完了です。
実際の投稿画面を見てみましょう。
見事、先ほど作成した天気ウィジェットが投稿に挿入されていることがわかります。
これで天気ウィジェットの挿入は完了です。
まとめ
いかがでしたでしょうか。
天気ウィジェットのプラグインが使用できなくなり、焦った方も多いと思います。
是非今回の手順を参考にしながら、「Booked.jp」が提供している天気ウィジェットを使用して、挿入してみてはいかがでしょうか。
ご視聴ありがとうございました。
それでは。
