ルートページの作成
とりあえず最初のページを作ってみる。
「Web」→「ページ」ページでツリーのルート「New TYPO3 site」を右クリックして[新規作成]を選択。
ページモジュール（右ウィンドウ）の[ページ(中に)]をクリック。
ページモジュールの「より詳細なオプションを表示(上級者向け)をチェック。
「ページを表示しない」のチェックをはずし、「ページタイトル」に入力して「Options」タブを選択。
「このページはサイトのルートページ」にチェックして[ドキュメントを保存]アイコンをクリック。
ページツリーの「New TYPO3 site」を展開して、追加された「はじめに」ページを選択、ページモジュールの[ページを表示]アイコンをクリック。
「No template found!」になる。
テンプレート自動パーサーエクステンションのインストール
なんとかフットボールクラブ以外のホームページではほぼ100%必要になるエクステンションだと思うんだけど、デフォルトでは入っていないらしい。入っていないものはしかたがない。
左メニューの「Admin tools」→「エクステンションマネージャ」を選択。
トップメニューから「Import extensions」を選択。
「List or lookup reviewed extensions」に「automaketemplate」を入力して、[Look up]ボタンをクリック。
見つかった「Import this extensions to ‘local’ dir typo3/ext/ from online repository.」ボタンをクリック。
「Install extension」アイコンをクリック。
[Make updates]ボタンをクリック。
テンプレートの準備
下図のようなテンプレート用HTML、イメージファイル、cssファイルを用意する。
HTML ファイル(index.html)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="Enter your description here." />
<meta name="keywords" content="enter, keywords" />
<meta name="author" content="Original design by pogy366 - http://www.raykdesign.net" />
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon" /><!-- our custom little favicon -->
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen,print" />
<title>てくもメールマニュアル</title>
</head>
<body>
<table id="container" align="center" height="100%">
<tr valign="top"><td id="hed_container">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr><td id="hed_title"><h1>はじめに</h1></td></tr>
<tr><td id="hed_nav" align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="5"><tr>
<td valign="top" class="current"><a href="/index.php">はじめに</a></td>
<td class="other"><a href="/index.php?id=server">メールサーバ管理</a></td>
<td class="other"><a href="/index.php?id=thbird">クライアント設定(Thunderbird)</a></td>
<td class="other"><a href="/index.php?id=outlook">クライアント設定(Outlook)</a></td>
</tr></table>
</td></tr>
</table>
</td></tr>
<tr valign="top"><td id="bdy_container">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr><td id="bdy_left">
<table border="0" cellpadding="0" cellspacing="0">
<tr><td class="menu1-act"><a href="#">はじめに</a></td></tr>
<tr><td class="menu2-act"><a href="#">メールサーバ</a></td></tr>
<tr><td class="menu2-nom"><a href="#">メールクライアント</a></td></tr>
<tr><td class="menu2-nom"><a href="#">読み替え表現</a></td></tr>
<tr><td class="menu1-nom"><a href="#">メールサーバ管理</a></td></tr>
<tr><td class="menu1-nom"><a href="#">迷惑メールの管理</a></td></tr>
</table>
</td>
<td id="bdy_center_right">
<p> お客様が、てくもメールサーバを使用して電子メールの送受信を行うには、メールサーバにログインしてアカウントその他の設定をしていただくとともに、
お客様が使用されるメールクライアント(メーラー)を再設定していただく必要があります。
電子メールのやり取りは、下図のように私書箱を利用した郵便とよく似ています。
投函するポストに該当するメールサーバを送信(SMTP)サーバと呼びます。SMTPとは「Simple Mail Transfer Protocol」の略で、その名の通りメールを宛先に転送(Transfer)する機能を持っています。
一方、私書箱に該当するメールサーバを受信(POP)サーバと呼びます。POPは「Post Office Protocol」の略で、やはりその名の通り郵便局(Post Office)の私書箱のような機能です。
つまり、宛先宅(のパソコン)まで配達する機能は持っていません。</p>
<div align="center"><img src="images/mail_and_e-mail.jpg" /></div>
<h2>メールサーバ</h2>
<p> メールサーバは上記のように二種類ありますが、てくもサーバでもこの二種類を用意しています。
ただ、その設定はホームページから一括してできるようになっていますので、特に意識する必要はありません。
メールサーバへのログインは、メールアカウントのＩＤ・パスワードではなく、法人・団体ごとに一つのサイト、ログインＩＤ、ログインパスワードを用意しています。
本マニュアルでは下記のとおり読み替え用の表現をしていますので、別途お届けするセキュリティリストを参照して、読み替えていただくようお願いします。</p>
<h2>メールクライアント</h2>
<p> メールクライアント（メーラー）の設定方法については、標準的なメーラーとして主にMozilla Thunderbirdを例にとってご説明します。
メールアドレスとパスワードは、原則として上記のログインＩＤ・パスワードでメールサーバにログインして管理していただき、その設定に基づいてメーラーを設定してください。</p>
</td>
</tr></table>
</td></tr>
<tr><td id="fot_container">bottom
</td></tr>
</table>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="Enter your description here." />
<meta name="keywords" content="enter, keywords" />
<meta name="author" content="Original design by pogy366 - http://www.raykdesign.net" />
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon" /><!-- our custom little favicon -->
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen,print" />
<title>てくもメールマニュアル</title>
</head>
<body>
<table id="container" align="center" height="100%">
<tr valign="top"><td id="hed_container">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr><td id="hed_title"><h1>はじめに</h1></td></tr>
<tr><td id="hed_nav" align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="5"><tr>
<td valign="top" class="current"><a href="/index.php">はじめに</a></td>
<td class="other"><a href="/index.php?id=server">メールサーバ管理</a></td>
<td class="other"><a href="/index.php?id=thbird">クライアント設定(Thunderbird)</a></td>
<td class="other"><a href="/index.php?id=outlook">クライアント設定(Outlook)</a></td>
</tr></table>
</td></tr>
</table>
</td></tr>
<tr valign="top"><td id="bdy_container">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr><td id="bdy_left">
<table border="0" cellpadding="0" cellspacing="0">
<tr><td class="menu1-act"><a href="#">はじめに</a></td></tr>
<tr><td class="menu2-act"><a href="#">メールサーバ</a></td></tr>
<tr><td class="menu2-nom"><a href="#">メールクライアント</a></td></tr>
<tr><td class="menu2-nom"><a href="#">読み替え表現</a></td></tr>
<tr><td class="menu1-nom"><a href="#">メールサーバ管理</a></td></tr>
<tr><td class="menu1-nom"><a href="#">迷惑メールの管理</a></td></tr>
</table>
</td>
<td id="bdy_center_right">
<p> お客様が、てくもメールサーバを使用して電子メールの送受信を行うには、メールサーバにログインしてアカウントその他の設定をしていただくとともに、
お客様が使用されるメールクライアント(メーラー)を再設定していただく必要があります。
電子メールのやり取りは、下図のように私書箱を利用した郵便とよく似ています。
投函するポストに該当するメールサーバを送信(SMTP)サーバと呼びます。SMTPとは「Simple Mail Transfer Protocol」の略で、その名の通りメールを宛先に転送(Transfer)する機能を持っています。
一方、私書箱に該当するメールサーバを受信(POP)サーバと呼びます。POPは「Post Office Protocol」の略で、やはりその名の通り郵便局(Post Office)の私書箱のような機能です。
つまり、宛先宅(のパソコン)まで配達する機能は持っていません。</p>
<div align="center"><img src="images/mail_and_e-mail.jpg" /></div>
<h2>メールサーバ</h2>
<p> メールサーバは上記のように二種類ありますが、てくもサーバでもこの二種類を用意しています。
ただ、その設定はホームページから一括してできるようになっていますので、特に意識する必要はありません。
メールサーバへのログインは、メールアカウントのＩＤ・パスワードではなく、法人・団体ごとに一つのサイト、ログインＩＤ、ログインパスワードを用意しています。
本マニュアルでは下記のとおり読み替え用の表現をしていますので、別途お届けするセキュリティリストを参照して、読み替えていただくようお願いします。</p>
<h2>メールクライアント</h2>
<p> メールクライアント（メーラー）の設定方法については、標準的なメーラーとして主にMozilla Thunderbirdを例にとってご説明します。
メールアドレスとパスワードは、原則として上記のログインＩＤ・パスワードでメールサーバにログインして管理していただき、その設定に基づいてメーラーを設定してください。</p>
</td>
</tr></table>
</td></tr>
<tr><td id="fot_container">bottom
</td></tr>
</table>
</body>
</html>
CSS ファイル(style.css)
/* Designed, Copyright 2009 OTANI Umpei */
/* 全体構成 */
html, body {
height: 100%;
}
body {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
color: #333333;
margin: 0;
padding: 0;
}
h1 {
font-family: Georgia, "Times New Roman", Times, serif;
margin: 0;
padding: 10px 0 0 60px;
font-size: 26px;
color: #333300;
}
h2 {
font-family: Georgia, "Times New Roman", Times, serif;
margin: 6px 0 0 8px;
padding: 0;
font-size: 14px;
color:#333300;
}
h3 {
font-family: Georgia, "Times New Roman", Times, serif;
margin: 6px 0 0 16px;
padding: 0;
font-size: 12px;
color:#333300;
}
p {
font-family: Georgia, "Times New Roman", Times, serif;
margin: 3px 0 0 30px;
padding: 0;
font-size: 12px;
}
img {
border: none;
}
#container {
width: 98%;
height: 98%;
}
/* ヘッダ部 */
#hed_container {
width: 100%;
height: 90px;
background-image: url(../images/hBorder01.gif);
background-repeat: repeat-x;
margin: 0;
padding: 0;
}
#hed_title {
width: 100%;
height: 48px;
margin: 0;
}
#hed_nav {
width: 100%;
height: 42px;
font-size: 14px;
font-weight: bold;
/* padding: 0 0 10px 0;*/
}
#hed_nav a {
text-decoration: none;
}
#hed_nav .current {
border-bottom: none;
border-left: #003300 1px solid;
border-right: #003300 1px solid;
border-top: #003300 1px solid;
padding: 6px;
background: #FFFFCC;
}
#hed_nav .current a {
color: #003300;
}
#hed_nav .other {
border-bottom: none;
border-left: #003300 1px solid;
border-right: #003300 1px solid;
border-top: #003300 1px solid;
padding: 6px;
background: #003300;
}
#hed_nav .other a {
color: #FFFFFF;
}
#hed_nav .other a:hover {
color: #FFFF00;
}
/* ボディー部 */
#bdy_container {
width: 100%;
bottom: 60px;
margin: 0;
padding: 0;
}
#bdy_left {
width: 140px;
margin: 0;
padding: 2px;
background-image: url(../images/vBorder01.gif);
background-position: right;
background-repeat: repeat-y;
/* border-right: 1px solid #DFD8D2;*/
vertical-align: text-top;
bottom: 60px;
}
#bdy_left .menu1-nom a {
text-decoration: none;
color: #8E1F0D;
font-weight: bold;
}
#bdy_left .menu1-nom a:hover {
font-style: italic;
font-weight: bold;
}
#bdy_left .menu1-act a {
text-decoration: none;
color: #666666;
font-weight: bold;
}
#bdy_left .menu2-nom a {
text-decoration: none;
color: #8E1F0D;
padding: 0 0 0 10px;
}
#bdy_left .menu2-nom a:hover {
font-style: italic;
}
#bdy_left .menu2-act a {
text-decoration: none;
color: #666666;
padding: 0 0 0 10px;
}
#bdy_center_right {
vertical-align: text-top;
overflow: scroll;
height: inherit;
bottom: 60px;
}
/* フッター部 */
#fot_container {
height: 60px;
color: #006666;
font-size: 12px;
bottom: 0;
text-align: center;
}
/* 個別クラス */
/* 全体構成 */
html, body {
height: 100%;
}
body {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
color: #333333;
margin: 0;
padding: 0;
}
h1 {
font-family: Georgia, "Times New Roman", Times, serif;
margin: 0;
padding: 10px 0 0 60px;
font-size: 26px;
color: #333300;
}
h2 {
font-family: Georgia, "Times New Roman", Times, serif;
margin: 6px 0 0 8px;
padding: 0;
font-size: 14px;
color:#333300;
}
h3 {
font-family: Georgia, "Times New Roman", Times, serif;
margin: 6px 0 0 16px;
padding: 0;
font-size: 12px;
color:#333300;
}
p {
font-family: Georgia, "Times New Roman", Times, serif;
margin: 3px 0 0 30px;
padding: 0;
font-size: 12px;
}
img {
border: none;
}
#container {
width: 98%;
height: 98%;
}
/* ヘッダ部 */
#hed_container {
width: 100%;
height: 90px;
background-image: url(../images/hBorder01.gif);
background-repeat: repeat-x;
margin: 0;
padding: 0;
}
#hed_title {
width: 100%;
height: 48px;
margin: 0;
}
#hed_nav {
width: 100%;
height: 42px;
font-size: 14px;
font-weight: bold;
/* padding: 0 0 10px 0;*/
}
#hed_nav a {
text-decoration: none;
}
#hed_nav .current {
border-bottom: none;
border-left: #003300 1px solid;
border-right: #003300 1px solid;
border-top: #003300 1px solid;
padding: 6px;
background: #FFFFCC;
}
#hed_nav .current a {
color: #003300;
}
#hed_nav .other {
border-bottom: none;
border-left: #003300 1px solid;
border-right: #003300 1px solid;
border-top: #003300 1px solid;
padding: 6px;
background: #003300;
}
#hed_nav .other a {
color: #FFFFFF;
}
#hed_nav .other a:hover {
color: #FFFF00;
}
/* ボディー部 */
#bdy_container {
width: 100%;
bottom: 60px;
margin: 0;
padding: 0;
}
#bdy_left {
width: 140px;
margin: 0;
padding: 2px;
background-image: url(../images/vBorder01.gif);
background-position: right;
background-repeat: repeat-y;
/* border-right: 1px solid #DFD8D2;*/
vertical-align: text-top;
bottom: 60px;
}
#bdy_left .menu1-nom a {
text-decoration: none;
color: #8E1F0D;
font-weight: bold;
}
#bdy_left .menu1-nom a:hover {
font-style: italic;
font-weight: bold;
}
#bdy_left .menu1-act a {
text-decoration: none;
color: #666666;
font-weight: bold;
}
#bdy_left .menu2-nom a {
text-decoration: none;
color: #8E1F0D;
padding: 0 0 0 10px;
}
#bdy_left .menu2-nom a:hover {
font-style: italic;
}
#bdy_left .menu2-act a {
text-decoration: none;
color: #666666;
padding: 0 0 0 10px;
}
#bdy_center_right {
vertical-align: text-top;
overflow: scroll;
height: inherit;
bottom: 60px;
}
/* フッター部 */
#fot_container {
height: 60px;
color: #006666;
font-size: 12px;
bottom: 0;
text-align: center;
}
/* 個別クラス */
テンプレートの設定
左メニューの「Web」→「テンプレート」、ページツリーの「はじめに」を選択してページモジュールの[Create template for a new site]をクリック。
ページモジュールの「NEW SITE」をクリック。
一番下の「Click here to edit whole template record」をクリック。
「通常」タブ
- 無効：
- □
- Template title:
- teckumo001
- Website title:
- マニュアル
- Constants:
- [なし]
- Setup:
- Description:
- [なし]
# teckumo001用の自動パーサー設定
plugin.tx_automaketemplate_pi1 {
# テンプレートファイルの読み込み
content = FILE
content.file = fileadmin/template/teckumo001/index.html
# サブパーツコメントでラップする要素の指定
elements {
# BODY部の指定
BODY.all = 1
BODY.all.subpartMarker = DOCUMENT_BODY
# HEAD部の指定
HEAD.all = 1
HEAD.all.subpartMarker = DOCUMENT_HEADER
HEAD.rmTagSections = title
# その他の項目
TD.all = 1
TR.all = 1
}
# 関連する値のパス
relPathPrefix = fileadmin/template/teckumo001/
}
temp.index = TEXT
temp.index.setCurrent
# 上メニューtop_menu cObject
temp.top_menu = HMENU
# 第１レベルメニューオブジェクト(文字列)
temp.top_menu.1 = TMENU
temp.top_menu.1 {
# 通常状態プロパティ
NO.allWrap = <td class="t_menu1_nom"> | </td>
# 選択状態プロパティ
ACT = 1
ACT.allWrap = <td class="t_menu1_act"> | </td>
}
# 左メニューleft_menu cObject
temp.left_menu = HMENU
# 第１レベルメニューオブジェクト(文字列)
temp.left_menu.1 = TMENU
temp.left_menu.1 {
# 通常状態プロパティ
NO.allWrap = <div class="l_menu1_nom"> | </div>
# 選択状態プロパティ
ACT = 1
ACT.allWrap = <div class="l_menu1_act"> | </div>
}
# 第２レベルメニューオブジェクト(文字列)
temp.left_menu.2 = TMENU
temp.left_menu.2 {
# Normal state properties
NO.allWrap = <div class="l_menu2_nom"> | </div>
# Enable active state and set properties:
ACT = 1
ACT.allWrap = <div class="l_menu2_act"> | </div>
}
# BODY部メイン TEMPLATE cObject 設定
temp.mainTemplate = TEMPLATE
temp.mainTemplate {
# 自動パーサーからのコンテンツをTEMPLATE cObjectに供給
template =< plugin.tx_automaketemplate_pi1
# <body>タグ間のコンテンツのみ選択
workOnSubpart = DOCUMENT_BODY
# ###hed_title###サブパーツをサブタイトルで置き換える
subparts.hed_title = TEXT
subparts.hed_title.override.field = subtitle
subparts.hed_title.override.wrap = <h1>|</h1>
# ###top_menu###サブパーツをツリー情報で置き換える
subparts.top_menu < temp.top_menu
# ###left_menu###サブパーツをツリー情報で置き換える
subparts.left_menu < temp.left_menu
# ###left_text###サブパーツをgetコンテンツで置き換える
subparts.left_text = TEXT
subparts.left_text < styles.content.getLeft
# ###center_column###サブパーツをgetコンテンツで置き換える
subparts.bdy_center_right = TEXT
subparts.bdy_center_right < styles.content.get
# ###bottom_text###サブパーツをgetコンテンツで置き換える
subparts.bottom_text = HTML
subparts.bottom_text < styles.content.getBorder
# ###right_column###サブパーツをgetRightコンテンツで置き換える
# subparts.right_column = TEXT
# subparts.right_column < styles.content.getRight
}
# HEAD部メイン TEMPLATE cObject 設定
temp.headTemplate = TEMPLATE
temp.headTemplate {
# 自動パーサーからのコンテンツをTEMPLATE cObjectに供給
template =< plugin.tx_automaketemplate_pi1
# <head>タグ間のコンテンツのみ選択
workOnSubpart = DOCUMENT_HEADER
}
# デフォルトの PAGE オブジェクト
page = PAGE
page.typeNum = 0
# <body>部の TEMPLATE からコンテンツをコピー
page.10 < temp.mainTemplate
# <head>部の TEMPLATE からコンテンツをコピー
page.headerData.10 < temp.headTemplate
plugin.tx_automaketemplate_pi1 {
# テンプレートファイルの読み込み
content = FILE
content.file = fileadmin/template/teckumo001/index.html
# サブパーツコメントでラップする要素の指定
elements {
# BODY部の指定
BODY.all = 1
BODY.all.subpartMarker = DOCUMENT_BODY
# HEAD部の指定
HEAD.all = 1
HEAD.all.subpartMarker = DOCUMENT_HEADER
HEAD.rmTagSections = title
# その他の項目
TD.all = 1
TR.all = 1
}
# 関連する値のパス
relPathPrefix = fileadmin/template/teckumo001/
}
temp.index = TEXT
temp.index.setCurrent
# 上メニューtop_menu cObject
temp.top_menu = HMENU
# 第１レベルメニューオブジェクト(文字列)
temp.top_menu.1 = TMENU
temp.top_menu.1 {
# 通常状態プロパティ
NO.allWrap = <td class="t_menu1_nom"> | </td>
# 選択状態プロパティ
ACT = 1
ACT.allWrap = <td class="t_menu1_act"> | </td>
}
# 左メニューleft_menu cObject
temp.left_menu = HMENU
# 第１レベルメニューオブジェクト(文字列)
temp.left_menu.1 = TMENU
temp.left_menu.1 {
# 通常状態プロパティ
NO.allWrap = <div class="l_menu1_nom"> | </div>
# 選択状態プロパティ
ACT = 1
ACT.allWrap = <div class="l_menu1_act"> | </div>
}
# 第２レベルメニューオブジェクト(文字列)
temp.left_menu.2 = TMENU
temp.left_menu.2 {
# Normal state properties
NO.allWrap = <div class="l_menu2_nom"> | </div>
# Enable active state and set properties:
ACT = 1
ACT.allWrap = <div class="l_menu2_act"> | </div>
}
# BODY部メイン TEMPLATE cObject 設定
temp.mainTemplate = TEMPLATE
temp.mainTemplate {
# 自動パーサーからのコンテンツをTEMPLATE cObjectに供給
template =< plugin.tx_automaketemplate_pi1
# <body>タグ間のコンテンツのみ選択
workOnSubpart = DOCUMENT_BODY
# ###hed_title###サブパーツをサブタイトルで置き換える
subparts.hed_title = TEXT
subparts.hed_title.override.field = subtitle
subparts.hed_title.override.wrap = <h1>|</h1>
# ###top_menu###サブパーツをツリー情報で置き換える
subparts.top_menu < temp.top_menu
# ###left_menu###サブパーツをツリー情報で置き換える
subparts.left_menu < temp.left_menu
# ###left_text###サブパーツをgetコンテンツで置き換える
subparts.left_text = TEXT
subparts.left_text < styles.content.getLeft
# ###center_column###サブパーツをgetコンテンツで置き換える
subparts.bdy_center_right = TEXT
subparts.bdy_center_right < styles.content.get
# ###bottom_text###サブパーツをgetコンテンツで置き換える
subparts.bottom_text = HTML
subparts.bottom_text < styles.content.getBorder
# ###right_column###サブパーツをgetRightコンテンツで置き換える
# subparts.right_column = TEXT
# subparts.right_column < styles.content.getRight
}
# HEAD部メイン TEMPLATE cObject 設定
temp.headTemplate = TEMPLATE
temp.headTemplate {
# 自動パーサーからのコンテンツをTEMPLATE cObjectに供給
template =< plugin.tx_automaketemplate_pi1
# <head>タグ間のコンテンツのみ選択
workOnSubpart = DOCUMENT_HEADER
}
# デフォルトの PAGE オブジェクト
page = PAGE
page.typeNum = 0
# <body>部の TEMPLATE からコンテンツをコピー
page.10 < temp.mainTemplate
# <head>部の TEMPLATE からコンテンツをコピー
page.headerData.10 < temp.headTemplate
「Options」タブ
- Clear:
- ■Constants ■Setup
- Rootlevel:
- ■
- Template on next level:
- [なし]
- Backend editor configurations:
- [なし]
「Includes」タブ
- Include static:
- [なし]
- Include static AFTER basedOn:
- □
- Include static (From extensions):
- CSS Styled Content (css_styled_content)
- Include bases templates:
- [なし]
- Static template files from T3 Extensions:
- Default (Include before if Root-flag is set)
「Resources」タブ
- Resources:
- [なし]
「Access」タブ
- いつから：
- ［なし］
- いつまで:
- [なし]
以上を設定し、[ドキュメントを保存]アイコンをクリック。