30日間の無料評価版をお試しいただけます。

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Styleclass
ClasstopLink

ページトップ

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

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

カスタムディレクトリ

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

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

  1. customcsscustomcss(Yellowfin\appserver\webapps\ROOT\customcss
  2. customimages(customimagesYellowfin\appserver\webapps\ROOT\customimages

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

イメージ

Styleclass
ClasstopLink

ページトップ

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

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

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

CSS

Styleclass
ClasstopLink

ページトップ

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

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

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

メニュー操作
ブラウザーページ上の操作メニュー上の操作

Chrome

ページ上の任意の場所を右クリックしてメニューから「ページ上の任意の場所を右クリックし、メニューから「要素を検証」を選択します。

設定」>「その他のツール」>「デベロッパーツール」の順に選択します。」に移動します。

Firefox

ページ上の任意の場所を右クリックしてメニューから「ページ上の任意の場所を右クリックし、メニューから「要素を調査」を選択します。

Firefox」メニュー>「Web 開発」>「開発ツールを表示」の順に選択します。」に移動します。

IE

F12キーを押します。

ツールメニューをクリックして、「ツールメニューをクリックし、「開発者ツール」を選択します。

Opera

ページ上の任意の場所を右クリックしてメニューから「ページ上の任意の場所を右クリックし、メニューから「要素の詳細を表示」を選択します。

Opera」>「ページ」>「開発者用ツール」>「Opera Dragonfly」の順に選択します。」に移動します。

Safari

ページ上の任意の場所を右クリックしてメニューから「ページ上の任意の場所を右クリックし、メニューから「要素の詳細を表示」を選択します。

ページメニュー」ボタン>「開発」>「Webインスペクタを表示」の順に選択します。」に移動します。
注意:この操作を行うには、初めにこちらの操作を行うためには、まず、アクションメニュー>「設定」>「詳細」>「メニューバーに"開発"メニューを表示」をオンにする必要があります。」を有効にする必要があります。

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

CSSの編集と更新

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

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

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

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

 

horizontalrule
Styleclass
ClasstopLink

ページトップ