今回はTeachableでカスタムHTMLブロックにスニペットを追加する方法についてやっていきます。Teachableではセールスページなどでこのようなブロックエディターというものがありますよね。ブロックエディターのところでページ自体に新しい機能を付加したり、少し高度なCSSを使ったりすることができるのですが、そういったカスタムのHTMLを埋め込む方法についてやっていきましょう。
Step1. 「＋Add New Block」からCuustom HTMLを加える
「＋Add New Block」から入ってCuustom HTMLの右側にあるADDボタンを押してください。そうするとこのようにコードを挿入するところができるんですね。横幅を変えることができ、ここにいろいろなコードを追加できます。
TeachableのCustom HTML Block Snippetsというページにはどのようなことができるかという例が書いてあるんですよね。例えば、このButton hover effectは良いと思います。見てください。ボタンの上にカーソルを合わせるとボタンが大きくなります。Expand Codeを押すと、「 < style > 」から始まるコードが表示されます。これをコピーして貼り付けましょう。プレビューするとこうなります。色も編集できるはずです。やってみてください。
Step2. タイプフォームで作ったフォームを埋め込む方法
次はこのタイプフォームで作ったフォームを埋め込んでみたいと思います。タイプフォームのShareのところから、「Standard」というページ内に埋め込む形のものを選択します。やっていきましょう。「Get the code」でコードをコピーして、Custom HTMLに貼り付けます。
自動的にセーブになるので、Draft Savedと表示されています。では「Preview」から見てみましょう。おそらく一番下に出るんじゃないかなと思います。これですね。フィードバックフォームが出てきます。タイプフォームが埋め込まれました。
このようにカスタムのHTMLブロックを追加し、その中にスニペットというHTMLのコードをたくさん入れることでいろいろな機能をページに付加することができます。便利だと思いますのでやってみてください。Teachableのホームページにもいくつかありますね。ソーシャルメディアボタンやフォームを埋め込むものがあったり、いろいろなエフェクトがあります。いじれる方はやってみてください。面白いと思います。
