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

On this page:

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

  1. スペース管理者としてログインします。
  2. スペース管理ページを開きます。
  3. Click 'Stylesheet'.
  4. Click 'Edit' to change the code in the text field.
  5. Paste your custom CSS into the text field. (Once text is saved here, you can make adjustments to it inline.)
  6. Click 'Save'. The new CSS will be visible on all content pages in the space.

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

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

  1. カスタムグラフィックを作成します。この例では、 1046 x 61 ピクセルのカスタムヘッダーグラフィックを作成しました。
  2. Upload the custom graphic to a page in the space that you are customising.
  3. 新しいグラフィックをアップロードしたページのページ ID をメモします。(この例では、ページ ID は '658833839' です。
  4. Compose your custom CSS for the header. The example below loads the new graphic (called 'header.png') from a specific page (denoted by page ID '658833839') in the same space. 
     #header {
       background-image:url('../download/attachments/658833839/header.png');
       background-repeat: no-repeat;
    }

  5. スペース管理者としてログインします。
  6. スペース管理ページを開きます。
  7. Click 'Stylesheet'.
  8. Click 'Edit' to change the code in the text field.
  9. カスタムCSSを、テ​​キストフ​​ィールドに貼り付けます。
  10. Click 'Save'. Now reload the page (you may have to shift-reload). The background of the header will change.
  11. The custom header will be visible on all content pages in the space. To revert your change, simple delete the custom code from the 'Stylesheet' page and click 'Save'.

CSS 編集のヒント

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

A space stylesheet is a good starting point for CSS customisation, as it already includes all of the elements that can be changed. When you work on the space stylesheet it styles all content pages in the space. Build and test it at space-level, before considering applying the new stylesheet to your entire site. Once you are satisfied with your space design, test it thoroughly until you are confident that it has no problems. Then, you can look into advanced customisation of the Confluence CSS such as adjusting the Search page, the Dashboard and other integral pages.

適切なツールを使用する

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.

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

Begin by editing simple elements and checking that they work. By making changes, then checking that each one worked, you can easily isolate any CSS code that is causing problems. Be aware that some page elements are more suited to customisation than others. For example, adding a gradient to the toolbar is less likely to 'break' the page than changing the page width. Editing reasonably static elements such as background graphics will render more predictably than designs which attempt to completely change the user interface or the Javascript-powered drop-down menus (which we don't recommend editing).


RELATED LINKS

Styling Confluence with CSS
Styling Tabs in Confluence
Including Cascading Stylesheets in Themes