Bootstrap-5レイアウトをインポートする

Name: Website builder App
Brand: bluetronix
Rating: 4.7 (833 reviews)

Bootstrap-5の確認、ZIPファイルから自動処理、エディタでのインポートされたレイアウトの確認まで、完全なレイアウトインポートを学びます。

チュートリアルの目的 1. インポート - レイアウトを開く 2. ZIPファイルを選択する 3. フォルダー bx_Import を開く 4. Layout.zip をアップロードする 5. Bootstrap-5-レイアウトの前提条件 6. インポート手順を確認する 7. インポートを開始する 8. 成功したインポートを確認する 9. ウェブサイトで新しいレイアウトを確認する 10. インポートした画像を確認する 11. レイアウトHTMLを確認する 12. インポートしたCSSおよびJavaScriptファイルを確認する 13. エディターでの編集可能性をテストする 14. 作成されたセクションテンプレートを確認する 15. 最終確認 FAQ

チュートリアルの目的

Bootstrap-5-レイアウトをZIPファイルとしてbluetronix CMSにインポートする方法、インポートを確認し、その後レイアウト画像、レイアウトHTML、CSS/JS、作成されたセクションテンプレートを確認する方法を学びます。

重要： インポートには、以下に示す前提条件を満たしたBootstrap-5-レイアウトを使用してください。実際のインポートには最大15分かかる場合があります。

1. インポート - レイアウトを開く

CMSでレイアウトセクションを開き、その後インポート - レイアウトを選択します。

2. ZIPファイルを選択する

ウィンドウインポート - レイアウトで、ZIPファイルを選択をクリックします。この機能を使用してファイルマネージャーを開き、Bootstrap-5-レイアウトのZIPファイルを選択できます。

Layout-Menü im bluetronix CMS mit der Funktion Import - Layout

さらに、テーマ画像が利用可能で、元の画像を再利用しない場合にレイアウト画像の代わりに使用できます。

3. フォルダー bx_Import を開く

ファイルマネージャーで、次にbx_Importフォルダーを開きます。このフォルダーは、インポートするZIPファイルを提供するために使用されます。

Import - Layout mit der Funktion ZIP-Datei auswählen

4. Layout.zip をアップロードする

今、自分のZIPファイルをbx_Importフォルダーにアップロードします。私たちの例では、ファイル名はLayout.zipです。その後、このファイルをレイアウトインポートのために選択します。

Ordner bx_Import mit der hochgeladenen ZIP-Datei Layout.zip

5. Bootstrap-5-レイアウトの前提条件

CMSは、インポート前にZIPアーカイブ内に適切なBootstrap-5構造が存在するかを確認します。完全な前提条件とサポートされているファイル拡張子は、次の技術的概要で確認できます。

Detecting and Importing a Bootstrap Layout

When importing a layout, the system first checks whether it is a valid Bootstrap layout.

1. Detecting a Bootstrap Layout

For a layout to be recognized and imported as a Bootstrap layout, two requirements must be met:

1. A Bootstrap CSS file must be present.
2. An index.html or index.htm file must exist at the corresponding directory level.

The following files, for example, are recognized as Bootstrap files:

bootstrap.css
bootstrap.min.css
bootstrap-grid.css
bootstrap-grid.min.css
bootstrap-reboot.css
bootstrap-*.css

In general, the system searches for a file whose name matches the following pattern:

bootstrap***.css

The file must belong to Bootstrap version 5.

Example 1

/index.html
/assets/css/bootstrap.min.css

The layout is recognized. The index.html file is located at the root level, while the Bootstrap file is located in:

/assets/css/

Example 2

/index.html
/assets/css/bootstrap.css

This layout is also recognized.

Example 3

/index.html
/css/bootstrap.min.css

A Bootstrap file located in the /css/ directory is also recognized.

Important:
Once a matching index.html or index.htm file and a Bootstrap CSS file have been found, that directory level is used as the starting point of the layout. From this level onward, the required files are extracted from the ZIP archive and processed.

2. Which Files Are Imported?

During the import process, only supported file types are included.

HTML Files
.html
.htm

JavaScript and CSS Files
.js
.mjs
.css

