チャべログ

チャベス(@ChabesuB)のブログ。Notionのこと、プログラミングのこと、日常のこと。

Notion のホーム画面にカシオの時計を埋め込む

Notion AI
この記事を要約して

【Notion AI の要約】 Notionのホーム画面にカシオの時計を埋め込む方法を紹介する記事。CodePenで見つけたカシオの時計をNotionに埋め込む方法を解説し、CodeSandboxを使うことで部分的に埋め込むことができることを紹介している。 【記事の文字数】674 文字

以下のように Notion のホーム画面にカシオの時計を埋め込んでみました。

このカシオの時計、実物を持っています。これを見つけた時は感動しました。かっこよすぎです。動画にあるように、このカシオの時計は本物と同じようにボタンを押せば時間表示が切り替わるし、光ります。すごすぎです。

どこでカシオを見つけたのか

たまたま CodePen でたまたま見つけました。

ただし、CodePen をそのまま Notion に埋め込むと、以下のような見た目で埋め込まれてしまいます。

Notion にコードペンを埋め込むとこのような見た目になる

ということで、裏技を使います。

CodeSandbox を使う

CodeSandbox というサービスがあり(CodePen と似たサービス)、このサービスを使えばツイートのようにカシオの時計部分のみ埋め込むことができます。

CodeSandbox に CodePen のコードをコピペします。ただし、CodePen で公開されているコードは MIT ライセンスなので、HTML ファイルなどに著作権表示を入れておきます。

CodeSandbox の使い方は以下の記事に詳しく書いています。

おわりに

この記事では、カシオの時計を Notion に埋め込む方法を紹介しました。もしやり方がわからないなどあれば、Twitter(@ChabesuB)か このブログのお問い合わせフォームなどでお気軽にお問い合わせください。