This page in: English - Deutsch - Español - Français - Italiano - Lietuvių - Nederlands - Norsk - Polski - Русский - Svenska - Tiếng Việt - عربي - 日本語 简体中文
デフォルトテンプレートのカスタマイズ
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="»" というのは、>> が区切り文字として使われるという意味です。
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 -
عربي -
日本語
简体中文
