66,666のぞろ目: TYPO3 UsersGroup JAPAN

ホーム › TUGJ › ブログ

ブログ

2007年 6月26日

11:40

66,666のぞろ目

今日、びっくりしたことが。
出勤する前に、コンビニで個人的な支払いをしたときだった。いくらかなぁと思ったら、66,666円。6のぞろ目。
今日は何か良い事がありそうな予感・・・。

さて、昨日は「通常」部分のエレメントをFEに表示させる設定について学びました。
本日は、それ以外の「左」「右」「ボーダー」のエレメントを表示させる設定をやります。

まず、今まで使用してきた、htmlテンプレートの修正を行わないといけません。
というのは、今までのhtmlテンプレートだと、1つのカラムしか表示させられないからです。(※TSの記述により、複数のカラムも表示はできるが、ここでは省略させていただきます)

まずは、htmlテンプレートの作成から。

まず、BE(バックエンド)にログインします。

メニューからテンプレート＞ページツリーから対象のページを選択＞

すでにセットアップされたテンプレートが表示される場合と、新しくテンプレートを作成する画面が表示されるかと思います。
まだ作成していなければ、デフォルトで構いませんので作成してください。作成方法については、このブログの以前の記事を参考に作成してみてください。

Resources という項目名の左に鉛筆アイコンがありますのでそちらをクリックしてください。
この画面では、新しくファイルを作成する場合に利用できます。例えば、htmlやcssファイルなど。

New text resource (enter name) のところに、入力ボックスがあるので、そちらに適当な名前を入力します。ここで入力した文字がそのままファイル名として保存されます。次にファイルの拡張子を選択します。今回は、htmlを選択してください。次にupdateボタンを押します。

これで空のファイルが作成されました。
作成されたファイル名のあたりに、鉛筆アイコンがあるはずですので、それをクリックしてください。
入力ボックスの中に、下記のソースを入れてください。

<table border="0" cellspacing="0" cellpadding="2">
<tr>
    <td>
    
    LEFT Column
    
    </td>
    <td>
    
    MAIN Column
    
    </td>
    <td>
    
    RIGHT Column
    
    </td>
</tr>
<tr>
    <td colspan="3">
    
    BORDER Column
    
    </td>
</tr>
</table>

そして、updateボタンを押します。
これで、htmlファイルが作成されました。

次は、TSの設定です。
現在の画面で、一旦、cancelボタンを押します。Template informationというページに戻ります。
Setupという項目横の鉛筆アイコンを押します。

page = PAGE
page.typeNum = 0
page.10 = TEMPLATE
page.10 {
   template = FILE
   template.file = test.html
   workOnSubpart = DOCUMENT_BODY
   subparts.INSIDE_LEFT < styles.content.getLeft
   subparts.INSIDE_MAIN < styles.content.get
   subparts.INSIDE_RIGHT < styles.content.getRight
   subparts.INSIDE_BORDER < styles.content.getBorder
}

やっと、普通のホームページらしくなってきましたね～。

もうお気づきかと思いますが、これさえ覚えてしまえば、デザインは自由ですよね。
あとは、作成したhtmlに画像を配置したりすれば、更新ができるホームページができます。
TYPO3のよさの一つは、このように、各ページにTSを記述することで、各ページごとにデザインやレイアウトを変えられる点です。

菅野史樹