色とフォントの変更

ploneサイトの色とフォントを変更して、見た目の雰囲気を変えます。

takanori

目次

• フォントと色の変更方法[how]
• フォントを変更[font]
  • フォントのサンプル[sample]
• 色を変更[color]
  • 基本[basic]
  • リンク関連[link]
  • 編集関連[edit]
  • その他[other]

フォントと色の変更方法[how]

ploneサイトのフォントや色を変更するためには、どこをどのように変更すればよいかについて説明します。

ploneサイトの色やフォントの設定は、CSS(Cascading Style Sheet)で行なわれています。

ploneサイトの色やフォントを変更するためには、ロゴの変更 で説明した base_properties のプロパティの値を変更します。

また、実際にここで変更したフォントや色についての設定は、plonePresentation.css というcssファイル上で定義されて見た目を変更しています。

フォントを変更[font]

フォントは初期状態では、 "Lucida Grande", Verdana, Lucida, Helvetica, Arial, sans-serif と設定されています。

なお、フォントを設定する項目は2種類あります。

• fontFamily 全体的に使用されるフォント。
• headingFontFamily heading(見出し)に使用されるフォント。

ここをどのように変更するかは好みの問題なのですが、ここでは Verdana, Arial, sans-serif と設定することにします。

フォントのサンプル[sample]

主なフォントのサンプルです。

• serif あいうえおアイウエオABCDEabcde
• sans-serif あいうえおアイウエオABCDEabcde
• cursive あいうえおアイウエオABCDEabcde
• fantasy あいうえおアイウエオABCDEabcde
• monospace あいうえおアイウエオABCDEabcde
• Verdana あいうえおアイウエオABCDEabcde
• Lucida あいうえおアイウエオABCDEabcde
• Helvetica あいうえおアイウエオABCDEabcde
• Arial あいうえおアイウエオABCDEabcde

色を変更[color]

色もフォントの変更と同様に base_properties で値を変更します。

色の設定項目と初期設定の値を以下に載せます。

基本[basic]

• fontColor Black
• backgroundColor White
• globalBorderColor #8cacbb
• globalBackgroundColor #dee7ec
• globalFontColor #436976

リンク関連[link]

• linkColor #436976
• linkActiveColor Red
• linkVisitedColor Purple

編集関連[edit]

• contentViewBorderColor #74ae0b
• contentViewBackgroundColor #cde2a7
• contentViewFontColor #578308
• notifyBorderColor #ffa500
• notifyBackgroundColor #ffce7b

その他[other]

• evenRowBackgroundColor #f7f9fa
• oddRowBackgroundColor transparent
• discreetColor #76797c
• helpBackgroundColor #ffffe1
• inputFontColor Black