

いろんなページをまとめていると何かとWebページのリンクを貼りたいことって多いですよね...!
今回はNotionにWebページのリンクを貼り付ける方法を見ていこうと思います!
目次
Webページのリンクをつける方法
notionでは現時点で3種類のリンクの付け方が存在しているようで、
- そのままリンクを貼り付ける方法
- 任意の文字にリンクを貼り付ける方法
- Web Bookmark機能を利用して貼り付ける方法
- Embedを利用して貼り付ける方法
があります。
それぞれ見た目はこんな感じになります。(全て同じページへのリンクです

一つづつ簡単に解説していきます!
全ての方法において貼りたいページのURLが必要となるので、コピーをしておいてください。

そのままURLを貼り付ける
これはほぼ解説はいらないかなと思いますが...
貼りたいWebページのリンクをコピー、ペーストすればOKです。

自分の入力文字に貼り付ける
まず最初にtextで文字を入力します。(デフォルトがtextなので、特に意識せずType '/' for command状態で文字を入力すればOKです)




ちなみに、選択後にCommand+Vでペーストすると一発でできたりもします...!(Mac)
Web Bookmark機能を利用して貼り付ける
NotionではWeb Bookmark機能が用意されています。
これは、Webページに用意されている情報を参照してよりリッチなリンクを作成してくれる機能です。
方法は二つあり、
1つ目は、最初に解説したそのままURLを貼り付けて作成します。
実は、URLをそのまま貼り付けるとこんな項目が出てきます。

”Dismiss”はやっぱりやめた〜ってときに消すことが、そして今回解説するBookmarkを作るのが"Create Bookmark"です。(Create Embedは次節で詳述します)
なので、URLをそのまま貼り付けた後、右側に表示される”Create Bookmark"を選択すればOKです。
また、もう一つの方法はコマンドから入力する方法です。
入力欄の左側の+ボタン、あるいはコマンド検索で"/we"と検索すると"Web Bookmark"というものが出てきます。


"Web bookmark"を選択すると、自動的にbookmark作成のURL入力画面が開くので、そこへURLをペーストします。
するとリンクが生成されます。
また、このリンクには画像があるため、場合によってはすぐに反映されない場合もあります(文字は見えるけど画像が表示されない等)。
そのため、しばらく時間が立ってリロードすればちゃんと表示されるかと。

Embedを利用して貼り付ける
最後はEmbedです。
こちらはEmbedの文字通り、”埋め込む”タイプのURLになっています。
Webページを回るときはブラウザで上下にスクロールして記事を見ると思いますが、それのミニマム版をそのままページに作っちゃおう!っていうかんじです。
表示位置は固定されおり、その領域でスクロールすることでリンク先のページの内容をページ遷移なしに参照することができます。


この機能を使うときにすこしだけ気をつけておいて欲しいのが、他のリンクと比べ圧倒的に多くの情報が必要になります。
そのため、あまり使いすぎるとページ読み込みに時間がかかったり、ページ自体のスクロール時の滑らかさに影響がでるかもしれません。
また、あくまでそのページ用のミニマム版なので、embed内の表示しているページにある別のリンクを選択すると自動でブラウザが立ち上がり遷移する仕様になっています(embed内でネットサーフィンは出来ない)。
こういった点はしっかりと理解した上でご使用ください。
使い方は先ほどWeb bookmarkの方でも触れましたが、そのままURLをペーストした後に表示される項目から"Create Embed"を選択すると自動でペーストしたリンクのEmbedが生成されます。
また、別の方法として"Web bookmark"同様、コマンドで生成も可能です。
+ボタンから、あるいは”/emb”で検索をすると一番上に出てくる"Embed"を選択するとURL入力画面が表示されるので、そこへURLをペーストすればOKです。


また、ここでは詳述しませんが、PDFやGoogle Driveといった書類系も同様にスクロールできる形で(都度ダウンロードせずに確認できる)埋め込めるようですね。
GoogleMapやCodePen(プログラムの実行ができるWebサービス)なんかもあるみたいです。
旅程を作るときやイベントやカンファレンスまとめでの会場地図なんかも埋め込むと便利そう...
っと、脱線しましたが、以上がEmbed(埋め込み)です。
活用例
僕の場合の活用例(Web bookmarkしかないです...w)をほんの少しですが貼っておきます。
こちらは今回解説に使わせていただいた記事の簡易レビューです。
日頃から読んだ記事で面白そうなものがあったらメモを取るようにしているので、そのページのリンクにbookmarkを使っています。
一応こういった記事関連にはWebClipperという機能もあったりするのですが...現在はこの方法でやってみてます。
そこらへんはまた後日どんなまとめかたしているのかとか詳細をかけたら良いかなぁ〜・・・(まだ途中だけど)

次は日頃仕事やなんやかんやで技術関係のことについて調べることが多いのですが、そのときまとめる勉強メモの参照リンク一覧なんかにも使っています。
ブロックを横に分割することで2,3分割ももちろん可能です(ぱっと見3分割くらいからは折り返しが増えて見栄え悪いかも)

まとめ
さて、今回はいろんなリンクの作り方を見てきました。
個人的には直張りのリンクは滅多に使わないのですが...
例えばそのpageのドラフト(下書き)を書いているときにとりあえず気になったURLをぺたぺたして、書いていく中で必要そうなものを厳選してWeb bookmarkとかなら全然ありかもしれないですね。
任意の文字にリンクをつけるのは意外と僕は使ってないですね...
Web bookmarkが優秀すぎて大抵Web bookmarkで済ませてしまう...w
ぜひ皆さんも自分でいろんなリンク試してみて、良い感じにpage作っていきましょう!
それでわ!