このページでは、CSS を使用して Confluence のルックアンドフィールを変更するための機能について説明します。

はじめに

カスケーディング スタイル シート（CSS）は Web ページのスタイリングの業界標準の方法です。ページのコンテンツは HTML で描画され、ルック アンド フィールは CSS ファイルで決定されます。CSS テキスト ファイルをアップロードするか、単にスタイルシートに入力し、これをスペースまたは Confluence サイト全体に適用することができます。

メモ:
  • You need system administrator permissions to edit the CSS for a space or for the site.
  • This function is turned off by default. To turn it on, go to Confluence Admin > Security Configuration and choose Custom Stylesheets for Spaces.

Creating CSS styles that work seamlessly across different browsers is a delicate task for basic web sites, and reasonably challenging when customising web applications like Confluence. It is important to test each change that you make and ensure it works as expected in all areas of Confluence – for example, on the Confluence dashboard as well as on regular pages.

In order to get you started, we have compiled this introduction, a basic styling tutorial.

On this page:

関連ページ

(warning) The information on this page does not apply to Confluence OnDemand.

カスタム CSS を使用する際の考慮事項

CSS の知識が必要

If you are not familiar with CSS, see the links in the CSS Resources section below. You should spend some time to become confident with Cascading Style Sheets before you start editing your Confluence style sheets.

セキュリティ

カスタム CSS を使用すると、ページにスクリプトを埋め込むことができますが、クロスサイト スクリプティング（XSS）攻撃のリスクが発生します。この機能を有効にすると、スペース管理者は、他のユーザーのログイン認証情報を盗んだり、知らずに wiki で操作を実施するようにブラウザを騙したり、グローバル管理者権限を取得したりするスタイルをアップロードすることができます。そのため、この機能はデフォルトでは無効になっています。Confluence 管理者はこの段落で述べられているリスクを承知している場合のみ、カスタム CSS を有効にする必要があります。

スケーリング

各ページはスケーリングを行う必要があります。ユーザーの画面の解像度に応じて、コンテンツがインテリジェントに表示されるようにします。デザインの劣化を最小限に抑えながら、品質を下げる必要があります。Confluence 内に存在する各ページのサイズ変更を試します。閲覧スペースセクションには、下書き、ラベル、ページ階層など、相当数のページがあります。ご使用のスタイルが、たまたま最初に表示したページだけでなく、あらゆる場所で目的どおりに機能する必要があります。

機能を無効化できない

特定のリンク、ヘッダー、メニュー項目は、それぞれのスタイルを「非表示」に設定するだけで簡単にオフにできます。これは、Wiki に精通していないユーザーに Confluence の提供を開始する場合に便利です。UI が単純であるほど、このようなユーザーにとって使いやすくなります。しかし、アプリケーションの一部へのリンクを削除しても、機能が利用できなくなるわけではないので覚えておいてください。すべてのユーザーは、ブラウザー内からスタイルを変更したり、直接 URL にアクセスすることができます。Confluence の部分を無効化するために CSS に頼らないようにしてください。

機能を無効にしないでください

Confluence に詳しいユーザーは、使い慣れているものと同じコントロールが見つかることを期待しています。インターフェースからボタンやコントロールを削除すると、ユーザーを困惑させ、上記のように直接 URL にアクセスしてデザインを回避する原因となるため、推奨されません。

Confluence のバージョン互換性

Confluence インスタンスのアップグレード計画に注意してください。Confluence の将来のバージョンはお使いのカスタム バージョンと互換性がない場合があります。これにより、CSS が壊れ、Confluence のアップグレード時にメンテナンスが必要となる可能性があります。詳細情報は、 Confluence 管理者ガイドに尋ねてください。

別の Web ブラウザ上でのテスト

原則として、変更をさまざまな Web ブラウザでテストする必要があります。Internet Explorer、Firefox、Opera、および Safari（Mac OS X）が人気のブラウザの一部です。

Note about supported web browsers: Please ensure that you are using one of the web browsers supported by Confluence. If you are using an unsupported browser or browser version, some features may not work correctly. You can find the list of supported web browsers and browser versions on this page: Supported Platforms.
CSS のカスタマイズはサポートされていません

As creating custom CSS has potentially limitless possibilities, Atlassian will not support issues that are caused by or related to CSS customisation.

まずはじめに

CSS の編集

スペースのCSSスタイルシートを編集するには：
  1. Go to the space and choose Space tools on the sidebar.
    Note: The 'Space tools' option  appears only if you are a space administrator for the space or you are a super user (a member of the confluence-administrators group).
  2. Choose Look and Feel > Stylesheet.
  3. 編集 を選択します 。
  4. カスタムCSSを、テ​​キストフ​​ィールドに貼り付けます。
  5. 変更を保存します。新しいCSSは、スペース内のすべてのコンテンツページに表示されます。

スペースでドキュメント用テーマを使用している場合：

  1. Choose Browse > Space Admin at the top of the screen.
    Note: The 'Space Admin' option appears only if you are a space administrator for the space or you are a super user (a member of the confluence-administrators group).
  2. 「ルックアンドフィール」という見出しの左パネルで、スタイルシートをクリックします。
  3. 編集 を選択します 。
  4. カスタムCSSを、テ​​キストフ​​ィールドに貼り付けます。
  5. 変更を保存します。新しいCSSは、スペース内のすべてのコンテンツページに表示されます。

グローバル CSS スタイルシートを編集するには:
  1. Choose the cog icon  at top right of the screen, then choose Confluence Admin.
  2. スタイルシートを選択します。
  3. 編集を選択する。
  4. カスタムCSSを、テ​​キストフ​​ィールドに貼り付けます。

  5. 保存を選択します 。 

注意: 

  • 新しい CSS は、スペースに独自のカスタムスタイルシートが定義されておらず、テーマが使用されていない場合は、すべてのスペースに表示されます。また、この CSS はカスタムグローバルテーマに定義済みのすべてのスタイルを上書きします。
  • 管理セクションでカスタム HTML  を選択し、独自の CSS 定義をページの HEAD または BODY に追加することで、サイトに CSS を追加できる場合があります。このオプションは、グローバルスタイルシートを使用しても期待される結果が得られない場合にのみ使用してください。
チュートリアルに従う

Follow the examples in the Basic Styling Tutorial to get started.

CSS リソース

Except where otherwise noted, content in this space is licensed under a Creative Commons Attribution 2.5 Australia License.