カスタムイメージとCSS

概要

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

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

カスタムディレクトリ

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

customcss（Yellowfin\appserver\webapps\ROOT\customcss）
customimages（Yellowfin\appserver\webapps\ROOT\customimages）

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

イメージ

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

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

イメージファイルに、必要な変更を加えます。
「customimages」ディレクトリ（Yellowfin\appserver\webapps\ROOT\customimages）に変更を保存し、ファイル名とファイル形式が同じであることを確認します。
ブラウザーのキャッシュをクリアします。
更新の影響を受けるページをリロードし、確認します。

CSS

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

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

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

ブラウザー	ページ上の操作	メニュー上の操作
Chrome	ページ上の任意の場所を右クリックし、メニューから「要素を検証」を選択します。	「設定」>「その他のツール」>「デベロッパーツール」に移動します。
Firefox	ページ上の任意の場所を右クリックし、メニューから「要素を調査」を選択します。	「Firefox」メニュー>「Web 開発」>「開発ツールを表示」に移動します。
IE	F12キーを押します。	ツールメニューをクリックし、「開発者ツール」を選択します。
Opera	ページ上の任意の場所を右クリックし、メニューから「要素の詳細を表示」を選択します。	「Opera」>「ページ」>「開発者用ツール」>「Opera Dragonfly」に移動します。
Safari	ページ上の任意の場所を右クリックし、メニューから「要素の詳細を表示」を選択します。	「ページメニュー」ボタン>「開発」>「Webインスペクタを表示」に移動します。注意：こちらの操作を行うためには、まず、アクションメニュー>「設定」>「詳細」>「メニューバーに"開発"メニューを表示」を有効にする必要があります。

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

CSSの編集と更新

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

必要な操作は、以下の通りです。

CSSファイルに、必要な変更を加えます。
「customcss」ディレクトリ（Yellowfin\appserver\webapps\ROOT\customcss）にファイルを保存します。
ブラウザーのキャッシュをクリアします。
更新の影響を受けるページをリロードし、確認します。

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