パーソナルツール
現在の場所: ホーム plone カスタマイズ 色とフォントの変更
書いた本
Plone 完全活用ガイド の Chapter 1, 2, 3, 11 を執筆しました。
plone のインストール、使い方から、機能・デザインのカスタマイズ、プロダクトの作り方まで、 plone のすべてがぎゅっと詰まっている書籍になっていると思います。
plone に興味がある人から、すでに使いこなしている方まで、ぜひ読んでみてください。
Plone 完全活用ガイドのサポートページ
ナビゲーション

 
文書操作

色とフォントの変更

作成者 takanori 最終変更日時 2005年01月28日 03時29分

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

ここでは、ploneサイトの色とフォントを変更する方法について記述します。

目次

フォントと色の変更方法[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(見出し)に使用されるフォント。

sample font image

ここをどのように変更するかは好みの問題なのですが、ここでは 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

sample basic color image

リンク関連[link]

  • linkColor #436976
  • linkActiveColor Red
  • linkVisitedColor Purple

sample link color image

編集関連[edit]

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

sample edit color image

その他[other]

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

sample other color image


Powered by vine linux, python, zope, plone, coreblog