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

 

 

Typo3の5パート・サイトのデザイン

 

サイトのデザインやカスタマイズをするには、１）前回導入したhtml/cssスタイリングのサンプルページツリーでインクルードされているタイポスクリプトのテンプレートとコンスタントの他に、２）htmlテンプレートと３）cssファイルが必要です。

 

まず、それぞれどこに収められているのか？タイポスクリプトは、、、

 


左コラムで”Template”をクリックして、ページツリーでテンプレートが保存されているページ”Home”をクリックしておいて、右コラムの右上のドロップダウンリストから”Info/Modify”を選択して表示された画面で ”Click here to edit whole template record ”をクリックします。そうすると、右コラムはテンプレート編集画面になるので、スクロールダウンして行くと”Include static (from extensions): ”の欄の左側に右側のアイテムから選ばれた”css_styled_content”と”htmlcssstyling”がインクルードしてあるのが分かります。そして、これをインクルードするとhtml/cssスタイリングのコンスタントが設定できるようになります。コンスタント編集画面に行くには一つ前の画面に戻って右上のドロップダウンリストから”Constant Editor”を選びます。カテゴリリストから”HTMLCSS (4)”を選ぶとこのテンプレートのコンスタント設定が出来るようになります。






”Include static: ”で選べるアイテムは、クイックスタートのサンプルページにも使われているデフォルトのタイポスクリプトです。htmlcssstylingのサンプルページを表示するには全然使われていないことが分かります。インクルードされたhtmlcssstylingのタイポスクリプトがどんなものか知りたい場合は、 /typo3conf/ext/htmlcssstyling/static/ にある”setup.txt”を見てください。自分でタイポスクリプトを作るときの参考になります。拡張機能htmlcssstylingを一旦削除してから再インストールする前にこのsetup.txtを編集しておけば更にカスタマイズが可能です。尚、このsetupファイルでは、サイトメニューの表示は各ページタイトル名を使ってページツリー構造と同じになるように設定されています（クイックスタートのサンプルページと同じ）。

コンスタントの最初の設定項目は、htmlテンプレートとcssファイルの収められているディレクトリへのパスです。ここでは、もうひとつの設定項目に注目しておきます。共通コンテンツを格納するページのID番号です。真ん中のページツリーでページのアイコンへマウスオーバーするとページIDが分かるようになってます。サンプルページツリーをインポートしたときに、この”Shared from Root Page Template”のID番号が書き換えられてしまった場合にはページツリーで確かめてこの番号を訂正しておきます。




htmlテンプレートとcssファイルと付属の画像は前にfileadminへtemplateディレクトリとしてコピーしておきましたので、コンスタントエディタでそのパス”fileadmin/template/main/”を指定しておけば、管理画面（BE）から編集ができるようになります。コンスタントエディタでパスを変更すればテンプレートの”Constants:”の欄に自動的に入力されていることが分かります。左コラムから”ファイル一覧”をクリックして”template”>> ”main”と辿って行けばBEの右コラムに表示されるようになります。それぞれのファイルを編集したいときにはファイル名の左のアイコンをクリックしてコンテクストメニューを待ちます。”threecolumn.html”の編集を選べばこのファイルの内容がテキスト表示されるので、書き直して保存すれば変更されます。

 




管理画面の左コラムのページモードを選択したときに右コラムのページ編集画面に示される”左”、”通常”、”右”、”ボーダー”の４コラムに対応するのがこのhtmlテンプレートファイルにある

＜div id="leftcontent"＞ ＜/div＞、
＜div id="normalcontent"＞ ＜/div＞、
＜div id="rightcontent"＞ ＜/div＞、
＜div id="bordercontent"＞ ＜/div＞

です。共通ページの編集コラムは、それぞれ

＜div id="leftcontentshared"＞ ＜/div＞、
＜div id="normalcontentshared"＞ ＜/div＞、
＜div id="rightcontentshared"＞ ＜/div＞、
＜div id="bordercontentshared"＞ ＜/div＞

が対応するので、表示位置を変えたいときとか、ヘッダパートを編集できるようにしたいときとか、これを希望の場所に移動・変更して”保存して閉じる”をクリックすればそうなります。例えば、共通コンテンツの”普通”コラムをヘッダ用に転用することも可能です。

サイトのバックグラウンドの画像とかコラムの幅とか色とかはCSSファイルを編集すれば変えられます。この辺りは従来のHTMLエディタでデザインしていた時と全く同じ手法です。ので、ウェブデザイナーにも新たな負担をかけなくて済みます。





例えば、ヘッダの画像を交換するには、まず、新しい画像をアップロードします。管理画面からアップロードするには”ファイル一覧”から保存するディレクトリのアイコンをクリックしてコンテクストメニューの”ファイルのアップロード”を選びます。アップロードしたら/fileadmin/template/main/の”stylesheet_main.css”の編集画面で新しいヘッダ画像のファイル名に変更します。保存して閉じれば完了です。







左コラムの上(先頭)に配置してある”サイトメニュー”ですが、サンプルページのような表示からこのサイトの表示のように変更するにはCSSファイルの/* Menu 1 column */以下の部分を編集します。背景の変更や各メニューアイテムの縁取りの線の種類などをクリックされたときとそうでないときを別個に指定したり、マウスオーバーで文字色や背景画像が変わるようにしたり、、本屋に行くとCSSの書き方の解説本が色々と出版されているんですね、、、 

 

さらに細かいコンテンツのデザインや設定変更はそれぞれのコンテンツ・タイプのタイポスクリプトのテンプレートとコンスタントを変更すればできるようになります。次のコンテンツの編集の仕方で、、、

 

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

Searchword:

Search in:


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