[{"data":1,"prerenderedAt":52},["ShallowReactive",2],{"blog-tags":3,"header-recruit-jobs":17,"blog-post-notion-image-link":22},[4,5,6,7,8,9,10,11,12,13,14,15,16],"Notion AI","Notionカレンダー","Notionサイト","Notionメール","インテグレーション \u002F 外部ツール連携","データベース","プラン \u002F 請求 \u002F 料金 \u002F 支払い","ページ \u002F ブロック","マーケットプレイス \u002F テンプレート","ワークスペース \u002F サイドバー","共有 \u002F コラボレーション","数式","設定",[18],{"path":19,"title":20,"order":21},"\u002Frecruit\u002Fnotion-consultant","Notionエンジニア\u002Fコンサルタント",1,{"slug":23,"title":24,"date":25,"lastUpdatedAt":26,"excerpt":27,"categories":28,"tags":30,"author":31,"noIndex":38,"html":39,"headings":40,"qas":50,"relatedQAsByTag":51},"notion-image-link","Notionに画像リンクを簡単に貼る方法","2023-06-11T00:00:00.000Z","2024-09-01T00:00:00.000Z","Notionに画像リンクを簡単に貼る方法を紹介する記事。外部ツール「Notion image links」を使えば、画像リンクを作成し、Notionに埋め込むことができる。Notakuというサービスを使えば、Notionのデータベースから簡単に美しいブログやヘルプセンターを作成できる。",[29],"個人利用",[8],{"id":32,"name":33,"image":34,"description":35,"url":35,"descriptionHTML":36,"SNSHTML":37},"c2f976ab-4882-4e4e-a80e-91d829bd59ca","チャベス","\u002Fblog\u002Ficon\u002Fchabesu.png","","Webライター・ディレクター。Notion公式のおすすめのテンプレートクリエイター。個人でNotionをちょっと便利にするChrome拡張機能を開発中。代表作は「NotionSidebarHider」「Notion文字数カウント」。本業はメーカーで研究開発をしているエンジニア。","\u003Ca href=\"https:\u002F\u002Ftwitter.com\u002FChabesuB\" class=\"article-link\" target=\"_blank\">Twitter\u003C\u002Fa> \u002F \u003Ca href=\"https:\u002F\u002Fwww.notion.so\u002Fja-jp\u002F@chabesu\" class=\"article-link\" target=\"_blank\">Notion\u003C\u002Fa>",true,"\n      \u003Cdiv class=\"notion-callout bg-grayLight5 border-grayLight20 text-black p-4 border\">\n        \u003Cdiv class=\"flex items-start\">\n          \u003Cdiv class=\"flex-shrink-0 mr-3\">\n            \u003Ca href=\"\u002Fblog\u002Fauthors\u002Fチャベス\" class=\"flex flex-col items-center\">\n              \u003Cimg src=\"\u002Fblog\u002Ficon\u002Fchabesu.png\" alt=\"チャベスのアイコン\" class=\"w-12 h-12 rounded-full border border-grayLight20 bg-white mb-1\">\n              \u003Cspan class=\"text-xs text-black6\">チャベス\u003C\u002Fspan>\n            \u003C\u002Fa>\n          \u003C\u002Fdiv>\n          \u003Cdiv class=\"flex-1\">\n            \u003Cdiv class=\"text-[.9em] leading-[1.6] font-normal tracking-[1px] flex flex-col gap-1\">\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">\u003Cstrong>2024年8月のアップデートで、Notionの標準機能のみで画像にリンクを貼ることができるようになりました。本記事で紹介している外部サービスを用いたテクニックは不要となりました。\u003C\u002Fstrong>\u003C\u002Fp>\u003Chr>\n\u003Cfigure class=\"youtube-embed-wrapper\">\n\u003Cdiv class=\"youtube-embed-container\">\n\u003Ciframe width=\"100%\" src=\"https:\u002F\u002Fwww.youtube.com\u002Fembed\u002FUS60AcgoZ08?rel=0\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen=\"\" class=\"youtube-iframe border border-grayLight20\">\u003C\u002Fiframe>\u003C\u002Fdiv>\n          \u003C\u002Ffigure>\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \n\n\n\n\u003C\u002Fdiv>\n\n\n\n\n\n\n\n\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">今回はNotionに簡単に画像リンクを貼る方法を紹介します。通常、Notionでリンク付きの画像を埋め込むことはできません。しかし、外部ツールを使えば簡単に画像リンクを作成し、Notionに埋め込むことができます（無料で使えます）。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">今回はこのツールの使い方の紹介をします。\u003C\u002Fp>\n        \u003Cdetails class=\"table-of-contents mb-6 hidden\" open=\"\">\n          \u003Csummary class=\"text-[.9em] leading-[1.6] font-semibold tracking-[1px] mb-2\">\n            目次\n          \u003C\u002Fsummary>\n          \u003Cul class=\"toc-list flex flex-col gap-1 ml-5\">\n      \n            \u003Cli class=\"mt-0.5\">\n              \u003Ca href=\"#notion-image-links\" class=\"toc-link text-sm text-black6 font-bold\">\n                Notion image links\n              \u003C\u002Fa>\n            \u003C\u002Fli>\n        \n            \u003Cli class=\"mt-0.5\">\n              \u003Ca href=\"#使い方\" class=\"toc-link text-sm text-black6 font-bold\">\n                使い方\n              \u003C\u002Fa>\n            \u003C\u002Fli>\n        \n            \u003Cli class=\"mt-0.5\">\n              \u003Ca href=\"#参考notakuとは\" class=\"toc-link text-sm text-black6 font-bold\">\n                （参考）Notakuとは\n              \u003C\u002Fa>\n            \u003C\u002Fli>\n        \n          \u003C\u002Ful>\n        \u003C\u002Fdetails>\n      \u003Ca href=\"#notion-image-links\" id=\"notion-image-links\" style=\"pointer-events: none; cursor: text;\">\u003Ch2 class=\"blog-heading mt-8 mb-3 font-feature-palt\">\u003Cstrong>Notion image links\u003C\u002Fstrong>\u003C\u002Fh2>\u003C\u002Fa>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">画像リンクを作成できるのは「\u003Cstrong>Notion image links\u003C\u002Fstrong> 」というサービスで、以下のリンクから簡単に画像リンクを作成することができます。\u003C\u002Fp>\n    \u003Cdiv class=\"template-text-section mb-6\" data-cta-id=\"task-trial\" data-cta-position=\"after-h2-2\" data-cta-variant=\"default\" data-audience=\"toC\" data-post-slug=\"notion-image-link\">\n      \n      \u003Csection class=\"flex flex-col gap-y-5 mb-4 bg-white border border-black px-6 pt-6 pb-7 md:px-8\">\n        \u003Cdiv>\n          \u003Ch2 class=\"blog-heading font-feature-palt\">\n            Notionタスク管理ロードマップ体験版を無料プレゼント\n          \u003C\u002Fh2>\n        \u003C\u002Fdiv>\n        \u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">\n          Notionでのタスク管理を基礎から体系的に学べる「タスク管理ロードマップ」の体験版を無料で配布しています。公式LINEの友だち追加だけで、すぐに受け取れます。\n        \u003C\u002Fp>\n        \u003Cimg src=\"https:\u002F\u002Flp.notion-university.jp\u002Fimages\u002Ftrial-task.jpg\" alt=\"Notionタスク管理ロードマップ体験版のプレビュー\" class=\"w-full border border-grayLight20\" loading=\"lazy\">\n        \u003Cdiv class=\"flex flex-col items-center gap-3 pt-1\">\n          \u003Ca href=\"https:\u002F\u002Flp.notion-university.jp\u002Ftrial-0621\u002F?utm_source=blog&utm_medium=referral&utm_campaign=trial0621&utm_content=article_cta&utm_term=notion-image-link\" class=\"blog-button blog-button--line\" target=\"_blank\" rel=\"noopener\">\n            \u003Cspan>体験版を無料で受け取る\u003C\u002Fspan>\n          \u003C\u002Fa>\n          \u003Cp class=\"text-xs text-black6\">簡単3分！公式LINEの友だち追加だけですぐに受け取れます\u003C\u002Fp>\n        \u003C\u002Fdiv>\n      \u003C\u002Fsection>\n    \n    \u003C\u002Fdiv>\n  \u003Ca href=\"#使い方\" id=\"使い方\" style=\"pointer-events: none; cursor: text;\">\u003Ch2 class=\"blog-heading mt-8 mb-3 font-feature-palt\">使い方\u003C\u002Fh2>\u003C\u002Fa>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">使い方はとても簡単です。\u003C\u002Fp>\u003Col class=\"list-decimal pl-6\">\u003Cli class=\"text-[15px] md:text-[16px] leading-[1.9] [li+&]:mt-1\">Googleでログイン（もしくは メールアドレスを登録）\u003C\u002Fli>\u003Cli class=\"text-[15px] md:text-[16px] leading-[1.9] [li+&]:mt-1\">画像を指定（URLを指定 もしくは アップロード）\u003C\u002Fli>\u003Cli class=\"text-[15px] md:text-[16px] leading-[1.9] [li+&]:mt-1\">画像に埋め込みたいリンクを指定\u003C\u002Fli>\u003Cli class=\"text-[15px] md:text-[16px] leading-[1.9] [li+&]:mt-1\">Notionへの埋め込みコードがコピーされるので、Notionに貼り付けて埋め込み\u003C\u002Fli>\u003C\u002Fol>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">実際に画像リンクを作成する様子は以下の動画をご覧ください。約30秒ほどで画像リンクを作成して埋め込むことができます。\u003C\u002Fp>\u003Cfigure class=\"youtube-embed-wrapper\">\n\u003Cdiv class=\"youtube-embed-container\">\n\u003Ciframe width=\"100%\" src=\"https:\u002F\u002Fwww.youtube.com\u002Fembed\u002FqJePlPvKOvI?rel=0\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen=\"\" class=\"youtube-iframe border border-grayLight20\">\u003C\u002Fiframe>\n\u003C\u002Fdiv>\n\n\u003C\u002Ffigure>\n\n\u003Ca href=\"#参考notakuとは\" id=\"参考notakuとは\" style=\"pointer-events: none; cursor: text;\">\u003Ch2 class=\"blog-heading mt-8 mb-3 font-feature-palt\">（参考）Notakuとは\u003C\u002Fh2>\u003C\u002Fa>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">このサービスを運用している「Notaku」は、Notionのデータベースからとても簡単に美しいブログやヘルプセンターを作ることができます。\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">\u003C\u002Fp>\u003Cfigure>\n    \u003Cimg src=\"\u002Fblog\u002Fimages\u002Fpost\u002F2023-06-11-notion-image-link-1.png\" alt=\"Notakuで作れるブログ\" class=\"border border-grayLight20 md:max-w-[80%] m-auto\" loading=\"lazy\">\n    \u003Cfigcaption class=\"text-center leading-5\" style=\"font-size: .85rem; color: #999;\">\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">Notakuで作れるブログ\u003C\u002Fp>\u003C\u002Ffigcaption>\n  \u003C\u002Ffigure>\u003Cp>\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">\u003C\u002Fp>\u003Cfigure>\n    \u003Cimg src=\"\u002Fblog\u002Fimages\u002Fpost\u002F2023-06-11-notion-image-link-2.png\" alt=\"Notakuで作れるヘルプセンター\" class=\"border border-grayLight20 md:max-w-[80%] m-auto\" loading=\"lazy\">\n    \u003Cfigcaption class=\"text-center leading-5\" style=\"font-size: .85rem; color: #999;\">\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">Notakuで作れるヘルプセンター\u003C\u002Fp>\u003C\u002Ffigcaption>\n  \u003C\u002Ffigure>\u003Cp>\u003C\u002Fp>\u003Cp class=\"text-[15px] md:text-[16px] leading-[1.9]\">気になる方は以下の記事を参考にしてみてください。Notaku以外にもNotionでとても簡単にWebサービスを作れるサービスを紹介しています。\u003C\u002Fp>",[41,45,47],{"id":42,"text":43,"type":44},"notion-image-links","Notion image links","heading_2",{"id":46,"text":46,"type":44},"使い方",{"id":48,"text":49,"type":44},"参考notakuとは","（参考）Notakuとは",[],[],1793056350055]