カスタム HTML、CSS、JavaScript コードを使用する

ウェブサイトテンプレートとセクションテンプレートを使えば、プログラミングやデザインの知識がなくても、ほとんどのデザイン課題をクリアできます。さらに、必要に応じてカスタムコードを追加することも可能です。

この記事では、挿入できるコードの種類とその方法について説明します。

基礎知識

独自のコードを記述して使用するだけでなく、HTML、CSS、JavaScriptのコードスニペットを利用してサードパーティ製ツールを統合することもできます。Cookie同意バーセクションテンプレートを使用すると、一部のツールが機能しない、または正しく表示されない場合があることにご注意ください。

セキュリティ上の理由から、法的要件を遵守するために、ブロックするスクリプトは多すぎるよりも少なすぎる方が好ましいとされています。一部のツールでは、例えば、あるスクリプトが外部ソースから読み込まれ、別のスクリプトがそのスクリプトにアクセスした場合、表示や機能に問題が発生する可能性があります。プロバイダが、この「遅延」スクリプトが読み込まれた後にのみ、別のスクリプトが最初のスクリプトにアクセスすることを保証していない場合、ツールは期待どおりに動作しません。

コードエディター

CSS、JavaScript、HTMLコードはコードエディターから編集できます。ウェブサイトビルダーの右下にある 「<> コード」 をクリックするとコードエディターが表示されます。また、キーボードショートカットの[Ctrl] + [Alt] + [C]でもコードエディターを開くことができます。

コードエディター

ここから、 CSS、JavaScript、HTML メール、構成、ボイラープレート などの他のタブにもアクセスできます。

エラーのないカスタムコードは、ウェブサイトを完璧に機能させるのに役立ちます。デバッガーやテストツールなどの外部ツールを使用して、コードが期待どおりに動作することを確認してください。

基本構成

「設定」 はコードエディタのタブです。ここでは、色、フォントサイズ、機能などの変数を定義してウェブサイトを設定できます。ウェブサイトで使用されるすべてのセクションテンプレートは、「ミックスイン」と呼ばれる形式で提供されます。ウェブサイトビルダーはこれらのミックスインを自動的に 「設定」 タブに挿入します。これにより、最初のセクションテンプレートを挿入した後で、CSSプロパティを調整できます。ウェブサイトビルダーでセクションテンプレートを削除しても、埋め込まれたCSSまたはJavaScriptコードは自動的に削除されないことに注意してください。

定型句（読み取り専用）

すべての標準コードはボイラープレートに保存されます。ボイラープレートはウェブサイトに自動的に統合され、他の場所でも使用できます。ウェブサイトの内部構造を確認したいですか？ボイラープレートはまさにそのための場所です。また、コードエディターの「ボイラープレート」タブでもコードを表示できます。ここでは、すべてのセクションテンプレート変数、特定の要素のデフォルト値、特定のデザインプロパティとエフェクトを確認できます。これらの変数を他の要素と組み合わせてデザインに使用することで、統一感があり、プロフェッショナルで、メンテナンスしやすいデザインを作成できます。

(S)CSS

Website Builder には、Web サイトを自由にカスタマイズできる強力な (S)CSS エディタが備わっています。

CSSタブが事前に選択されていない場合は、それをクリックしてすべての CSS コードを表示および編集できます。

ここで、独自のクラスや既存の標準クラス (例: 「.ed-button」) に適切なデザインプロパティを割り当てることができます。

デフォルトでは、各クラスのコードは「折りたたまれて」おり、表示されません。これは、スペースを節約し、全体像を把握しやすくするためです。エディターフィールドの左側にある行番号の横にある小さな矢印をクリックすると、クラスが「展開」され、すべてのプロパティが表示されます。

コードエディター

ここで独自のCSSスタイルを追加し、ウェブサイトに適用できます。セクションテンプレートを使用している場合は、ここに記録され、それぞれのセクションにオーバーライドを追加できます。 「ボイラプレート」 タブまたは 「構成」 タブで定義されているすべての変数を使用できます。

ウェブサイトビルダーはCSSコードも理解します。サイト上の要素に適用されているCSSルールを確認するには、要素を選択して[Ctrl] + [Alt] + [C]を同時に押します。CSSエディターが開き、選択した要素に適用される行がハイライト表示されます。

また、 「最適化」 ボタンを使用して、未使用のルールを見つけてコードをクリーンアップすることもできます。

