CSS で Confluence のスタイルを変更する
このページでは、CSS を使用して Confluence のルックアンドフィールを変更するための機能について説明します。
はじめに
カスケーディング スタイル シート（CSS）は Web ページのスタイリングの業界標準の方法です。ページのコンテンツは HTML で描画され、ルック アンド フィールは CSS ファイルで決定されます。CSS テキスト ファイルをアップロードするか、単にスタイルシートに入力し、これをスペースまたは Confluence サイト全体に適用することができます。
> [一般設定] > [セキュリティ設定] に移動し、[スペースのカスタム スタイルシート] を選択します。シームレスにさまざまなブラウザ間で動作する CSS スタイルの作成は、基本的な Web サイトではデリケートなタスクであり、Confluence のような Web アプリケーションをカスタマイズする際はそれなりに困難です。加えた変更をテストし、Confluence ダッシュボードや通常のページ上など、Confluence のすべての領域で期待通りに動作することを確認することが重要です。
作業を始めることができるように、この手順を「基本的なスタイリング チュートリアル」にまとめました。
カスタム CSS を使用する際の考慮事項
CSS の知識が必要
CSS に詳しくない場合、以下の CSS リソース セクションのリンクを参照してください。Confluence のスタイル シートを編集する前に、少し時間をかけてカスケーディング スタイル シートに詳しくなる必要があります。
セキュリティ
カスタム CSS を使用すると、ページにスクリプトを埋め込むことができますが、クロスサイト スクリプティング（XSS）攻撃のリスクが発生します。この機能を有効にすると、スペース管理者は、他のユーザーのログイン認証情報を盗んだり、知らずに wiki で操作を実施するようにブラウザを騙したり、グローバル管理者権限を取得したりするスタイルをアップロードすることができます。そのため、この機能はデフォルトでは無効になっています。Confluence 管理者はこの段落で述べられているリスクを承知している場合のみ、カスタム CSS を有効にする必要があります。
スケーリング
各ページはスケーリングを行う必要があります。ユーザーの画面の解像度に応じて、コンテンツがインテリジェントに表示されるようにします。デザインの劣化を最小限に抑えながら、品質を下げる必要があります。Confluence 内に存在する各ページのサイズ変更を試します。閲覧スペースセクションには、下書き、ラベル、ページ階層など、相当数のページがあります。ご使用のスタイルが、たまたま最初に表示したページだけでなく、あらゆる場所で目的どおりに機能する必要があります。
機能を無効化できない
特定のリンク、ヘッダー、メニュー項目は、それぞれのスタイルを「非表示」に設定するだけで簡単にオフにできます。これは、Wiki に精通していないユーザーに Confluence の提供を開始する場合に便利です。UI が単純であるほど、このようなユーザーにとって使いやすくなります。しかし、アプリケーションの一部へのリンクを削除しても、機能が利用できなくなるわけではないので覚えておいてください。すべてのユーザーは、ブラウザー内からスタイルを変更したり、直接 URL にアクセスすることができます。Confluence の部分を無効化するために CSS に頼らないようにしてください。
機能を無効にしないでください
Confluence に詳しいユーザーは、使い慣れているものと同じコントロールが見つかることを期待しています。インターフェースからボタンやコントロールを削除すると、ユーザーを困惑させ、上記のように直接 URL にアクセスしてデザインを回避する原因となるため、推奨されません。
カスタム CSS は 管理画面には適用されません
サイトに適用されている CSS スタイルは、管理コンソールには適用されません。 これは、CSS に変更を加えた後に管理機能にアクセスできなくなることを防止するためです。
Confluence のバージョン互換性
Confluence インスタンスのアップグレード計画に注意してください。Confluence の将来のバージョンはお使いのカスタム バージョンと互換性がない場合があります。これにより、CSS が壊れ、Confluence のアップグレード時にメンテナンスが必要となる可能性があります。詳細情報は、 Confluence 管理者ガイドに尋ねてください。
別の Web ブラウザ上でのテスト
Confluence でサポートされているさまざまな Web ブラウザで変更をテストすることをおすすめします。
CSS のカスタマイズはサポートされていません
カスタム CSS の作成には、潜在的に際限のない可能性があるため、アトラシアンは CSS カスタマイズから生ずる問題やカスタマイズに関連する問題をサポートしません。
まずはじめに
CSS の編集
- スペースに移動して、サイドバーの下部から、スペース ツール > ルックアンドフィールを選択します。
- スタイルシートを選択し、その後編集 を選択します。
- カスタムCSSを、テキストフィールドに貼り付けます。
- 変更を保存します。新しいCSSは、スペース内のすべてのコンテンツページに表示されます。
- [管理] > [一般設定] > [スタイルシート] を選択します。
- 編集を選択する。
- カスタムCSSを、テキストフィールドに貼り付けます。
保存を選択します 。
注意:
- 新しい CSS は、スペースに独自のカスタムスタイルシートが定義されておらず、テーマが使用されていない場合は、すべてのスペースに表示されます。また、この CSS はカスタムグローバルテーマに定義済みのすべてのスタイルを上書きします。
- 管理セクションでカスタム HTML を選択し、独自の CSS 定義をページの HEAD または BODY に追加することで、サイトに CSS を追加できる場合があります。このオプションは、グローバルスタイルシートを使用しても期待される結果が得られない場合にのみ使用してください。
チュートリアルに従う
基本的なスタイルのチュートリアルの例に従って開始してください。