| Anchor | ||||
|---|---|---|---|---|
|
| Table of Contents | ||
|---|---|---|
|
概要
変更を行う前に、「ROOT」ディレクトリ全体のバックアップを必ず作成してください。「ROOT」ディレクトリのzipを作成することは、変更したスタイル設定をYellowfinのデフォルト状態にいつでも復元できることを意味します。CSSの扱いに慣れていない場合、これは特に重要です。この手順は必ず実行してください。
行った変更内容を表示して確認する前に、ブラウザーのキャッシュを必ずクリアすることも重要です。キャッシュをクリアすることで、新旧のスタイルおよびイメージがページ上で混在することを避けることができ、最新の修正バージョンのみを表示できます。
イメージ
Yellowfinで使用されるイメージは、「images」ディレクトリ（Yellowfin\appserver\webapps\ROOT\images）に格納されています。Yellowfin全体で非常に多くのイメージを使用して、さまざまなメニューや結果の外観や操作性を制御しています。これらのイメージをカスタマイズするには、画像編集ソフトウェアを使用する必要があります。画像編集ソフトウェアを持っていない場合は、 GIMP や Paint.NETなどのさまざまな無料ツールをオンラインで入手できます。
使用するツールを用意できたら、以下の操作を実行します。
- イメージファイルに必要な変更を加えます。
- 変更内容を保存して、ファイルの名前とタイプが変更前と変わっていないことを確認します。
- ブラウザーのキャッシュをクリアします。
- 更新の影響を受けるページを再読み込みして表示します。
CSS
Yellowfinで使用されるCSSファイルは、「css」ディレクトリ（Yellowfin\appserver\webapps\ROOT\css）に格納されています。Yellowfinではさまざまなスタイルシートを使用して、製品のさまざまな局面の外観や操作性を制御しています。Yellowfinのコンテンツのスタイルを変更するために使用するメインのファイルはie.cssです。このファイルは、システム全体を通して最も幅広くスタイルの指定に使用され、その他の比較的小さなファイルが特定の機能やページ用に使用されています。
ブラウザの開発者ツール
一般的に、スタイルの指定などYellowfinのスタイルを大幅に変更する場合、ブラウザの開発者ツールを使用することをお勧めします。このツールを使用することにより、使用中のスタイルを確認して、スタイルシートを変更する前に可能な変更をテストできるため、1つのページで要素を検討できます。ほとんどのブラウザには、開発者ツールや各種の適切に設計されたプラグインが組み込まれています。次の表は、一般的に使用されている各種ブラウザで開発者ツールにアクセスする方法を説明しています。ただしこのリストはすべてのブラウザを網羅しているわけではありません。
ブラウザ | ページ上の操作 | メニュー操作 |
|---|---|---|
ページ上の任意の場所を右クリックしてメニューから「要素を検証」を選択します。 | 「設定」>「ツール」>「デベロッパーツール」の順に選択します。 | |
ページ上の任意の場所を右クリックしてメニューから「要素を調査」を選択します。 | 「Firefox」メニュー>「Web開発」>「調査」の順に選択します。 | |
F12キーを押します。 | ツールメニューをクリックして、「開発者ツール」を選択します。 | |
ページ上の任意の場所を右クリックしてメニューから「要素を検証する」を選択します。 | 「Opera」>「ページ」>「開発者用ツール」>「Opera Dragonfly」の順に選択します。 | |
ページ上の任意の場所を右クリックしてメニューから「要素の詳細を表示」を選択します。 | 「ページメニュー」 ボタン >「開発」 >「Webインスペクタを表示」の順に選択します。 |
注意： この操作を行うには、初めにアクションメニュー >「設定」>「詳細」>「メニューバーに"開発"メニューを表示」をオンにする必要があります。
CSSの編集と更新
上記の一連の開発者ツールを使用して変更を試したら、次にその変更をYellowfinのCSSファイルに加える必要があります。これを行うには、構文が強調表示されるテキストエディターを使用することをお勧めします。このようなテキストエディターを持っていない場合、無料ツールの Notepad++を使用することをお勧めします。
必要な操作は次のとおりです：
...