Fonts
.woff
.woff2
.ttf
.otf
.eot

Images and Graphics
.svg
.jpg
.jpeg
.jpg
.webp
.avif
.gif
.ico

Video Files
.mp4
.webm

Audio Files
.mp3
.ogg
.wav

Data Files
.json

Documents
.pdf

All other file extensions are excluded from the layout import process.

6. インポート手順を確認する

ZIPファイルを選択した後、CMSはテーマ画像の下にインポート中に実行される各ステップを表示します。インポートを開始する前に、この概要を確認してください。

Übersicht der sieben Schritte des Bootstrap-5-Layout-Imports

インポートは、表示されたバージョンで以下の手順を含みます:

Layout einlesen: ZIP-Datei entpacken und auf ein gültiges Bootstrap-5-Layout prüfen.
HTML-Grundgerüst extrahieren: Standard-Layout in der Datenbank 00_layout erstellen.
Kopfzeile / Fußzeile extrahieren: Header und Footer ermitteln und /bx_Header.html sowie /bx_Footer.html neu erstellen.
index.html aus Layout erstellen: Inhalt der Startseite ermitteln und /index.html neu erstellen.
Seiten-Abschnitte extrahieren: Header, Main-Sections und Footer als Layout-Section-Dateien erzeugen.
Bilder ersetzen: Layout-Bilder bei Bedarf durch CMS-Themenbilder ersetzen.
CSS / JS importieren: gefundene CSS- und JS-Dateien in den Main-Ordner übernehmen.

7. インポートを開始する

インポートをクリックします。CMSは、インポートに最大15分かかる可能性があり、その間ウィンドウを閉じてはいけないことを示します。

Bestätigung vor dem Layout-Import mit Hinweis auf eine mögliche Dauer von bis zu 15 Minuten

OKをクリックして通知を確認してください。その後、レイアウトのインポートが開始されます。

8. 成功したインポートを確認する

インポートが完了すると、最初にレイアウトが成功裏にインポートされたことを示すメッセージが表示されます。

Meldung dass das Layout erfolgreich importiert wurde

その後、すべての個別処理ステップが成功裏に完了したか確認できます。成功したステップは緑色でマークされます。

Erfolgreich abgeschlossene Import-Schritte mit grüner Markierung

9. ウェブサイトで新しいレイアウトを確認する

インポートウィンドウを閉じて、ウェブサイトのホームページに戻ります。インポート直後は、以前の表示がまだ見えるかもしれません。

Webseite vor dem erneuten Laden nach dem Layout-Import

必要に応じて再読み込みをクリックします。その後、インポートされたレイアウトが表示されるはずです。表示をインポートしたい元のレイアウトと比較してください。

Importiertes Bootstrap-5-Layout nach dem Reload der Webseite

10. インポートした画像を確認する

次にレイアウト → インポート - 画像を開きます。そこで、インポートされたレイアウトからどの画像が引き継がれ、どの画像がテーマ画像に置き換えられるかを確認できます。

Layout-Menü mit der Funktion Import - Bilder

CMSは、ライセンスまたは出典に関する情報が欠如している画像を表示します。これらの注意を慎重に確認し、画像の再利用が許可されるか、適切なテーマ画像に置き換えるべきかを決定してください。

Layout-Bilder mit Hinweisen auf fehlende Lizenz- und Quellenangaben

既存のオリジナル画像を使用したくない場合は、適切なテーマ画像を選択するか、自分のテーマ画像を作成できます。置き換え後は、レイアウトを再度視覚的に確認する必要があります。

11. レイアウトHTMLを確認する

レイアウトの下でレイアウト - HTMLを開きます。そこで、インポートから生成されたHTMLの基本構造を確認できます。

Layout-Menü mit der Funktion Layout - HTML

レイアウトデータベースでは、インポートされたHTMLコードが表示されます。ここで、基本構造が全て存在し、必要なCMSマークがレイアウトに取り込まれているかを特に確認してください。

Importierter HTML-Code im Layout-Datensatz 00_layout

12. インポートしたCSSおよびJavaScriptファイルを確認する

次にレイアウト → インポート - CSS JSを開きます。

