石崎 力也

今回はHeadタグとカスタムCSSを追加していく方法についてやっていきます。GoogleやFacebookでトラッキングコードやグローバルサイトタグと呼ばれるものをページに入れたいときに、ページのHTMLのヘッド部分にタグを入れてくれと言われることがあります。そういうときにタグを入れる方法と、あとはCSSを使える方がCSSでスクールの中をカスタマイズしたいときにカスタムCSSをどこに入れるのかについてやっていきます。

Step1. SiteからCode Snippetsに行く

まずは左側のSiteのところからCode Snippetsに行ってください。ここにすべてまとまっています。一番上のCascading Style SheetsがCSSですね。ここに必要なものを入れてください。下には何と書いているかというと、「Include custom CSS across all pages on site」です。つまりTeachable上のすべてのページに反映されるものになります。

Step2. Head Code Snippets、Logged In SnippetsとLogged Out Snippets

次はHead Code Snippetsです。これはすべてのページのHeadタグのところですね。次はLogged In SnippetsとLogged Out Snippetsです。受講者がログイン状態のときとログアウト状態のときとで、それぞれ分けてこのスニペットを入れることができます。

ちなみに僕たちのところには、Head Code Snippetsの中にGoogleのグローバルサイトタグが入っていて、Logged In SnippetsとLogged Out Snippetsの中にDeadline Funnelが入っています。

ということでこのようにして簡単に貼り付けることができるのでやってみてください。今回は以上です。

やり方を動画で見る

Teachable（ティーチャブル）の使い方・操作方法の一覧ページに戻る

今回はLiquid言語の書き方を調べる方法についてやっていきます。

Step1. Liquid言語とは

Liquid言語がなにかわからないかもしれません。例えばこのEメールのテンプレートエディタの中に入っていくと、｢〈p〉｣のようなHTMLのタグとは別に、｢{{to.me}}｣のように中括弧2つで囲まれたタグのようなものがあることがわかると思います。これの説明はヘルプなどどこにも載っていないんですよね。これをどうやってやるのかという話ですね。

まず、Liquid言語はShopifyが作ったマークアップ言語ですが、Shopifyに行くとLiquid referenceがあって、このように記述してくださいと書いてあります。これをやっていくと結構大変なので、本当に困ったときだけ使うのがいいかなと思います。ここにどういうことをやってくださいねと書き方がすべて載っていますが、今回は大まかにだけ説明しようと思います。本当に必要な場合は、これをよく読んでデベロッパーの人に手伝ってもらうのがいいかなと思います。

Step2. TeachableでLiquid言語が使える場所

ではどういうところで使えるのかをまとめたものがこちらです。まずはPower Editorですね。Power EditorはTeachableの外観やテーマなどを中に入って細かくカスタマイズするときに使うものですね。次は先ほど見たEmail Templatesですね。メールの自動送信用のテンプレートを編集するところで使えます。次はCustom Certificatesといって、コースの修了証の所にも使えます。

また、ホームページ、セールスページ、サンキューページ、カスタムページといったページの中でブロックとして挿入することもできるんですよね。テキストのブロックやビデオのブロックと一緒に、ひとつのブロックとして挿入できるので見ていきましょう。

Step3. 「＋Insert New Block」でLiquid言語を加える

これはあるコースのページ一覧です。なんでもいいのですが、サンキューページに行きましょうか。「＋Insert New Block」をクリックするとText、Liquid/HTML、あとはBackground ImageやVideo Embedなどがあります。「Add Liquid/HTML Block」を選択すると、LiquidとHTMLタグの両方が入るようになっています。

ほかにどんなところで使えたかというと、Power Editorですね。Power EditorはSiteのところにあります。こういうものがここに使えます。よく見ると使ってありますね。

Step4. Teachableのヘルプ「Available Liquid Objects and Fields on Teachable」を見る

あとはTeachableのヘルプのAvailable Liquid Objects and Fields on TeachableではどのようなものがTeachableで使えるか一覧で書いてあります。Attachment、Category、Couponなどいろいろなものがあります。そのため、こういう場所のカスタマイズをしたい場合はこれを参考にしてもらえればいいと思います。

通常の使い方だとそこまでやる必要もないのかなと思います。僕たちはLiquidはあまりいじっておらず、たまにお客さんからここをどうにかできないかという要望がきて触ったりする程度です。ということでやってみてください。今回は以上です。

やり方を動画で見る

Teachable（ティーチャブル）の使い方・操作方法の一覧ページに戻る

今回はTeachableでスクールの表示を日本語化して使う方法をお伝えします。日本語化ですが、手動で英語の文章を日本語に変換していかなければいけないんですよね。そのやり方ですね。

