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

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migration of unmigrated content due to installation of a new plugin

Anchor
top
top

Table of Contents
classcontents

概要

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


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

カスタムディレクトリ

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

  1. customcssYellowfin\appserver\webapps\ROOT\customcss
  2. customimagesYellowfin\appserver\webapps\ROOT\customimages

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

イメージ

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


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

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

CSS

Styleclass
ClasstopLink

ページトップ

Yellowfinで使用されるCSSファイルは、cssディレクトリ(Yellowfin\appserver\webapps\ROOT\css)に格納されています。Yellowfinでは、様々なスタイルシートを使用して、製品の様々な局面のルックアンドフィールを制御しています。Yellowfinコンテンツのリスタイリングをするために使用する主要なファイルは「ie.cssです。こちらのファイルは、システム全体を通して最も幅広くスタイルの指定に使用され、その他の比較的小さなファイルが、特定の機能やページの指定に使用されています。しかし、このファイルはYellowfinのコアファイルなので、編集すべきではありません。その代わりに、専用のカスタムCSSフォルダー (Yellowfin\appserver\webapps\ROOT\customcss\) を使用して、デフォルトスタイルの詳細を上書きしてください。

デフォルトカラースタイル

Yellowfin 9.6では、カラー名の使用をコアCSSファイル内に統一したことで、グローバルでの色の変更がより簡単になりました。

カラースキームをカスタマイズするには、\customcssフォルダー内のカスタムファイルを開き、ファイルの先頭に以下を追加します。

Code Block
languagecss
themeEclipse
:root {
 
<variable-overrides-go-here>
 
}

<variable-overrides-go-here>を、独自のスタイルに置き換えてください。

例えば、

Code Block
languagecss
themeEclipse
:root {
 
-primary-color: red;
 
--loader-color: green;
 
}


次の表は、色の使用に関連するすべてのスタイル名の現在の一覧です。古いバージョンのYellowfinを使用している場合は、機能しないものもあるかもしれません。

スタイル名詳細
--primary-color
#009EEC
--loader-color: #009EEC 
#009EEC
--leftnav-hover-color
#008CD7
--primary-button-color 
#009EEC
--primary-button-hover-color 
#008ED4
--grey
#CCCCCC
--background-grey
var(--grey)
--border-grey
var(--grey) 
--signal-positive-color 
#009EEC
--signal-negative-color
#FF8F00
--dark-grey
#666
--black 
#000
--background-black
var(--black)
--white
#fff
--background-white
var(--white)
--primary-text-color
#333740
--light-grey
#F8F6F4
--light-grey-background
var(--light-grey)

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

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

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

Chrome

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

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

Firefox

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

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

Opera

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

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

Safari

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

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

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

CSSの編集と更新

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

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

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

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


horizontalrule

Styleclass
ClasstopLink

ページトップ