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

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

On this page:

はじめに

カスケーディングスタイルシート（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 and a more advanced tutorial.

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

Choose Browse > Space Admin.
Note: 'Space Admin' is displayed only if you are a space administrator for that space, or you are a super user (a member of the confluence-administrators group).
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.

CSS リソース

ページツリー