クレイCSSをテーマにインポートする

ご覧のページは、お客様の利便性のために一部機械翻訳されています。また、ドキュメントは頻繁に更新が加えられており、翻訳は未完成の部分が含まれることをご了承ください。最新情報は都度公開されておりますため、必ず英語版をご参照ください。翻訳に問題がある場合は、こちらまでご連絡ください。

クレイCSSをテーマにインポートする

Clay CSSは、Bootstrapと@ <product@>特定のニーズとの間のギャップを埋め<product@> 。ブートストラップ機能が拡張され、より多くのユースケースに対応しました。 Clay CSSによって追加された新しいコンポーネントの一部を次に示します。

アスペクト比
カード
ドロップダウンワイドとドロップダウンフル
フィギュア
ネームプレート
サイドバー/サイドナブ
ステッカー
SVGアイコン
タイムライン
トグル

次のような時間のかかるタスクを達成するために、いくつかの再利用可能なCSSパターンも追加されました。

テキストの切り捨て
コンテナの残りの幅を埋めるコンテンツ
テーブルセル内のテキストの切り捨て
残りのコンテナ幅を埋めるテーブルセルとコンテンツと同じ幅のテーブルセル
折りたたみパネル内のアイコンの開閉
ネストされた垂直ナビゲーション
スライドアウトパネル
通知アイコン/メッセージ
コンテンツの垂直方向の配置

次に、クレイの構造について詳しく学ぶことができます。

粘土CSS構造

Clay CSS は、 Clay Base と Atlas

つのサブテーマがバンドルされています。 Clay BaseはLiferay DXPのBootstrap API拡張です。必要なすべての機能とコンポーネントが追加され、Bootstrapのスタイルが継承されます。その結果、Clay Baseは、BootstrapのSass変数APIを活用するサードパーティテーマと完全に互換性があります。

Atlasは、クラシックテーマで使用されるLiferay DXPのカスタムブートストラップテーマです。その目的は、BootstrapとClay Baseを上書きおよび操作して、クラシックなルックアンドフィールを作成することです。 Atlasは、Bootstrapサードパーティテーマをインストールするのと同等です。

次に、Atlasテーマをカスタマイズする方法を学習できます。

Liferay DXPでAtlasをカスタマイズする

すべてのクラシックテーマのファイルを含める場合は、これらの手順をスキップして次のセクションに進むことができます。

Atlasテーマをカスタマイズするには、次の手順に従います。

テーマの / src / css ディレクトリ（レガシーantテーマの場合、 / _diff / css）に、以下のコードを含む clay.scss という名前のファイルを追加して保存します。
```
@import "clay/atlas";
```
以下のコードで _imports.scss という名前のファイルを追加して保存します。
```
@import "bourbon";
@import "mixins";
@import "clay/atlas-variables";
```
font_awesome.scss という名前のファイルを追加し、font-awesomeパスを追加してインポートします。
```
// Icon paths

$FontAwesomePath: "font-awesome/font";

@import "font-awesome/scss/font-awesome";
```
_clay_variables.scssという名前のファイルを追加します。すべてのAtlas、Bootstrap、およびClay Base変数の変更は、このファイルに配置する必要があります。

以下のコードで _custom.scss という名前のファイルを追加して保存します。

/* Use these inject tags to dynamically create imports for 
themelet styles. You can place them where ever you like in this file. */

/* inject:imports */
/* endinject */

/* This file allows you to override default styles in one central 
location for easier upgrade and maintenance. */

このファイルにカスタムCSSを配置します。次に、Classicテーマを使用してAtlasを拡張する方法を学習できます。

クラシックテーマを使用したAtlasの拡張

AtlasテーマをClassicテーマで拡張するには、これらのディレクトリにあるすべてのファイルをテーマにコピーします。

frontend-theme-classic/src/css
frontend-theme-classic/src/images
frontend-theme-classic/src/js
frontend-theme-classic/src/templates

また、自動的にできるあなたのテーマにこれらのファイルをコピーする使用して 一気のキックスタート コマンドをし、画面の指示に従います。

次に、粘土ベースのカスタマイズ方法を学習できます。

粘土ベースのカスタマイズ

わずか数回のインポートでクレイベースをカスタマイズできます。

カスタムテーマの / src / css フォルダー（レガシーantテーマ： / _diff / css）に、 font_awesome.scss という名前のファイルを以下のコードとともに追加して保存します。

// Icon paths

    $FontAwesomePath: "font-awesome/font";

    @import "font-awesome/scss/font-awesome";

次に、同じフォルダーに _clay_variables.scssという名前のファイルを追加します。すべてのAtlas、Bootstrap、およびClay Base変数の変更は、このファイルに配置する必要があります。

前述のように、カスタムCSSは _custom.scss配置する必要があります。

これで、テーマでClay CSSを使用する方法がわかりました。

ヘルプセンター

製品

リソース

セキュリティ

サポート

ドキュメンテーション

クレイCSSをテーマにインポートする

クレイCSSをテーマにインポートする

粘土CSS構造

Liferay DXPでAtlasをカスタマイズする

クラシックテーマを使用したAtlasの拡張

粘土ベースのカスタマイズ

関連トピック