• 虹色ミツバチ
  • freoカスタマイズメモ、テンプレート・プラグイン配布/officeTIPS
検索プラグイン
虹色ミツバチ

> Entry >freo>freoテンプレート>サイト全体用テンプレート> freoでサイト全体を管理するテンプレート(Simple)配布

【freo】【freoテンプレート】【サイト全体用テンプレート】freoでサイト全体を管理するテンプレート(Simple)配布

32877が配布しているfreoのテンプレートサンプルです。
サイト全体を管理する仕様になっています。

はじめに

テンプレートについて

このテンプレートは、多機能CMSツールfreoの非公式テンプレートです。
freoの導入方法はfreo公式サイトをご覧ください。
当サイトは、このテンプレートを使用することによって発生した不利益・損害等には一切責任を負わないものとします。

 

テンプレートのカスタマイズについて

テンプレート・スタイルシートの内容はご自由に編集して下さい。
テンプレートの利用・編集について許可を得る必要はありませんが、クレジットは削除しないようにお願いします。
テンプレートの再配布はご遠慮ください。

サンプル

デザイン確認用のサンプルはこちらです。
https://32877.info/download/simple_white/index.html
HTMLサンプルですので、実際の動作とは違う場合があります。

特徴

・サイトの各所でオプションの情報を取得するようにしています。
・ページメニュープラグイン部分をmenu.htmlに記述してheader.htmlから読み込んで表示させます。
・パンくずリスト表示プラグイン部分をpan.htmlに記述して各ページテンプレートから読み込んで表示させます。
・ページIDが「novel/~」以下のページを「freo/templates/page/novel.html」を使って表示します。
・ページIDが「gallery/~」以下のページを「freo/templates/page/gallery.html」を使って表示します。
・ページIDが「info/~」以下のページを「freo/templates/page/info.html」を使って表示します。
・ページ一括表示プラグインでもオプションの情報を取得して詳細なページリストを自動作成します。

ダウンロード

導入方法

  1. 公式からfreoをダウンロードし、設置してください。
  2. ご自分のfreoにアクセスし、正常に動いているかどうか確認してください。
  3. 以下のプラグインをダウンロードし、導入してください。
  4. 当サイトで配布しているテンプレートをDLし、解凍してください。
  5. [templates]フォルダを[freo]フォルダにアスキーモードでアップロードしてください。
  6. [css]フォルダを[freo]フォルダにアスキーモードでアップロードしてください。
  7. ブラウザを起動して、freoにテンプレートが反映されたか確認します。
    更新されない場合は公式のトラブルシューティング「テンプレートを編集しても反映されない」を参照してください。
  8. オプションを登録します。詳細は下記参照。
  9. ページを登録します。
    (既にfreoを使用されている場合はページID変更プラグインを利用してページIDを変更するまたはテンプレートの条件分岐を変更するなどの処置が必要です。)
  10. テンプレートの必要箇所を変更します。詳細は下記参照。

オプションを登録する

下記を参考に各種オプションを登録してください。

サイト全体で使用するオプション:
32877:サイト全体で活用できるオプション登録例

小説ページで使用するオプション:
32877:小説サイトで使うと便利なオプション登録例(1)
32877:小説サイトで使うと便利なオプション登録例(2)

ギャラリーページで使用するオプション:
32877:イラストサイトで使用すると便利なオプションの登録例(2)

インフォメーションページで使用するオプション:
32877:同人サークルインフォメーションページで使うと便利なオプション登録例

オプションの数が多い場合、freo公式のエントリー・ページによって利用するオプションを切り替えるを参考にしてください。

ページを登録する

ページを登録します。
ページIDは下記を参考にしてください。

32877:freoを小説サイトやイラストサイトとして使用するときのページID設定例
32877:freoで同人サークルインフォメーションページを作成するときのページID例

テンプレートの編集(必須)

テンプレートの中で編集が必要だと思われる箇所には★マークをつけています。

当サイトが配布しているテンプレートでは、
ページIDが「novel/~」で始まるページには[freo/templates/internals/page/novel.html]が
ページIDが「gallery/~」で始まるページには[freo/templates/internals/page/gallery.html]が
ページIDが「info/~」で始まるページには[freo/templates/internals/page/info.html]が
適用されるようになっています。

テンプレート内での条件分岐では、上記ページIDのサンプルで使用しているページIDが組みこまれています。
これをご自身で作成したページIDに変更する作業が必要です。

小説ページのテンプレート編集例

[freo/templates/internals/page]フォルダのnovel.htmlを編集します。

32行目<!-- ★novel以下分類階層ページの設定 -->部分
分類階層ページの親ページ(つまりジャンル階層のページ)IDを''内に代入します。
デフォルトでは
<!--{elseif $page.pid == 'novel/genre1' or $page.pid == 'novel/genre2'}-->
となっていますが、この'novel/ganre1'及び'novel/ganre2'をご自身で設定したジャンル階層のページのページIDに変更してください。
ジャンル階層のページが2つ以上ある場合は、「or $page.pid == 'novel/genre3' or $page.pid == 'novel/genre4' …」と追記するようにしてください。

ギャラリーページのテンプレート編集例

[freo/templates/internals/page]フォルダのgallery.htmlを編集します。

