知識データベース検索 by tgtipdb plug-in

Problem/solution 初心者用のTypo3 フロントページ・デザイン

04-Mar-2006 Found in: Typo3
初心者のためのTypo3 フロントページ・デザイン
 Problem
初心者が一番大変なのはインストールとフロントページのデザイン。フロントページのデザインはTypoスクリプトでセットアップファイルとコンスタントファイルを書かなければならない。

他のCMSではフロントページのデザインは提供されるいくつかのテーマを選ぶだけになっている。Typo3 のクイックスタートパッケージでは、仮想サッカーチームのウェブページがあらかじめ組み込まれている。フロントページは3つのパートでできている。ヘッダー(ロゴやタイトル画像)、左コラム(メニュー用)、右コラム(本文用)。このデザインでよければ、そのまま画像やロゴを変えるだけで使える。

他の大部分のCMSは5つのパートからできている。ヘッダー、左-真ん中-右コラム、フッター、、、そういうデザインにしたい場合にはどうすればいいの?
 Solution
クイックスタートパッケージで拡張プラグイン(extension)の "HTML/CSS Styling" をインストールします。どのように使うかは、以前はビデオファイル付でドキュメンテーションがあったのだが、残念ながらTypo3が4.0になってからなくなってしまった。

大体、次のようなステップで組み込みます:
1) Ext マネージャーで予め "CSS Styled content" と "Template Auto-parser" という拡張プラグインを組み込んでおきます。
2) その後に "HTML/CSS Styling" を組み込みます。テンプレート編集画面でこのコンポーネントをクリックしてインクルードすれば予め作り込んであるテンプレートファイルが取り込まれる仕組みです。
3) クイックスタートで提供されていた pagetree を全て削除します(後でこの pagetree を利用したい場合には、下の要領でテンプレート等全てを含めて export しておきます)。
4) 拡張プラグインのフォルダーに含まれている "samplepagetree.t3d" を fileadmin ディレクトリにコピーします。
5) Pagetree のルートの地球アイコンをクリックして(しばらく待って;アイコンの方をクリックするとコンテクストメニューが現れます) "import from .t3d" を選択します。samplepagetree.t3d をインポートすれば5パートのサンプルウェブサイトが作られます(注:オプション設定でpage-IDも含めてオリジナル通りにインポートしないと各ページ共通のコンテンツへのリンクが切れてしまいます)。
6) 後は、このサンプルサイトを参考にテンプレートファイルやコンテンツを編集・変更してゆけば独自のウェブサイトが作れます。各コラムのサイズやバックグランド画像や文字の大きさ等はスタイルシート(css)ファイル(stylesheet_main.css 等)で変更します。共通部分のコンテンツは "Sys Folder" 内の "Shared Front Page Contents" で編集します。各コラムパートの表示位置は html 雛形 (threecolumn.html 等)で指定します。
 See also



Return to >> 知識データベース top



Typo3関連の抜粋

サイト内のページ検索

Searchword:

Search in:


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