CSSソースを編集する「デザインカスタマイズ」の例
テンプレートセットの紹介に続いて、カスタマイズ例が掲載されています。 カスタマイズ例には、スタイルシートソースだけを修正することで実現できる「デザインカスタマイズ例」と、 テンプレートのソースを修正することで実現する「構造カスタマイズ例」の2種類があります。
デザインカスタマイズ例では、たとえば下記のように、特定の箇所の装飾を変更する方法などがあります。
 |
テンプレートセットごとに、デザインのカスタマイズ例は1～2例が紹介されています。 どれも、数行のスタイルシートソースを追加するだけで実現できるお手軽なものです。
スタイルシートそのものに関する説明はありませんが、カスタマイズ例を実現するためのソースと、そのソース内にある各記述の意味は紹介されています。 それらを参考にしつつ、独自の装飾を加えてみると良いでしょう。
なお、デザインのカスタマイズとしては、以下のようなカスタマイズ例が紹介されています。
- サイドバーの配色を変更する
- ヘッダ部分の配色を変更する
- 「お知らせ」各項目の表示面積を減らす
- ページ下部のフッタメニューを横いっぱいに広げる
- トップ画像を消す
- ページ全体の背景色を変更する
- トップ画像を置き換える
- メニュー項目を小さくする
- メニューの区切り線の色を変える
- キャッチコピーの表示位置を移動する
- メニューを右端から並べる
- 右肩のヘッダナビ部分を装飾する
- 日付部分を装飾する
- リンクに下線を加える・マウスが載った際に装飾を変化させる
- 2段組を解除して1段で表示させる
- メニューの文字サイズを大きくする
- タイトル文字を画像にする
- トップ画像の面積（高さ）を減らす
- ヘッダ部分（サイト名と概要文）全体を画像化する
- 見出しの装飾を変更する
- サイドバーの配置を右側に変える
- マウスが載った際のメニュー項目の装飾を変える
- メニューバーの背景画像を変更する
