ページのHTML基本構造とレイアウトを調整する
新しく作成されたページは、最初にbluetronix CMSの標準レイアウトを使用します。このチュートリアルでは、このHTML基本構造がどのように構築されているか、独自のレイアウトを定義する方法、そしてこれらを個々のページに割り当てる方法を学ぶことができます。
新しいページの標準レイアウト
新しく作成されたページは、bluetronix CMSで自動的に標準レイアウトを使用します。このレイアウトは、あなたのウェブサイトのコンテンツが表示されるHTMLの基本構造を形成します。
標準レイアウトでは、たとえば自動的にヘッダーとフッターが組み込まれます。また、チャットボタンのようなその他の要素もこの基本構造の一部となることがあります。
特定の要素を表示しない場合や、独自の要素をレイアウトに標準で統合したい場合は、HTMLの基本構造を調整できます。
HTML基本構造を開く
レイアウト ⯈ レイアウト-Htmlを開きます。
そこには既存のHTML基本構造およびレイアウト定義が表示されています。
最初のエントリは標準レイアウトです。このレイアウトは、新しいHTMLページに標準で使用されます。
標準レイアウトの構築
<!DOCTYPE html>
<html class="wide wow-animation" data-bs-theme="__DB_GB_HTMLDarkMode__" lang="__DB_WebSiteLang__">
<head>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
__DB_HeadTitle__
<link rel="icon" href="/img/favicon.ico" type="image/x-icon">
<script src="__FV_/bx_script/BxHeadScript_own_min.js__"></script>
<link rel="stylesheet" href="__FV_/bx_style/BxStyle_own_min.css__">
</head>
<body>
__DB_Layout_/bx_Header.html__
<main>
__DB_Layout_Main__
</main>
__DB_Layout_/bx_Footer.html__
<script src="__FV_/bx_script/BxScript_own_min.js__"></script>
</body>
</html>標準レイアウトでは、ヘッダーとフッターが自動的に組み込まれます。
HTMLページの実際のコンテンツは、メインセクション内またはマーク__DB_Layout_Main__内に挿入されます。
さらに、bluetronix CMSは自動的にさまざまな値やマークを設定します。これには、Bootstrapのダークモード、言語、ウェブサイトのタイトルなどが含まれます。
必要なbluetronixスクリプトも自動的に実行されます。
シングルページレイアウト
標準レイアウトに加えて、シングルページレイアウトも利用可能です。
このレイアウトは通常の標準レイアウトとは異なります。チャットボタンやクッキー通知などが表示されない場合があります。
これにより特定のページに異なる基本構造を使用でき、他のページの標準レイアウトを変更する必要がありません。
独自のレイアウトを作成する
独自のレイアウトエントリを作成し、自分のHTML基本構造を定義することもできます。
この例では、テストレイアウトという名前の独自のレイアウトエントリを作成します。
このレイアウト内で、ページに標準で組み込まれるべき要素を決定できます。
ページ用のレイアウトを選択する
定義したレイアウトは、後で直接HTMLページに割り当てることができます。
そのためにエディタを開き、ページ設定に進みます。
レイアウト選択をタップします。そこには既存のレイアウト定義が表示されます。
また、テストレイアウトのような自分で作成したレイアウトも選択可能です。
ページのレイアウトを変更する
希望するレイアウトを選択し、次に保存をタップします。
その後、ページは選択したレイアウトの基本構造を使用します。
この方法で、異なるページに異なる基本構造を使用し、各ページに表示する一般的な要素を設定できます。
要約
レイアウトは、bluetronix CMSのページの基本的なHTML構造を決定します。新しいページはまずデフォルトのレイアウトを使用します。
レイアウト ⯈ レイアウト-Htmlを介して、既存のレイアウトを確認し、自分のレイアウト定義を作成できます。その後、ページ設定 ⯈ レイアウトを介して希望するレイアウトを選択し、保存をクリックして反映させます。
FAQ
お客様からよくある質問
新しく作成されたページはどのレイアウトを使用しますか？
新しく作成されたHTMLページは、自動的にbluetronix CMSのデフォルトレイアウトを使用します。
既存のHTMLレイアウトはどこにありますか？
レイアウト ⯈ レイアウト-Htmlを開いてください。そこで、既存のレイアウト定義を見つけることができます。
デフォルトレイアウトにはどのような要素が自動的に含まれますか？
デフォルトレイアウトを通じて、ヘッダー、フッター、チャットボタンなどの一般的な要素を含めることができます。
HTMLページの実際の内容はどこに挿入されますか？
ページの内容は、メインエリア内またはDBレイアウトメインマーク内にレイアウトとして挿入されます。
レイアウトシングルページとは何ですか？
シングルページは代替のレイアウト定義です。ここでは、チャットボタンやクッキー通知を表示しないことができます。
独自のレイアウトを作成できますか？
はい。独自のレイアウトエントリを作成し、自分のHTML基本構造を定義できます。
ページに別のレイアウトを割り当てるにはどうすればよいですか？
エディタを開き、ページ設定に進み、希望するレイアウトを選択してから保存をタップします。
自作のレイアウトもエディタに表示されますか？
はい。チュートリアルで作成されたテストレイアウトなど、自分のレイアウト定義もレイアウト選択に表示されます。