CSS で Confluence のスタイルを変更する

This page explains the facility for making visual changes to the look and feel of Confluence with CSS.

On this page:

はじめに

Cascading Style Sheets (CSS) are an industry-standard way of styling a web page. The content of a page is rendered with HTML, and its look and feel is determined by CSS files.

With the release of Confluence 2.10, you can upload a CSS text file and apply it to a space or even a whole Confluence instance.

This function is turned off by default. To allow space administrators to edit stylesheets, go to the security configuration section of the Confluence Administration Console and turn on 'Enable 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 and a more advanced tutorial.

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

CSS の知識が必要

If you are not familiar with CSS, the w3schools page has an accessible introduction. 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）が人気のブラウザの一部です。

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スタイルシートを編集するには：

Go to the 'Space Admin' tab of the Browse Space view. To do this:
- Go to a page in the space, open the 'Browse' menu and select 'Space Admin'.
  'Space Admin' is displayed only if you are a space administrator for that space or you are a Confluence system administrator.
Click 'Stylesheet' in the left-hand panel under the heading 'Look and Feel'.
[編集] をクリックします。
カスタムCSSを、テキストフィールドに貼り付けます。
Click 'Save'. The new CSS will be visible on all content pages in the space.

チュートリアルに従う

Follow the examples in the Basic Styling Tutorial or the more advanced Styling Tabs in Confluence to get started.

ページツリー