このページでは Confluence でカスタム CSS スタイルを使用する方法について説明します。

CSS 編集のクイックスタート

スペースのCSSスタイルシートを編集するには：
  1. スペースに移動して、サイドバーの下部から、スペース ツール > ルックアンドフィールを選択します。
  2. スタイルシートを選択し、その後編集 を選択します。
  3. カスタムCSSを、テ​​キストフ​​ィールドに貼り付けます。
  4. 変更を保存します。新しいCSSは、スペース内のすべてのコンテンツページに表示されます。

On this page:

関連ページ

チュートリアル: ヘッダーの背景色の変更

ヘッダーとは、既定の Confluence ページの最上部にあるメニュー領域を指し、Breadcrumb リンク、参照メニュー、ユーザーメニューおよびクイック検索ボックスがあります。次の例では、カスタムグラフィックを組み込むためにヘッダーの背景色を変更します。

  1. カスタムグラフィックを作成します。この例では、 1046 x 61 ピクセルのカスタムヘッダーグラフィックを作成しました。
  2. カスタマイズ中のスペース内のページにカスタムグラフィックをアップロードします。
  3. 新しいグラフィックをアップロードしたページのページ ID をメモします。(この例では、ページ ID は '658833839' です。

  4. ヘッダー用のカスタム CSS を作成します。以下の例では、新しいグラフィック ('header.png') を同じスペースの特定のページ (ページ ID '658833839' で表示) からロードします。

     #header .aui-header  {
       background-image:url('../download/attachments/658833839/header.png');
       background-repeat: no-repeat;
    }

  5. Confluence にログインします。スペース管理者の権限があることを確認します。

  6. サイドバーの下部から [スペース ツール] を選択し、次に [ルック & フィール] を選択します。

  7. [スタイルシート] タブを選択します。

  8. [編集] を選択してテキスト フィールドのコードを変更します。

  9. カスタム CSS をテキスト フィールドに貼り付けます。

  10. [保存] をクリックしてからページを再読み込みします (Shift + 再読み込みキーを押す必要がある場合もあります)。ヘッダーの背景色が変更されます。

  11. カスタムヘッダーは、スペース内のすべてのコンテンツページで表示されます。変更を戻すには、単に [スタイルシート] ページからカスタム コードを削除して、[保存] をクリックします。

CSS 編集のヒント

スペーススタイルシートから着手する

スペーススタイルシートは変更可能なすべての要素が既に含まれているため、CSS のカスタマイズを開始するのに適しています。スペーススタイルシートを使用すると、スペース内のすべてのコンテンツページをスタイリングできます。新しいスタイルシートをサイト全体に適用することを検討する前に、スペースレベルでスタイルシートのビルドとテストを行います。スペース設計に満足したら、問題がないことに自信が持てるまで十分にテストを行います。その後で、検索ページ、ダッシュボードおよびその他の不可欠なページの調整など、Confluence CSS の高度なカスタマイズについて検討します。

適切なツールを使用する

Confluence CSS はかなり洗練されているため、 Web 開発アプリケーションを通じて、ユーザーはページのスタイルがどのように作成されたかを理解することになります。特に、作業を開始するページの既存のソースを表示する必要があります。これを実行するためのツールをまだ持っていない場合、次のフリーアプリケーションなどのツールが役立ちます。

1. Firebug
Firebug, a plugin for the Firefox web browser, allows you to take a look at the style of each element on your page. This is very useful to see what styles are currently applied, for example styles applied to the header only.

2. Web Developer
The Web Developer plugin for Firefox allows you to edit CSS inline and create new page designs.

3. CSS Edit
CSS Edit is a stand-alone CSS editor for Macintosh that extracts all existing styles from a given page and allows you to overwrite these.

最初に単純な要素を編集する

単純な要素の編集から開始し、動作を確認します。変更を行ってから、各要素の動作を確認することで、問題の原因となっている CSS コードを容易に分離できます。一部のページ要素は他のページ要素よりもカスタマイズに適していることに留意してください。たとえば、ツールバーにグラデーションを追加することは、ページ幅の変更よりもページを「壊す」可能性が低いといえます。背景グラフィックなど、ある程度静的な要素の編集は、ユーザーインターフェイスを完全に変更しようとする設計や、Javascript で動作するドロップダウンメニュー (これらの編集はお勧めできません) よりもレンダリングが予想しやすいといえます。

注意

Note: By default, only system administrators can edit the CSS for a space or for the site. To allow any user with Space Admin permissions to edit the CSS for a space, go to Administration menu , then General Configuration > Security Configuration and select Custom Stylesheets for Spaces.
  • ラベルなし