Layout-Menü mit der Funktion Import - CSS JS

ここで、インポート時に認識されたCSS、JavaScript、およびその他のリソースが表示されます。リソースが外部ソースとしてマークされている場合、それはインポートされたレイアウトからのみローカルに読み込まれません。これらの外部リンクは公開前に慎重に確認し、適切に対処してください。

Import-CSS-JS-Ansicht mit einer als Externe Quellen markierten Ressource

13. エディターでの編集可能性をテストする

インポートされたページをエディタで開き、コンテンツが意図通りに編集できるかどうか確認します。特にテキスト、リンク、画像、および繰り返し可能な領域をテストしてください。

Importiertes Layout im bluetronix Editor mit bearbeitbarem Seitenbereich

14. 作成されたセクションテンプレートを確認する

エディタで挿入 → ページセクションを開きます。インポートは、元のレイアウトから追加のテンプレートカテゴリを生成します。これにはレイアウト-ヘッダー、レイアウト-メイン、およびレイアウト-フッターが含まれます。

Auswahl der Seitenabschnittskategorien mit Layout-Header, Layout-Main und Layout-Footer

たとえばレイアウト-メインを選択すると、元のレイアウトから抽出されたメインセクションが個々のテンプレートとして表示されます。これを後でページに自由に挿入し、修正することができます。

Seitenabschnittsauswahl Layout-Main mit aus dem importierten Layout erzeugten Sections

15. 最終確認

インポート後は、結果を完全に確認するべきです：レイアウト表示、画像、HTML、CSS/JS、外部リソース、編集可能性、および生成されたページセクションテンプレート。これらのチェックが完了してから、インポートしたレイアウトの内容調整を始めるべきです。

FAQ

お客様からよくある質問

どのレイアウトをインポートできますか？

インポートはBootstrap 5レイアウトに対応しています。CMSは、対応するフォルダーレベルに適したBootstrap CSSファイルおよびindex.htmlまたはindex.htmを探します。

レイアウトインポートをどこから始めますか？

CMSのレイアウトセクションを開き、インポート - レイアウトを選択します。

ZIPファイルはどのフォルダに取り込まれますか？

選択したレイアウトZIPファイルは、開発者領域bx_Importで使用されます。

どのBootstrapファイルが認識されますか？

認識されるBootstrap CSSファイルには、bootstrap.css、bootstrap.min.css、およびbootstrap***.cssのスキーマに従った他のファイルが含まれます。このチュートリアルはBootstrap 5である必要があります。

どのファイルタイプがインポートされますか？

チュートリアルで紹介されているHTML、CSS、JavaScript、フォント、画像、動画、音声、JSON、PDFファイル形式がインポートされます。その他のファイル拡張子は対応していません。

インポートにはどのくらいの時間がかかりますか？

表示されるヒントには、最大15分の可能性が示されています。この間、インポートウィンドウを閉じてはいけません。

成功したインポートはどのように確認できますか？

各インポートステップが緑色にマークされ、レイアウトが正常にインポートされた旨のメッセージが表示されます。

インポート後に古いレイアウトが表示された場合はどうすればよいですか？

ホームページに戻り、必要に応じて再読み込みを使用してください。その後、新しくインポートされたレイアウトが表示されるはずです。

インポートされた画像はどこで確認できますか？

レイアウト → インポート - 画像を開いてください。そこでオリジナル画像、テーマ画像、およびライセンスと出所の情報を確認できます。

インポートされたHTMLコードはどこで確認できますか？

レイアウト → レイアウト - HTMLの下に作成されたHTMLの基本構造を確認できます。

CSSやJavaScriptリソースはどこで確認できますか？

レイアウト → インポート - CSS JSを開いてください。そこでインポート時に認識されたリソースと外部ソースに関するヒントを見ることができます。

レイアウトから生成されるページセクションのテンプレートは何ですか？

インポートはレイアウトヘッダー、レイアウトメイン、レイアウトフッターのカテゴリにテンプレートを提供します。

インポート後に何を最終的にテストすべきですか？

レイアウトの表示、画像、HTML、CSS/JS、外部リソース、エディタ内での編集の可否、生成されたページセクションテンプレートを確認してください。