Confluence のページ編集画面におけるページ タイトル フィールドのカスタマイズ

2015-06-10 (Wed)  •  By 伊藤  •  活用のヒント  •  Confluence

はじめに

Confluence 5.7 においてエディター画面が大幅に見直され、大変シンプルかつモダンなデザインに置き換えられました。新しいデザインは、ユーザーによる編集スペースを最大限に確保するために余白などを要素を最小限にとどめています。その結果、ページ タイトル フィールドと本文フィールドの境界が分かりづらくなったのも事実です。Confluence 5.6.x 以前のエディター画面に慣れているユーザーにとって、この新しいデザインのエディターは違和感を覚えるかもしれません。

そこで今回は新しいエディター画面をカスタマイズし、ページ タイトル フィールドを分かりやすくする方法について取り上げます。なお、今回取り上げる方法は Confluence (Server) でのみ適用可能です。Confluence (Cloud) では使用できません。また、カスタマイズはあくまでも自己責任で行ってください。

カスタマイズの方針

Confluence のルック アンド フィールをカスタマイズする場合、CSS (スタイル シート) の修正が簡単かつ無難な方法です。Confluence のベロシティ テンプレートを修正する方法もありますが、これは難易度が高いことに加え、場合によっては Confluence の再起動が必要となる場合があります。したがって、今回は CSS を利用して Confluence のページ編集画面のページ タイトル フィールドのルック アンド フィールを修正します。

関連するセレクターの取得

Confluence は、さまざまなセレクター (HTML 要素と CSS 属性の組み合わせ) を使用して Web ブラウザー上に画面を描画しています。フィールドやボタンなど、カスタマイズ対象となるコンポーネントで使用されているセレクターが分かれば、そのオブジェクトのルック アンド フィールを CSS で修正できます。したがって、まず、ページ編集画面のページ タイトル フィールドで使用されているセレクターを調べてみましょう。

Google Chrome を使用している場合、デベロッパー ツールの [要素の検証] オプションを使用することで、該当オブジェクトで使用されているセレクターを簡単に判別できます。これを利用すると、Confluence のページ編集画面のページ タイトル フィールドではセレクター INPUT#content-title が使用されていることが分かります。

セレクターへのプロパティの定義

Confluence で CSS を記述できる場所は、管理コンソールの [グローバル スタイルシート] 画面です。今回は、ここに以下の CSS を記述します。ページ タイトル フィールドに枠線を追加し、さらにフィールド内の余白を追加しています。

INPUT#content-title {
	padding: 30px;
	border: solid 1px #ccc;
}

以下のスククリーンショットは、今回のカスタマイズの適用後のページ編集画面です。ページ タイトル フィールドが枠線で囲まれています。

今回のようなカスタマイズを行う場合、アトラシアンが採用している アトラシアン デザイン ガイドライン が参考になります。特に CSS で色関係のプロパティを記述する際、このデザイン ガイドラインのカラー スキームの色を使用することで、それらしい仕上がりになるため、意外と便利です。

まとめ

Confluence は Web アプリケーションであるため、今回のようなルック アンド フィールのカスタマイズには CSS の修正が有効です。今回はページ タイトル フィールドを取り上げましたが、その他のコンポーネントでも同様のカスタマイズを適用できます。


Related Articles

お気軽にお問い合わせください

お問い合わせ