CSSソースを編集する「デザインカスタマイズ」の例

テンプレートセットの紹介に続いて、カスタマイズ例が掲載されています。 カスタマイズ例には、スタイルシートソースだけを修正することで実現できる「デザインカスタマイズ例」と、 テンプレートのソースを修正することで実現する「構造カスタマイズ例」の2種類があります。

デザインカスタマイズ例では、たとえば下記のように、特定の箇所の装飾を変更する方法などがあります。

CSSソースを編集する「デザインカスタマイズ」の例と解説(「即戦プロ技 Movable Type デザインテンプレートコレクション」)
 

テンプレートセットごとに、デザインのカスタマイズ例は1~2例が紹介されています。 どれも、数行のスタイルシートソースを追加するだけで実現できるお手軽なものです。

スタイルシートそのものに関する説明はありませんが、カスタマイズ例を実現するためのソースと、そのソース内にある各記述の意味は紹介されています。 それらを参考にしつつ、独自の装飾を加えてみると良いでしょう。

なお、デザインのカスタマイズとしては、以下のようなカスタマイズ例が紹介されています。

  • サイドバーの配色を変更する
  • ヘッダ部分の配色を変更する
  • 「お知らせ」各項目の表示面積を減らす
  • ページ下部のフッタメニューを横いっぱいに広げる
  • トップ画像を消す
  • ページ全体の背景色を変更する
  • トップ画像を置き換える
  • メニュー項目を小さくする
  • メニューの区切り線の色を変える
  • キャッチコピーの表示位置を移動する
  • メニューを右端から並べる
  • 右肩のヘッダナビ部分を装飾する
  • 日付部分を装飾する
  • リンクに下線を加える・マウスが載った際に装飾を変化させる
  • 2段組を解除して1段で表示させる
  • メニューの文字サイズを大きくする
  • タイトル文字を画像にする
  • トップ画像の面積(高さ)を減らす
  • ヘッダ部分(サイト名と概要文)全体を画像化する
  • 見出しの装飾を変更する
  • サイドバーの配置を右側に変える
  • マウスが載った際のメニュー項目の装飾を変える
  • メニューバーの背景画像を変更する