2022年2月4日

AdminLTEをビジネスに合わせてカスタマイズ・ダウンサイズする方法

AdminLTEは現在、世界中で数万人のユーザーに利用されています。
AdminLTEが、ビジネスの他の部分のデザインと一致するように、
元のデザインを簡単にリブランドおよびカスタマイズできる方法を提供することは重要です。
幸いなことに、AdminLTEの外観を他の実装とは大きく異なるものにするのは非常に簡単です。
この記事では、これらの機能を利用して、フレームワーク全体の
色を変更し、ファイルを削除せずに不要なコードを削除する方法を学びます。
LESS変数とインポートを使用して、目標を達成します。
目標を達成します。

LESS

LESSフレームワークは、変数や関数を使用したり、他のファイルをインポートしたりできる優れたCSSプリプロセッシングツールです。
LESSに馴染みがない場合は、ドキュメントをご覧ください。
機能の詳細を理解してください。CSSに慣れている方なら、LESSの学習に30分以上かかることはないでしょう。
機能の詳細を理解してください。CSSに慣れている方なら、LESSの学習に30分以上かかることはないでしょう。
LESSのコンパイル

LESSを使用するためには、LESSコードを純粋なCSSにコンパイルする方法を学ぶ必要があります。

これを行う1つの方法は、Windows、Mac、Linuxで動作するKoalaなどのグラフィカルツールを使用することです。
これを行う1つの方法は、Windows、Mac、Linuxで動作するKoalaなどのグラフィカルツールを使用することです。
しかし、これは私の好きなオプションではありません。私は、コマンドラインからJavaScriptタスクを実行するJSフレームワークであるGruntを使用することを好みます。
しかし、これは私の好きなオプションではありません。私は、コマンドラインからJavaScriptタスクを実行するJSフレームワークであるGruntを使用することを好みます。
このチュートリアルでは、AdminLTEにはGruntの設定が用意されているため、Gruntを使用します。Windowsユーザーの場合は、
このチュートリアルでは、AdminLTEにはGruntの設定が用意されているため、Gruntを使用します。Windowsユーザーの場合は、
この質問
を参照して、起動してください。他のユーザーは、通常のインストール手順
を参照して、起動してください。他のユーザーは、通常のインストール手順
に従ってGruntをインストールして使用すれば問題ありません。
AdminLTEのリブランド

リブランドとは、テンプレートの色をビジネス全体の色と一致するように変更することを意味します。

始める前に、AdminLTEの新しいコピーをダウンロードしてください。
始める前に、AdminLTEの新しいコピーをダウンロードしてください。
メインフォルダーに、LESSファイルが含まれているbuild/lessフォルダーがあります。カスタマイズする必要があるファイルは、variables.lessと
メインフォルダーに、LESSファイルが含まれているbuild/lessフォルダーがあります。カスタマイズする必要があるファイルは、variables.lessと
AdminLTE.lessのみです。.

Gruntの準備

GruntとAdminLTEの両方が用意できたので、AdminLTEのメインディレクトリでインストールコマンドを実行する必要があります。
GruntとAdminLTEの両方が用意できたので、AdminLTEのメインディレクトリでインストールコマンドを実行する必要があります。

sudo npm install

上記のコマンドは、AdminLTEの機能を開発するために必要なすべての依存関係をインストールします。
また、不足しているものや更新が必要なものがある場合は警告が表示されます。
これからは、Gruntはファイルの変更を監視し、lessファイルをCSSにコンパイルし、
純粋なCSSファイルを圧縮してサイズを最小限に抑えます。これらすべてを最小限の労力で行います！

色の選択とAdminLTEのカスタマイズ

これで、ダッシュボードの新しい色を選択する準備が整いました。Coolorsは、
これで、ダッシュボードの新しい色を選択する準備が整いました。Coolorsは、
素敵なカラーパレットを入手するのに良い情報源であることがわかりました。次のカラーパレットを選択しました。
素敵なカラーパレットを入手するのに良い情報源であることがわかりました。次のカラーパレットを選択しました。

お気に入りのコードエディターでvariables.lessを開きます。このファイルには、
カスタマイズした場合にAdminLTEの外観を大きく変更する可能性のあるあらゆる種類の変数があります。したがって、ファイルを調べてカスタマイズできるものを確認してください。
カスタマイズした場合にAdminLTEの外観を大きく変更する可能性のあるあらゆる種類の変数があります。したがって、ファイルを調べてカスタマイズできるものを確認してください。
ここでは、色のセクションに関心があります。以下はセクションの外観です。
ここでは、色のセクションに関心があります。以下はセクションの外観です。