「ファイルの貼り付け」 からファイル内の CSS/JS ファイルを使用することもできます。

カラーピッカー をクリックすると、システムのカラー選択ウィンドウから希望の色を選択できます。これにより、希望する色の適切な値を簡単に見つけたり、例えばMacやLinuxシステムでは画面上の任意の場所から色を選択したりできるようになります。

IDとクラスの使用

コード内の要素はさまざまな方法で指定できます。

各要素には固有のIDがあります。IDは常に #ed-xxxxxx 形式です。要素のプロパティで確認でき、以下の方法でアクセスできます。

要素をダブルクリックして スタイル タブに切り替えます
要素を選択し、[ENTER]を押して スタイル タブに切り替えます

ID は左側の設定パネルの一番上に直接表示されます。

要素ID

スタイル > 要素 > ID&クラス セクションにあります。

要素ID2

<div>要素のIDは変更できません。ただし、サブ要素にIDを割り当てることは可能です。

クラス

クラスは、要素をカスタマイズおよび設計するための最も便利な方法です。また、他の開発者やデザイナーが理解しやすく、他のプロジェクトでも再利用できるコードを作成する手段も提供します。

要素にクラスを割り当てるには、次の手順に従います。

上記のいずれかの方法で要素設定を開きます。
「要素」 タブの 「ID&クラス」 には、この要素に割り当てられている個々のクラスが表示されます。あらかじめ選択されている要素はコンテナ要素（この図では<div>要素）です。ただし、それぞれのタブをクリックすることで、この要素の子要素をカスタマイズすることもできます。例えば、ここでは「ボタン(a)」をクリックして、ボタンのリンク要素をカスタマイズできます。
各要素に複数のクラスを割り当てることで、CSSコードでより高度な仕様を実現できます。詳細については、 CSSクラスに関するこちらの記事をご覧ください。

コードエディター

CSSクラスでは、スペースで区切ることで、必要な数のクラスを追加できます。

ID

IDを用いて特定の要素をデザインすることで、クラスよりも詳細なデザイン選択が可能になります。クラスは複数の要素にデザインプロパティを提供しますが、IDは特定の要素にのみ適用されます。そのため、IDの特別なデフォルト設定は、クラスの一般的なデフォルト設定をオーバーライドします。

例：ボタン要素には <div> 要素と <a> 要素が含まれています。<div> 要素は <a> 要素を囲んでいるため、親要素となります。この例では、<div> 要素に ID #ed-1234567 とデフォルトのクラス .ed-button が割り当てられています。クラス .ed-button と ID #ed-1234567 に異なるデザインのデフォルト設定を追加すると、ID の CSS プロパティが常にクラスの CSS プロパティを上書きします。

特にアニメーションの場合、アニメーションは通常特定の要素を参照するため、ID は役立ちます。

IDは特定のプロジェクトに自動的に割り当てられます。既存のCSSコードを別のプロジェクトにコピーしても、使用されているIDはこのプロジェクトには適用されないため、効果はありません。このような場合は、クラスを使用してください。

IDをコピーするには、要素を右クリックし、 「要素IDをコピー」 を選択します。[Ctrl] + [I]キーを押しても同様の操作が可能です。

コードエディター

HTML

HTML コードを直接挿入するには、次の 2 つのオプションがあります。

HTML要素 の使用
コードエディタ の使用

HTML要素

この HTML要素 は、サードパーティプロバイダーの特定のモジュールやツールを統合するのに適しています。以下の手順でドラッグ＆ドロップすることで、ページに埋め込むことができます。

左側のサイドバーの 「要素」 カテゴリをクリックします
これにより、 HTML を選択して、追加のHTML要素を含めたい場所にドラッグできるパネルが開きます。

エディター内のHTML

以下をクリックするとコードエディターにアクセスできます。

< >ウェブサイトビルダーの右下隅にあるコード
次に HTML タブをクリックします

通常、ここにはプレースホルダー {{content}} のみが表示されます（ただし、ここに自分で追加コードを挿入した場合は除きます）。ここに保存されたすべての内容がウェブサイトに表示されます。プレースホルダー {{content}} は、ウェブサイトビルダーを使用して管理できるコンテンツ全体、つまり編集、移動、追加、削除できるすべての要素を表します。必要に応じて、このプレースホルダーの周囲に独自のHTMLまたはサードパーティのHTMLを追加できます。現時点では、ウェブサイトに既に存在するHTMLを編集して、既存の構造が正しく機能しているかどうかを確認することはできません。

