ブログのスキン制作
freoの設定が終了したら、スキンを制作します。
ブログのスキンとは、広義には見た目に関する情報を記述したファイルのことです。
freoの場合、templates/internalsフォルダ中にそれぞれのページのスキンが「default.html」というファイル名で格納されます。
「鈴木智子のホームページのアクセスアップ講座」ではブログと静的HTMLを混在させる為に、ヘッダーやフッターなどの共通要素部分を分離する方法を使わず、それぞれのスキン単体でページレイアウトを構成しています。
 |
temppates/ | |||||
 |
internals/ | |||||
 |
|
default/ | ||||
|
|
|
default.html | トップページに適用されるスキン | ||
|
|
page/ | ||||
|
|
|
default.html | CMSで作られたページに適用されるスキン | ||
|
|
view/ | ||||
|
|
|
default.html | 記事ページに使用されるスキン | ||
 |
|
|||||
トップページのスキンを変更する
トップページのスキンはダウンロードしたファイルのtemplates/internals/defaultフォルダにある「default.html」です。
このファイルを変更することでトップページのデザインを変える事が出来ます。
またダウンロードしただけのデフォルトの状態で使用する場合、「記事一覧ページ」と「カテゴリ別記事一覧ページ」のスキンはこのファイルが使用されます。
一覧ページのスキンを変更する
記事一覧ページやカテゴリー別記事一覧ページのスキンを、トップページと違う物に変更したい場合は、templates/internalsフォルダに「entry」と「category」というフォルダを作り、templates/internals/defaultフォルダにある「default.html」をそれぞれにコピーします。
それぞれのフォルダにコピーしたファイルを変更することで、記事一覧ページとカテゴリ別記事一覧ページの見た目を、個別に変更する事が出来ます。
|
temppates/ | |||||
|
internals/ | |||||
|
|
default/ | ||||
|
|
|
default.html | トップに適用されるスキン | ||
|
|
page/ | ||||
|
|
|
default.html | CMSで作られたページに適用されるスキン | ||
|
|
view/ | ||||
|
|
|
default.html | 記事に使用されるスキン | ||
|
|
entry/ | ||||
|
|
|
default.html | 記事一覧ページに使用されるスキン | ||
|
|
category/ | ||||
|
|
|
default.html | カテゴリ別記事一覧ページに使用されるスキン | ||
|
|
|||||
freoの場合、カテゴリーごとにカテゴリー別記事一覧ページのデザインを変える事が出来ます。
例えば、以下のように「カテゴリID」を設定したとします。
カテゴリー登録時に設定する「カテゴリーID」と同じ名前のHTMLファイルを、templates/internals/categoryフォルダに保存することで、それぞれに応じたスキンが適用されます。
|
nternals/ | ||||
|
category/ | ||||
|
|
domein.html | 「domein」カテゴリー適用 | ||
|
|
server.html | 「server」カテゴリーに適用 | ||
|
|
url_submission.html | 「url_submission」カテゴリに適用 | ||
|
|
precautions.html | 「precautions」カテゴリに適用 | ||
|
|
default.html | 専用のスキンが用意されていないカテゴリに適用 | ||
|
|
||||
また、「default.html」は、専用のスキンが用意されていない全てカテゴリに適用されます。
カテゴリーの登録については、「ブログのスキン設定」を参照してください。
「鈴木智子のホームページのアクセスアップ講座」では「default.html」のみを使用し、スクリプトの変数によってタイトル等を変更しているので、上記の例とは異なります。
ブログページのスキンを変更する
投稿した記事のページで使うスキンはtemplates/internals/viewフォルダにある「default.html」です。
他のページにあわせて変更します。
freoでは、CMSの機能が付いているので、概念的なものを覚えておかなければなりません。
CMS（Contents Management System）とは、HTMLやCSSの知識がなくても自由にページを作る事が出来る機能です。
freoではCMSのスキンはtemplates/internals/pageフォルダにある「default.html」です。
カテゴリ別記事一覧ページと同じように、「ページID」とtemplates/internals/pageフォルダに保存するスキンのHTMLファイル名を同じものにしておけば、個別にデザインを変更する事が出来ます。「鈴木智子のホームページのアクセスアップ講座」では、「サイトマップ」に使用しています。
|
nternals/ | ||||
|
page/ | ||||
|
|
sitemap.html | 「sitemap」というIDのページに適用 | ||
|
|
default.html | 専用のスキンが用意されていないカテゴリに適用 | ||
|
|
||||
CMSとブログは似ていますが時系列で管理する事は無く、投稿・更新を目的としていません。主にサイトを管理する為の物で、 今まで、解説してきたDreamweaverなどのWebオーサリングツールとは、全く違った仕組みです。
以上でブログ用スキンは完成です。現在のスキンをこちら上げていますので、解凍してご覧ください。
では、「ブログのスキン設定」でブログにスキンを実装してみましょう。
