カスタムコード
修正日 2023年 5月 16日(火曜日) 3:57 PM
LearnWorldsのSite Builderはあなたの学校のウェブサイトを作成するために必要なすべてのツールを提供します。場合によっては、Custom Codeの追加や既存の(生成された)コードのカスタマイズが必要になることがあります。このような状況では、私たちのカスタムコードエディタを使用することができます。
カスタムコードエディターでは、HTMLページの様々なスロット(スロットはカスタムコードを挿入できる場所です)に簡単にカスタムコードを追加したり、すでに生成されたコードを編集したりすることができます。具体的には、カスタムHTML、CSS、Javascriptを追加することができます。
カスタムコードエディタは Site Builder → Custom Code で見つけることができます:
![](https://assets.st-note.com/production/uploads/images/114276793/picture_pc_1328095b7d07237ec666ae6597474ca1.gif?width=1200)
これに加えて、HTMLスロットにリキッドテンプレート言語もサポートしています。
ウェブページはHTML、CSS、javascriptで構成されています。HTMLコードはコンテンツ(あなたが読むもの)を定義し、CSSはスタイル(フォント、色、レイアウトなど)を定義し、javascriptはウェブページの機能性(例えばボタンをクリックしたときに何が起こるか)を追加します。HTMLコードには、CSSとjavascriptのコードをそれぞれstyleタグとscriptタグに含めることができます。最後に、HTMLコードは主にheadタグとbodyタグの2つに分けられます。headタグは通常、CSSやjavascriptファイルをインポートしたり、メタデータのように表示されないページの属性を定義したりするのに使われます。bodyタグは、ウェブサイトの表示したい部分を配置するタグです。
リキッドテンプレート言語は、デザインを実装するために後で置き換えるプレースホルダーを定義できる言語です。さらに、ループや条件などの高度な機能も備えています。これにより、ボタンをクリックするだけで追加できる変数やすぐに使えるコードスニペット(リキッド)を提供することで、コードエディタをさらに強化し、ウェブサイトの開発をブートストラップすることができます。カスタムコードエディタには、カスタムコードを格納できる様々なスロットがあります。
![](https://assets.st-note.com/img/1693006247107-x7uLL0cLqO.png)