Step1. SiteからCustom Textに行く

まずは管理画面に入ってください。そして左のSiteからCustom Textに行ってください。
そうするとたくさん出てきます。もともと英語が書いてあって、僕たちが日本語を随時当てていっているのですが、一回日本語を当ててもTeachableの更新が早く、英語の部分が新しく追加されたりします。そういうのを追いかけてだんだん日本語化していくのですが、項目が本当にたくさんあります。

Step2. フィルター機能を活用して日本語化する

解説していくのですが、ひとつひとつこのページの中を見ていくのは大変なので、この「Filters」を使ってください。フィルター機能をオンにすると、まずはHeaderだけ見るといったことができて、では次はFooterだけ見ましょう、そしてCommonだけ見ましょうということができるので、楽になると思います。すべて一緒くたにして見てしまうと、本当に量に圧倒されてしまいます。日本語化する作業が必要なら、今日はここまでやろうかなとセクションごとに分けるとすごく便利かなと思います。

ちなみに、僕たちはTeachableの日本語化を扱った商品を出しています。デフォルトの英語部分をなんと日本語に翻訳したらいいかすべて対にして、そのままコピペすれば日本語化できるようになっています。「Teachable日本語化」という商品で、これを使うと圧倒的に早くTeachable日本語化することができ、肝心のスクールの運営やコースの作成に入れると思います。よければ使ってみてください。ということでまずはひとつひとつセクションを確認していきます。

• Header：ナビゲーションバーや、ログインボタン、あとはサインアップボタンなどに出てくるヘッダー部分の文字ですね。

• Footer：スクールの下に出てくるフッターの部分です。
• Checkout：購入画面ですね。支払いを入力してコースを買うところの文言です。
• Creator Checkout：クリエイターとしてログインしたときに新しいデバイスの確認などをする画面です。

• Courses：このコースディレクトリーやコースのセールスページに表示されるような文言です。
• Lecture：コースの中のレクチャーに関することで、次のレクチャーに行く、戻るといった文言ですね。
• Creator Product：クリエイター側から商品やコースを管理するときの画面です。
• Comment：Teachableでは受講者からのコメントを受けることができて、その画面の文言です。
• Product Collection：バンドルされた商品、コースの所に表示されるものです。バンドルの中身や、このバンドルは買えませんといったものですね。
• Common：コースの登録や利用規約などスクールのいろいろな所で共通して使うような文言が入っています。見てもらえばわかると思います。もう本当にたくさんあるので、もし大変だったら僕たちが出している翻訳の商品を使ってほしいです。

• Homepage：この学校のトップページに表示されるものですね。これもそのままだと思います。

• Error Pagesです。これはページが見つからなかったり、なにか不明なエラーが発生したときなどに出てくるものになります。英語が出るよりは日本語が出たほうがいいですよね。こういうのもしっかりやっておくと、このスクールはきちんとしているなと見てもらうことができると思います。

• Accounts：ユーザーがスクールにサインアップしたときや、既存のアカウントにユーザーがログインしたとき、そしてパスワード忘れてしまってパスワードをリセットしようというときに出てくる文言になります。アカウント関連の管理ですね。
• Identity：比較的新しくできたもので、ログイン、サインアップ、あとは自分の名前といったものですね。これはすごく新しいもので、僕たちもまだ日本語が入っていませんが、お客さんの登録情報に関するセクションになります。
• Teachable Account Convert Modal：スチューデントがMy Teachableのアカウントのほうに切り替え作業するときに出てくるものですね。
• Manage Subscriptionです。これは定期購読、サブスクの管理に関する画面に出てくる文言です。
• Credit Card：これはもうそのままで、クレジットカードの入力、エラー、更新といったものが入ってます。
• Edit Profile：スチューデントのところで自分のプロフィールを編集したり、パスワードを編集したりするときに使います。
• Email：パスワードを変更するためのリンクや、新しいデバイスからのアクセスがありましたといったメールが来ますよね。そういう部分の文言です。
• Email Receipts：メールでレシートが届くのですが、それに関する文言ですね。
• Email Subjects：メールの件名に関する文言になります。

• Confirmations：自分がコースにサインアップしたあとや、コースの受講を開始したときなどに出てくるものですね。コースを買ったあとに、英語でメールが来たり表示されたりするとびっくりされてしまうので日本語化してあげたほうがいいと思います。

• Failure：エラー系はたびたび起こるので、きちんと日本語化したほうがお客さんは安心ですよね。