//COLORS
//--------------------------------------------------------
//Primary
@light-blue: #3c8dbc;
//Danger
@red: #dd4b39;
//Success
@green: #00a65a;
//Info
@aqua: #00c0ef;
//Warning
@yellow: #f39c12;
        
@blue: #0073b7;
@navy: #001F3F;
@teal: #39CCCC;
@olive: #3D9970;
@lime: #01FF70;
@orange: #FF851B;
@fuchsia: #F012BE;
@purple: #605ca8;
@maroon: #D81B60;
@black: #111;
@gray: #d2d6de;

ブランドカラーは、リストの最初の5色です。残りは、特定の要素を強調するために使用できる色のみです。
したがって、これらの値を新しいカラーパレットに置き換えましょう。以下は、変更後の私の外観です。
したがって、これらの値を新しいカラーパレットに置き換えましょう。以下は、変更後の私の外観です。

//COLORS
//--------------------------------------------------------
//Primary
@light-blue: #FA7921;
//Danger
@red: #E55934;
//Success
@green: #9BC53D;
//Info
@aqua: #5BC0EB;
//Warning
@yellow: #FDE74C;

@blue: #0073b7;
@navy: #001F3F;
@teal: #39CCCC;
@olive: #3D9970;
@lime: #01FF70;
@orange: #FF851B;
@fuchsia: #F012BE;
@purple: #605ca8;
@maroon: #D81B60;
@black: #111;
@gray: #d2d6de;

変更が完了したら、次のコマンドを入力して、lessファイルをコンパイルおよび圧縮します。このコマンドは、adminlte.css、adminlte.min.css
変更が完了したら、次のコマンドを入力して、lessファイルをコンパイルおよび圧縮します。このコマンドは、adminlte.css、adminlte.min.css
およびすべてのスキンファイルを作成します。これらも新しい変更を反映します。

grunt less

または、grunt watchコマンドを実行すると、保存するたびにGruntが自動的にLESSファイルをコンパイルします。便利です！
または、grunt watchコマンドを実行すると、保存するたびにGruntが自動的にLESSファイルをコンパイルします。便利です！

.skin-blueスキンを使用した新しい色の外観は次のとおりです。

アイデアを強化するために、変数を使ってさらに1つやってみましょう。今回は、
サイドバーのサイズを300ピクセルに変更します。variables.lessファイルで、
変数@sidebar-widthを見つけ、その値を300pxに変更します。
以下は、行の見た目です。

@sidebar-width: 300px

grunt watchを実行していない場合は、もう一度grunt lessコマンドを実行します。

grunt less

どれほど簡単かわかりますか？これは非常に便利だと思いますし、これらの機能を活用していただければ幸いです。
すべての主要な色を変更したため、スキンはこれらの変更を反映するように自動的に更新されました。新しいスキンを見てみましょう。
すべての主要な色を変更したため、スキンはこれらの変更を反映するように自動的に更新されました。新しいスキンを見てみましょう。

ダウンサイジング

このチュートリアルの2番目のパートでは、アプリで不要になる可能性のある部分を削除する方法について説明します。
AdminLTEには多くのコンポーネントが付属しており、すべてが必要なわけではありません。ただし、
AdminLTEをモジュール化するためにLESSを使用しているため、不要なコンポーネントを簡単に削除できます。
これを行うには、build/less/AdminLTE.lessを開いて、インポートを見てください。各行は
特定のコンポーネントをインポートしています。コンポーネントを削除するには、行をコメントアウト（または削除）します。
行をコメントアウトするには、//を使用します。完了したら、grunt lessを実行します。dist/css/adminlte.min.cssファイルのサイズが縮小されていることがすぐにわかります。
行をコメントアウトするには、//を使用します。完了したら、grunt lessを実行します。dist/css/adminlte.min.cssファイルのサイズが縮小されていることがすぐにわかります。
したがって、非常に簡単かつ効果的にアプリの読み込み時間を短縮できます。

結論

このチュートリアルでは、LESS変数を使用してAdminLTEをカスタマイズし、ビジネスのスタイルに合わせてリブランドする方法を学びました。
また、アプリで不要なコンポーネントを削除する方法も学びました。
ここで学んだ方法は、Bootstrapやその他のテンプレートなど、CSSプリプロセッサを使用する他の多くのフレームワークで使用できます。
ここで学んだ方法は、Bootstrapやその他のテンプレートなど、CSSプリプロセッサを使用する他の多くのフレームワークで使用できます。

このチュートリアルを楽しんでいただけたでしょうか。役立つと思っていただくと幸いです。以下にコメントを残して、
感想を共有してください。