cover image

コード埋め込みでのHTML挿入機能

今までHTML埋め込みを利用したい場合には、body最後に全ページ共通でしか挿入できませんでしたが、今後は個別に挿入が可能になりました!
TwitterなどはNotion側で埋め込み対応をしていましたが、この機能を使うことでWraptasサイトでInstagramの埋め込みにも対応できるようになりました。

利用方法

管理画面→デザイン編集→コンテンツエリア「コードブロックを使ったHTML挿入機能をONにする」でのチェックをONにしてください。
これにチェックを入れて、
  1. Notion側でコードブロック( /code )の入力を行い
  1. コードの言語をHTMLに設定
  1. コードにHTMLとして挿入したいコードを入力する
と、自動的にWraptasのサイト上でそのままHTMLとして入力されます。
injectHtml injectHtml__codeBlock というクラス名のdivで囲まれた状態になります。

注意点

HTML のコードがすべて自動で変換されるので、実際にサンプルコードなどでHTMLを表示しておきたい場合には Markup などに変更して利用してください。
また、HTMLとして正しくないモノを入力するとサイト全体が崩れることがございますので、基本的にはご自身で編集せずに埋め込みコードをコピー・ペーストする形でご利用ください。

サンプル

Notionでは埋め込みができない、Instagramの埋め込みコードを利用しています。