カスタムイメージとCSS

概要

変更を行う前に、「ROOT」ディレクトリ全体のバックアップを必ず作成してください。「ROOT」ディレクトリのzipを作成することは、変更したスタイル設定をYellowfinのデフォルト状態にいつでも復元できることを意味します。CSSの扱いに慣れていない場合、これは特に重要です。この手順は必ず実行してください。

行った変更内容を表示して確認する前に、ブラウザーのキャッシュを必ずクリアすることも重要です。キャッシュをクリアすることで、新旧のスタイルおよびイメージがページ上で混在することを避けることができ、最新の修正バージョンのみを表示できます。

カスタムディレクトリ

Yellowfinインストールの「ROOT」ディレクトリには、スタイル変更に使用する2つのカスタムディレクトリがあります：

1. customcss (Yellowfin\appserver\webapps\ROOT\customcss)
2. customimages (Yellowfin\appserver\webapps\ROOT\customimages)

これらのディレクトリには、Yellowfinの元のイメージの代わりに使用するカスタマイズされたイメージおよびCSSが格納されています。これらのファイルは、元のファイルが変更されないようにカスタムディレクトリに保存されています。カスタムディレクトリはYellowfinの更新時に変更されないため、Yellowfinを更新しても元のファイルは変更されません。

イメージ

Yellowfinで使用されるイメージは、「images」ディレクトリ（Yellowfin\appserver\webapps\ROOT\images）に格納されています。Yellowfin全体で非常に多くのイメージを使用して、さまざまなメニューや結果の外観や操作性を制御しています。これらのイメージをカスタマイズするには、画像編集ソフトウェアを使用する必要があります。画像編集ソフトウェアを持っていない場合は、 GIMP や Paint.NETなどのさまざまな無料ツールをオンラインで入手できます。

使用するツールを用意できたら、以下の操作を実行します。

1. イメージファイルに必要な変更を加えます。
2. 「customimages」ディレクトリ（Yellowfin\appserver\webapps\ROOT\customimages）の変更を保存し、ファイルの名前と種類が同じであることを確認します。
3. ブラウザーのキャッシュをクリアします。
4. 更新の影響を受けるページを再読み込みして表示します。

CSS

Yellowfinで使用されるCSSファイルは、「css」ディレクトリ（Yellowfin\appserver\webapps\ROOT\css）に格納されています。Yellowfinではさまざまなスタイルシートを使用して、製品のさまざまな局面の外観や操作性を制御しています。Yellowfinのコンテンツのスタイルを変更するために使用するメインのファイルはie.cssです。このファイルは、システム全体を通して最も幅広くスタイルの指定に使用され、その他の比較的小さなファイルが特定の機能やページ用に使用されています。

ブラウザーの開発者ツール

一般的に、スタイルの指定などYellowfinのスタイルを大幅に変更する場合、ブラウザーの開発者ツールを使用することをお勧めします。このツールを使用することにより、使用中のスタイルを確認して、スタイルシートを変更する前に可能な変更をテストできるため、1つのページで要素を検討できます。ほとんどのブラウザーには、開発者ツールや各種の適切に設計されたプラグインが組み込まれています。次の表は、一般的に使用されている各種ブラウザーで開発者ツールにアクセスする方法を説明しています。ただしこのリストはすべてのブラウザーを網羅しているわけではありません。

注意: これらの操作方法は、記事作成時の各ブラウザーの最新バージョンで正しく実行できます。正しく操作できない場合は、使用している特定のブラウザーのヘルプを参照してください。

CSSの編集と更新

上記の一連の開発者ツールを使用して変更を試したら、次にその変更をYellowfinのCSSファイルに加える必要があります。これを行うには、構文が強調表示されるテキストエディターを使用することをお勧めします。このようなテキストエディターを持っていない場合、無料ツールの Notepad++を使用することをお勧めします。

必要な操作は次のとおりです。

1. CSSファイルに必要な変更を加えます。
2. 「customcss」ディレクトリ（Yellowfin\appserver\webapps\ROOT\customcss）にファイルを保存します。
3. ブラウザーのキャッシュをクリアします。
4. 更新の影響を受けるページを再読み込みして表示します。

注意: 「customcss」ディレクトリに保存する置き換えファイルは、元のファイルと同じ名前でなくてもかまいません。クラス名が適切であれば、これらのファイルはYellowfinで使用されます。つまり、必要に応じてすべてのカスタムスタイルを1つのCSSファイルにまとめることができます。このファイルにはカスタマイズしたアイテムのみが含まれます。