基本的なスタイルの チュートリアル

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

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

1. カスタムグラフィックを作成します。この例では、 1046 x 61 ピクセルのカスタムヘッダーグラフィックを作成しました。
2. カスタマイズ中のスペース内のページにカスタムグラフィックをアップロードします。
3. 新しいグラフィックをアップロードしたページのページ ID をメモします。(この例では、ページ ID は '658833839' です。

4. ヘッダー用のカスタム CSS を作成します。以下の例では、新しいグラフィック ('header.png') を同じスペースの特定のページ (ページ ID '658833839' で表示) からロードします。

    #header .aui-header  {
          background-image:url('../download/attachments/658833839/header.png');
          background-repeat: no-repeat;
       }
   

5. スペース管理者としてログインします。
6. スペース管理ページを開きます。
7. スタイルシートをクリックします。
8. 編集をクリックしてテキストフィールドのコードを変更します。
9. カスタムCSSを、テ​​キストフ​​ィールドに貼り付けます。
10. 保存をクリックしてからページを再読み込みします (Shift + 再読み込みキーを押す必要がある場合もあります)。ヘッダーの背景色が変更されます。
11. カスタムヘッダーは、スペース内のすべてのコンテンツページで表示されます。変更を戻すには、単に 'Stylesheet' ページからカスタムコードを削除して、保存をクリックします。

CSS 編集のヒント

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

スペーススタイルシートは変更可能なすべての要素が既に含まれているため、CSS のカスタマイズを開始するのに適しています。スペーススタイルシートを使用すると、スペース内のすべてのコンテンツページをスタイリングできます。新しいスタイルシートをサイト全体に適用することを検討する前に、スペースレベルでスタイルシートのビルドとテストを行います。スペース設計に満足したら、問題がないことに自信が持てるまで十分にテストを行います。その後で、検索ページ、ダッシュボードおよびその他の不可欠なページの調整など、Confluence CSS の高度なカスタマイズについて検討します。

適切なツールを使用する

Confluence CSS はかなり洗練されているため、 Web 開発アプリケーションを通じて、ユーザーはページのスタイルがどのように作成されたかを理解することになります。特に、作業を開始するページの既存のソースを表示する必要があります。これを実行するためのツールをまだ持っていない場合、次のフリーアプリケーションなどのツールが役立ちます。

1. Firebug
Firebug は、Firefox Web ブラウザーのプラグインで、ページの各要素のスタイルを調べることができます。現在適用されているスタイル (ヘッダーのみに適用されているスタイルなど) を知るには非常に役立ちます。

2. Web Developer
Firefox の Web Developer プラグインを使用すると、CSS インラインを編集して新しいページデザインを作成できます。

3. CSS Edit
CSS Edit は、Macintosh 用の独立型の CSS エディターで、指定したページからすべての既存のスタイルを抽出して上書きすることができます。

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

単純な要素の編集から開始し、動作を確認します。変更を行ってから、各要素の動作を確認することで、問題の原因となっている CSS コードを容易に分離できます。一部のページ要素は他のページ要素よりもカスタマイズに適していることに留意してください。たとえば、ツールバーにグラデーションを追加することは、ページ幅の変更よりもページを「壊す」可能性が低いといえます。背景グラフィックなど、ある程度静的な要素の編集は、ユーザーインターフェイスを完全に変更しようとする設計や、Javascript で動作するドロップダウンメニュー (これらの編集はお勧めできません) よりもレンダリングが予想しやすいといえます。

注意