34行目<!-- ★gallery以下分類階層ページの設定 -->部分
分類階層ページの親ページ(つまりジャンル階層のページ)IDを''内に代入します。
デフォルトでは
<!--{elseif $page.pid == 'gallery/genre1' or $page.pid == 'gallery/genre2'}-->
となっていますが、この'gallery/ganre1'及び'gallery/ganre1'をご自身で設定したジャンル階層のページのページIDに変更してください。
ジャンル階層のページが2つ以上ある場合は、「or $page.pid == 'gallery/genre3' or $page.pid == 'gallery/genre4' …」と追記するようにしてください。

35行目<!-- ★記号を使って表示したい分類階層ページの設定 -->
記号を使って表示する分類ページを設定します。
<!--{if $page.id == 'gallery/genre1/aaa'}-->の'gallery/genre1/aaa'部分をご自身で設定した分類階層のページのページIDに変更してください。
記号を使って表示したい分類ページが複数ある場合は、「or $page.id == 'gallery/genre1/bbb' or $page.id == 'gallery/genre1/ccc' …」と追記するようにしてください。

42行目<!-- ★画像を使って表示したい分類階層ページの設定 -->
画像を使って表示する分類ページを設定します。
<!--{elseif $page.id == 'gallery/genre1/bbb'}-->の'gallery/genre1/bbb'部分をご自身で設定した分類階層のページのページIDに変更してください。
画像を使って表示したい分類ページが複数ある場合は、「or $page.id == 'gallery/genre1/aaa' or $page.id == 'gallery/genre1/ccc' …」と追記するようにしてください。

49行目<!-- ★タイトルを使って表示したい分類階層ページの設定 -->
タイトルを使って表示する分類ページを設定します。
<!--{elseif $page.id == 'gallery/genre1/ccc'}-->の'gallery/genre1/ccc'部分をご自身で設定した分類階層のページのページIDに変更してください。
タイトルを使って表示したい分類ページが複数ある場合は、「or $page.id == 'gallery/genre1/aaa' or $page.id == 'gallery/genre1/bbb' …」と追記するようにしてください。

56行目<!-- ★ページの並び順を使って表示したい分類階層ページの設定 -->
タイトルを使って表示する分類ページを設定します。
<!--{elseif $page.id == 'gallery/genre2/ddd'}-->の'gallery/genre2/ddd'部分をご自身で設定した分類階層のページのページIDに変更してください。
タイトルを使って表示したい分類ページが複数ある場合は、「or $page.id == 'gallery/genre1/aaa' or $page.id == 'gallery/genre1/bbb' …」と追記するようにしてください。

ギャラリーで使用するページ一括表示プラグインテンプレートの編集

ギャラリーページでは、ページ一括表示プラグインを利用してページの一覧を表示しています。
プラグインテンプレート内部で、それぞれの分類ページをどのように表示するかを条件分岐しています。

[freo/templates/plugins/page_all/gallery]フォルダ内のgenre.htmlを編集します。

8行目<!-- ★記号を使って表示したい分類階層ページの設定 -->
記号を使って表示する分類階層ページIDを設定します。
<!--{if $page.id == 'gallery/genre1/aaa'}-->の'gallery/genre1/aaa'部分をご自身で設定した分類階層のページのページIDに変更してください。
記号を使って表示したい分類ページが複数ある場合は、「or $page.id == 'gallery/genre1/bbb' or $page.id == 'gallery/genre1/ccc' …」と追記するようにしてください。

12行目<!-- ★画像を使って表示したい分類階層ページの設定 -->
画像を使って表示する分類ページを設定します。
<!--{elseif $page.id == 'gallery/genre1/bbb'}-->の'gallery/genre1/bbb'部分をご自身で設定した分類階層のページのページIDに変更してください。
画像を使って表示したい分類ページが複数ある場合は、「or $page.id == 'gallery/genre1/aaa' or $page.id == 'gallery/genre1/ccc' …」と追記するようにしてください。

16行目<!-- ★タイトルを使って表示したい分類階層ページの設定 -->
タイトルを使って表示する分類ページを設定します。
<!--{elseif $page.id == 'gallery/genre1/ccc'}-->の'gallery/genre1/ccc'部分をご自身で設定した分類階層のページのページIDに変更してください。
タイトルを使って表示したい分類ページが複数ある場合は、「or $page.id == 'gallery/genre1/aaa' or $page.id == 'gallery/genre1/bbb' …」と追記するようにしてください。

20行目<!-- ★ページの並び順を使って表示したい分類階層ページの設定 -->
タイトルを使って表示する分類ページを設定します。
<!--{elseif $page.id == 'gallery/genre2/ddd'}-->の'gallery/genre2/ddd'部分をご自身で設定した分類階層のページのページIDに変更してください。
タイトルを使って表示したい分類ページが複数ある場合は、「or $page.id == 'gallery/genre1/aaa' or $page.id == 'gallery/genre1/bbb' …」と追記するようにしてください。

更新履歴

  2012.06.29  配布開始。
  2012.07.22  [templates/internals/page]内の各テンプレート中の「ページ移動」の見出しを<h6>ページ移動</h6>に変更
  2012.09.03  [templates/internals/page/gallery.html]の307行目の「</div><!-- #product -->」を308行目に変更。
  2013.01.23 フォルダ構成を修正。

ページ移動

関連記事

ユーティリティ

Twitter

ページ上部へ