• Password：パスワード関連です。
• Registration：アカウントの作成ですね。スクールにサインアップするときに関連する文言です。
• Card Decline Reasons：カードが限度額に達して使えないといったカード関係のエラーですね。拒否の理由はたくさんありますが、そういうのをは早く日本語化する必要があるのでひとつひとつやっていくといいと思います。

• Sessions：セッションはログイン関係のサインインやサインアウトできたときに正常にログインできました、ログアウトできましたという文言ですね。
• Quiz：レクチャーの中の小テストのようなもので、そこで使う文言ですね。
• Blog：Teachableの中でブログを表示できるのですが、それに関する文言です。
• Contact：受講生がスクールの運営者にコンタクトしたいときにメッセージを入れるのですが、それに関連する文言ですね。

Step3. 「Teachable日本語化」という商品のご案内

ということでスクロールしていくと本当にたくさんあるので、ひとつひとつ根気よくやってもいいですが、もう僕たちがあらかじめ翻訳した「Teachable日本語化」という商品を使ってもらったら早いかなと思います。どちらにしてもきちんと日本語化して定期的に見直すことが大事ですね。

Teachableはいろいろと開発が行われていて、新しいセクションが増えると英語のままになっているところがたまにあるんですよね。こういうものです。定期的にレビューが必要なのですが、そういうのをメンテナンスして日本語化しておくと、やはりスクールに安心感が出てくるのでやってみてください。今回は以上です。

やり方を動画で見る

Teachable（ティーチャブル）の使い方・操作方法の一覧ページに戻る

今回はTeachableでページのナビゲーションをカスタマイズしていきます。スクールの一番上のメニューやフッターにどういうものが表示されるか、そしてスクールにログインしたときにどういうページが出るのか、コースディレクトリと呼ばれるコースの一覧が出るのか、ホームページと呼ばれるタイトルつきのページが出るのかをカスタマイズすることができるのでやっていきましょう。

Step1. Homepage Settings

まずは管理画面でSiteからNavigationに入ってください。今回はこのページを使います。

初めに来る項目はHomepage Settingsです。スクールに最初に着地したときにどのようなページが出るかを選ぶことができます。これはログアウト状態、ログイン状態でそれぞれ選ぶことができます。初めて来たお客さんはログアウト状態でスクールのトップに着地すると思うので、まずはその状態をどれにするかですね。Logged Outで選ぶことができます。｢Course Directory｣はコースの一覧が出ているものです。そして｢Homepage｣はタイトルつきのページです。基本的には「Homepage」のほうがタイトルが出ていたりして綺麗かなと思います。ログイン状態だと「Course Directory」のほうがいいかなと思いますね。やはりお客さんはコースを受講したいと思ってログインしているので、「Course Directory」がおすすめです。変更したら必ず｢Save｣を押してください。

Step2. Navigation Bar

次はNavigation Barですね。ナビゲーションバーはページの一番上にあるバーです。今は「My Courses」と「All Courses」があるのですが、ここで新しく追加することができます。Textではどのように表示するかを設定します。Link DestinationではTeachableの内部のページなのか外部のページなのかを選ぶことができます。下のテキストボックスにはURLを入れてください。Open a New Tubでは新しいタブで開くかどうかを決めることができます。最後のVisible toはログインの人、ログアウトの人、それとも両方の人かを決めることができます。これらを選んで追加してみてください。ちなみにナビゲーションバーの項目は順序を変えたり、削除することもできます。

Step3. Footer

次はFooterですね。フッターは最初から規約とプライバシーポリシーが出ています。これはオンオフすることができません。もう1つ特商法を表示するページを出していて、これはあとから手動で追加したものですね。これもナビゲーションバーと同じようにして追加できます。

Step4. Categories

最後はCategoriesですね。どこに出てくるのかというと、このコースディレクトリのカテゴリーのところです。

今は「料理」と「DEMO」があって、このようにカテゴリーごとに絞りこむときに出てくるものですが、このページでは新しく作ることができないんですよね。ここでは既存のカテゴリーを管理して名前を変更したり、説明を追加したり、削除したり、見えるか見えないかをオンオフすることしかできません。

ではどこで追加するのかというと、ほかのレクチャーでも出しているのですが、コースのInformationに入った先にあるDetailsというところにあります。ここでカテゴリーを追加できます。既存のカテゴリーを選んであげてもいいですし、「DEMO2」と入力して新しいカテゴリーを作ることもできます。セーブしてこちらのページで更新すると、「DEMO2」が出てきました。ということで、このようにしてナビゲーションをカスタマイズできるので、どうなるかいろいろと試しながらやってもらえるといいと思います。今回は以上です。

やり方を動画で見る

Teachable（ティーチャブル）の使い方・操作方法の一覧ページに戻る