JavaScript

HTML要素を使用して、<script>タグにJavaScriptを含めることもできます。ただし、これらの要素はウェブサイトビルダーでは実行されません。効果を確認するには、プレビューウェブサイトに切り替える必要があります。プレビューウェブサイトでは、保存後の現在のウェブサイトが新しいタブで開きます。プレビューウェブサイトを開くには、目のアイコンをクリックし、 「プレビューウェブサイトを開く」 を選択してください。

コードエディター も利用可能なオプションです。「エディターのHTML」セクションの 「JavaScript」 タブで説明されている方法でアクセスできます。広く使用されているJavaScriptライブラリであるjQueryは、すべてのウェブサイトに自動的に統合されているため、JavaScriptで使用できます。コードエディターで使用されるコードはグローバルであるため、すべてのページで実行されます。

ピクセル、トラッキングコードなど

ピクセルは、広告目的でデータを収集するために使用されます。ピクセルはJavaScriptコードです。最もよく知られているピクセルは、GoogleとFacebookのものです。通常、検索エンジンとマーケティングの最適化に使用され、ウェブサイトの<head>領域に挿入されます。

ウェブサイトの <head> 領域にコードを挿入するには、 [詳細] > [SEO] に移動します。

コードエディター

ここでは、ウェブサイトに関するすべての関連メタ情報を入力できます。タイトル、キーワード、簡単な説明などです。

ウェブサイトの <head> 領域に挿入されるトラッキングコードには、 「メタタグ」 というフィールドを使用できます。

Google アナリティクスを使用するには、 GoogleアナリティクスID フィールドにトラッキング ID を挿入するだけで十分です。

それぞれのダッシュボードから TRACKING_ID (または Facebook の Pixel ID) を取得し、それに応じてプライバシーポリシーを完成させてください。

他のツール用に追加のコードが必要な場合は、 メタタグ の下に挿入することもできます。通常は<meta>タグを挿入しますが、<script>タグも使用できます。

終了タグの直前にコードを配置する場合は、 HTMLタブ の「{{content}}」の下のエディターの HTML<body>セクションの説明に従って挿入することをお勧めします。

例えば、Google タグマネージャーには 2 種類のコードがあります。1 つは「メタタグ」セクションに実装されるヘッダーセクション用です。もう 1 つのスニペットは、開始 <body> タグの直後に貼り付ける必要があります（コードエディタを開き、HTML に切り替えて、そこにコードを挿入します）。詳細については、Googleのクイックガイドをご覧ください。

コードをきれいに保つ

コードエディタでコードを素早く追加しようとすると、混乱してしまうことがあります。[Ctrl] + [I] キーを押すだけで、アクティブウィンドウ内のすべてのコードが自動的にフォーマットされます。これはCSS、JS、HTMLで使用できます。これにより、コード内の個々の領域、変数、そしてそれらの定義を把握しやすくなります。

Emmet

Emmetは、HTMLとCSSのワークフローを改善するために使用できる、様々なテキストエディタやコードエディタ用のプラグインです。Emmetの知識がなくても、素晴らしいウェブサイトをあっという間に作成できます。しかし、Emmetには、ここで触れずにはいられないメリットがいくつかあります。

たとえば、略語を使用すると多くの時間を節約できますが、これは自分で大量のコードを作成し、HTML および CSS コードの書き方を既に知っている場合にのみ意味があります。

ウェブサイトビルダーはEmmet対応なので、Emmetを最大限に活用できます。対応するエディタウィンドウで[Tab]キーを押すことで、Emmetを利用できます。

Emmet をご存知ない方でも、カスタムコードをたくさん書く方はぜひ試してみてください。いくつか例を挙げてみましょう。

CSS の場合:

m0 -> [TAB] -> マージン: 0;
p1 -> [TAB] -> パディング: 1px;
h80px -> [TAB] -> 高さ: 80px;
c#333 -> [TAB] -> 色: #333;
fs -> [TAB] -> フォントサイズ: ;
!-> !重要;

HTML の場合:

ul>li.test*3 -> [TAB] ->
<ul>
<li class="test"></li>
<li class="test"></li>
<li class="test"></li>
</ul><br>

完全なドキュメントは、こちらでご覧いただけます: http://emmet.io/