Table of Contents

[編集]

デフォルトテンプレートのカスタマイズ

CMS Made Simpleのデフォルトテンプレートは、どれもほとんど同じHTMLコードで作成されています。違うことといえば、どのメニューを使っているか、コンテンツブロックがいくつあるかということぐらいです。残りはCSSのみでスタイルを定義しています。

なぜなら、CMS Made Simpleのデフォルトテンプレートは、テーブルを使わないからです。代わりに、<div>タグを使って、ページ内の各コンテンツブロックを定義し、各divブロックの配置やスタイルをCSSでカスタマイズします。

このページでは、テンプレートを一つずつ見て、各テンプレートについてと編集方法について説明します。

スタイルと見栄えの修正は、各テンプレートに添付したスタイルシート で行います。

DOCTYPEの宣言と言語の指定

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

上記のDOCTYPE (document type declaration)は、ブラウザが正確に翻訳ができるように、ブラウザにどのバージョンの(X)HTMLを使用しているのか伝えます。またコードの構文をチェックする検証ツールが必要です。

初めの二行は変更せずにそのままにしておきます。<HTML>タグの言語の宣言の箇所は、場合によって変更の必要があるかもしれません。ここで、ページのコンテンツの表示言語を指定します。"en"を二文字の言語コードに変更してください。

詳細はDOCTYPE at W3Cを読んでください。

言語名表示コード

headタグ

<head>

<title>{sitename} - {title}</title>
{stylesheet}
{metadata}
</head>

<title>タグの間に挿入されたものが、タイトルバーに表示されます。{sitename}はサイト管理->全体設定で指定します。各ページごとに違う名前を表示したい場合は、{title}タグを追加します。{title}タグはプレースホルダーで、ページタイトルを入力した現在のページ名が挿入されます(コンテンツ -> ページ -> 編集/ページの追加)。

{stylesheet}は、テンプレートに添付したスタイルシートとリンクするためのタグです。一度このタグを追加すると、添付したスタイルシートがいつもリンクされます。

{metadata}はサイト管理->全体設定で設定したメタデータ全てと、コンテンツ -> ページ -> ページの編集/追加のオプションタブで各ページごとに追加設定したメタデータが格納されます。

The page wrapper

<body>

<div id="pagewrapper">

ページ全体を規定するdivブロックの開始部分です。配置は中央にといったふうに、スタイルシートでページ幅を設定します。

カスタマイズ方法

  • 名前がLayoutで始まるスタイルシート内の div#pagewrapperを見てください。

ヘッダー

   <div id="header">
           <h1>{cms_selflink dir="start" text="$sitename"}</h1>
   <hr class="accessibility" />

CMS Made Simpleのロゴがある位置が、ページのヘッダーに当たります。テンプレートには何の情報もなく、ヘッダーのコンテンツは全てCSSで設定します。こうすることで、HTMLコードをすっきりさせることができます。しかし、ヘッダーに表示させたいテキストや情報があれば、直接テンプレートに追加することも可能です。

カスタマイズ方法

  • 名前がLayoutで始まるスタイルシート内のdiv#header や div#header h1 a (リンク)を見てください。そこで背景色や、ロゴ、高さなどを指定します。

パンくずリスト

   <!-- Start Breadcrumbs -->
   <div class="breadcrumbs">
        {breadcrumbs starttext='You are here' root='Home' delimiter='»'}
   <hr class="accessibility" />
   </div>
   <!-- End Breadcrumbs -->

パンくずリストは、現在どのページにいるか、ページのどの階層にいるのかを訪問者に知らせるリンクです。たとえば、以下のように表示されます。 Home >> Section page >> Sub-section page

CMS Made Simpleでは、各ページでパンくずリストが自動的に追加されます。: {breadcrumbs}. delimiter="&raquo;" というのは、>> が区切り文字として使われるという意味です。

initial='1' は、パンくずリストが区切り文字から始まる、という意味です。指定しなかったり、もしくは'0'とした場合は、第1レベルの前には区切り文字が表示されません。

カスタマイズ方法:

  • 名前がLayoutで始まるスタイルシート内のdiv.breadcrumbsを見てください。フォントや背景などがカスタマイズできます。
  • {breadrumbs}タグの使用方法については、管理パネルの拡張機能 -> タグでbreadcrumbsのヘルプをクリックしてください。


残りのデフォルトテンプレートは、現在最新バージョンに向けて更新中です。

注: テンプレートをCMSMSテンプレートへ変換する方法についての、わかりやすいFlashビデオが http://cmsmadesimple.org/uploads/media/mint_chocolate.htm にあります。


This page in: English - Deutsch - Español - Français - Italiano - Lietuvių - Nederlands - Norsk - Polski - Česky - Русский - Svenska - Tiếng Việt - عربي - 日本語 简体中文

User Handbook/Getting Started/Designer/Customizing Templates/jp

From CMSMS

A2 Hosting