Notionに天気予報を埋め込む方法|Notionのページ内埋め込みに適したコンテンツ紹介①WeatherWidgetでおしゃれにカスタマイズ

Notion Advent Calendar 15日目の記事になります。Notionのページに天気予報を埋め込む方法を解説!WeatherWidgetを活用し、カスタマイズ可能な天気ウィジェットを簡単に追加する手順を紹介します。

はじめに

12日目の Notionのページ内埋め込み徹底解説! ではスラッシュコマンドからページ内埋め込み出来るコンテンツをメインにご紹介しました。
今回は、Notionのページ内埋め込みに適したコンテンツについて書いていきます📝

Notionのページ内埋め込みに適したコンテンツを複数紹介しているサービス:Apption

ApptionはNotion埋め込みに適したコンテンツを一覧で見ることがサービスになります。
様々なコンテンツを一覧で見ることが出来るので非常に便利です!
ジャンル検索も可能👌
Apptionの検索について | Apptionの検索について
Apptionの検索について | Apptionの検索について

WeatherWidget -レスポンシブお天気 Widget -

まずは、WeatherWidgetというページ内に綺麗にお天気情報を埋め込むことが出来るサービスを紹介します。
Notionに埋め込む際に必要な手順についてご紹介していきます。

手順1:WeatherWidgetからHTMLコードを取得

以下にアクセスし表示したい内容を設定した後、「GET CODE」をClickしHTMLコードを取得します。
WeatherWidgetの特徴:
  • テーマなどカスタマイズ可能な内容が多い点が嬉しいです😄
テーマのカスタマイズ一覧 | テーマのカスタマイズ一覧
テーマのカスタマイズ一覧 | テーマのカスタマイズ一覧
Settingが終了した後は、「GET Code」をClickしHTMLコードを取得します。
WeatherWidgetの様子 | WeatherWidgetの様子
WeatherWidgetの様子 | WeatherWidgetの様子

手順2:Notion埋め込み用のURLを生成

以下サイトにアクセスし、手順1で取得したHTML Codeをペースト後、ボタンをClickします。
Notion埋め込み用のURLを生成している様子 | Notion埋め込み用のURLを生成している様子
Notion埋め込み用のURLを生成している様子 | Notion埋め込み用のURLを生成している様子

手順3:Notionにページ内埋め込みを行う

以下のスラッシュコマンドを使いに生成したURLを入力します。
  • +
 
Embed linkに生成したURLを入力している様子 | Embed linkに生成したURLを入力している様子
Embed linkに生成したURLを入力している様子 | Embed linkに生成したURLを入力している様子
一例として、https://apption.co/embeds/phu293 を埋め込んだ場合は以下のように表示されます。
WeatherWidgetで生成したWidgetをNotionに埋め込んだ様子 | WeatherWidgetで生成したWidgetをNotionに埋め込んだ様子
WeatherWidgetで生成したWidgetをNotionに埋め込んだ様子 | WeatherWidgetで生成したWidgetをNotionに埋め込んだ様子

さいごに

今回は、Notionのページ内埋め込みに適したコンテンツ紹介 その1ということでWeatherWidgetを取り上げてご紹介しました🌤️

署名2025/3/3 16:552025/4/1 23:47