はじめに　インストール　[テンプレート]　デザイン　コンテンツ　拡張機能

 

 

Typo3の5パート・テンプレート

 

Drupalやe-107やJoomlaなどに比べるとTypo3のクイックスタートのサンプルページは、デザイン的に古いという気がしてしまいます。試してみた殆んどのCMSではヘッダーがあってメインは左右にコラムがあってバナーやコラムボックスが配置されていて最後に一番下にフッターがあってここにもバナーやコピーライトなどが表示されるようになっています。クイックスタートのサンプルページの構成は３部のみです。ヘッダーと左コラムとメインページだけ。しかも、左のコラムにはサイトメニューしか表示できないようにセットアップされています。カスタマイズするにはどこをどう変えればよいのか分からず、初心者にはお手上げ状態です。

少し慣れてくると、管理画面でTemplateをクリックするとテンプレートをセットアップする画面になることが分かります。そこには、サンプルページと少し違うデザインのテンプレートの”ひな形”が幾つか含まれており、変更してみればそれなりに別のデザインになることが分かります。しかし、どれも３部構成のデザインしかありません。Drupalのようなホームページをデザインするにはどうしたらいいのでしょうか？タイポスクリプトで記述される新しいセットアップファイルとコンスタントファイルを作らなくてはなりません。初心者には超えられそうもない山です。

幸いなことに、”html/css スタイリング”という拡張機能を使うとタイポスクリプトが分からなくても5パート（ヘッダー／左-中-右／フッター）のテンプレートが出来てしまいます。出来上がりのサンプルページはこんなものです。




前頁と同様にしてオンライン拡張機能検索で”htmlcssstyling”を探してみます。見つかったらインポートしておきます。また、この画面で右にスクロールして依存関係を確かめておきます。そうすると、この拡張機能は”css_styled_content”と”automaketemplate”という拡張機能が前提となっていることが分かります。”css_styled_content”はデフォルトでインポートされているので、そのままインストールして、ここでは”automaketemplate”をインポートすればいいことが分かります。これはインポート直後にインストールできます。この2つがインストールされたら、”htmlcssstyling”を最後にインストールします。インストールが終わるとメニュー：”Loaded extensions”から確かめられます。










サンプルページ(サイト)を作成する前に、クイックスタートページ(サイト)をエクスポート保存しておきます。ページツリーエクスポートという機能を利用します。BE真ん中のコラムで地球アイコンをクリックします。そのままマウスを動かさないで暫く待っているとコンテクストメニューが表示されます。”.t3dファイルへのエクスポート”を選びます。右の画面でレベルを”すべて”にして”アップデート”をクリックします。そうするとエクスポートするページツリーが表示されます。一番上のタブで”File & Preset”からファイル名を入力して”ファイルに保存”します。







次の準備は、ディレクトリC:￥Program Files￥typo3￥htdocs￥quickstart-3.8.1￥typo3conf￥ext￥htmlcssstyling￥samplepagetreeにある”samplepagetree_21-02-2005-16-24-04-z.t3d”というファイルとC:￥Program Files￥typo3￥htdocs￥quickstart-3.8.1￥typo3conf￥ext￥htmlcssstylingにある”template”というフォルダーをディレクトリ”C:￥Program Files￥typo3￥htdocs￥quickstart-3.8.1￥fileadmin”にコピーしておきます。

最後の準備は、エクスポートしたクイックスタートのページツリーを削除しておくことです。一括削除が出来ないので、下位ディレクトリのページから順番にページアイコンをクリックしてコンテクストメニューから”削除”を選択してページ毎に削除します。






完全に削除して地球アイコンだけが残ったら、地球アイコンのコンテクストメニューで”.t3dファイルからインポート”を選びます。上でコピーしておいた”samplepagetree_21-02-2005-16-24-04-z.t3d”を選んで”Force ALL UIDs values”にチェックを入れてから”プレビュー”をクリックします。それから、”インポート”をクリックします。真ん中のコラムにページツリーが表示されてインポートが完了したことが分かります。






サンプルページの編集には、左コラムから”ページ”を選び、その後で真ん中のページツリーから例えば”Homepage”を選ぶとそのページの編集・作成・保存等が出来るようになります。クイックスタートの編集画面と違い”左”、”通常”、”右”、”ボーダー”の4種類のコラムで編集が出来るようになっています。”ボーダー”がウェブサイトのフッタに対応します。このデフォルトでは、ヘッダ部分はスタティックでhtmlテンプレートとcssテンプレートの2つだけで作成・編集します。実際にどのように表示されるかは、右コラムの上部にある”虫メガネ”アイコンをクリックすれば別ページでオープンします。左コラムで”表示”を選ぶと右のコラムに表示されます。どちらでも編集アイコン(鉛筆)で出来上がりを確かめながら編集・変更が出来ます。共通部分のコンテンツ、例えば、どのページにも表示するフッタは、”Shared Content”というSysFolderの中の”Shared from Root Page Template”という隠し共通ページの”ボーダー”コラムに加えておきます。






 

 

次は、自分なりのウェブサイトのデザインとカスタマイズのコツです。

 

Previous page | Next page
サイト内のページ検索

Searchword:

Search in:


（上のページ検索は通常ページのみでブログ風ニュースの内容は検索できません）