Read Me : wm_freo2

• 概要
• 利用規約
• テンプレート取扱いの注意点 ※必ず確認してください
• テンプレートの導入
  • 基本セットの適用
  • プラグイン導入に伴う補足
  • 画像一覧のサムネイルについて
  • トップページの表示変更
  • 『gallery.html』について
  • ネタバレボタンについて
  • サブメニュー(上部ログインメニュー)が不要な時は
• デザイン『finch』の解説
  • レイアウトの変更
  • カスタマイズ
    • ファイル構成
• デザイン『swallow』の解説
  • デザイン適用
  • レイアウトの変更
  • カスタマイズ
    • ファイル構成
    • タイトル画像の変更
• デザイン『owl』の解説
  • デザイン適用
  • レイアウトの変更
  • カスタマイズ
    • ファイル構成
    • タイトル画像の変更
• 更新履歴
• Thanks

概要

• freo用テンプレートです。動作確認バージョンは1.16.0です。
• このテンプレートは、パンくずリスト表示プラグイン、タイトル設定プラグイン、メニュー登録プラグインの導入が必要になります。
• PC訪問者向けページのテンプレートです。管理ページはプレビューのみ変化します。
• freo付属のテンプレートとは異なり、『ファイルのイメージ(添付ファイルの手動登録サムネイル)』は本文内には表示せず、一覧ページやページ検索結果の本文抜粋等に使用されます。
• ブラウザのCSS実装状況によって、ディテールの異なる事があります。

利用規約

• フッターにリンク表記をしてください。
  templates/footer.html - <a href="http://www.usamimi.info/~witchmakers/">wmks</a>
• カスタマイズはご自由にどうぞ。
• サポートは行っていません。導入・カスタマイズに関するご質問には対応しておりませんので、予めご了承ください。
• ファイルを使用した事による如何なる損害も当方は責任を負いません。

テンプレート取扱いの注意点

freoのテンプレート共通の注意点

• ファイル編集の際、文字コードはUTF-8N(UTF-8 BOM無し)で保存してください。その他の文字コードで保存した場合、templates/→文字化け・エラー、css/→スタイル欠け等が発生する事があります。
  ※日本語等の2バイト文字を含まないファイルを開いた時に、文字コードがshift-JISになっていたりする事があるので、そのまま保存してしまわないように注意してください。
• templates/内のファイルを編集・変更した際は、templates_c/内の拡張子が.phpのファイルを全て削除してください。残っていると変更が反映されない事があります。
• templates/内のファイルに単独で{や}を書くとエラーになります。これらの文字を含むブログパーツのコード等を、テンプレートに張り付けたい場合は、以下の様に{literal}～{/literal}で囲む必要があります。

  {literal}
  ここに張り付けたいコード
  {/literal}

このテンプレートの注意点

• このテンプレートは、css/common.cssとcss/default.cssを読み込みません。PC訪問者向けページの表示に関して、追記の必要がある場合は、css/wm_freo2/使用しているデザイン/style.cssに追記してください。
• 本体・プラグインのバージョンが異なる場合、配布元の更新履歴で変更箇所を確認して対応してください。

テンプレートの導入

基本セットの適用

作業前にテンプレートのバックアップを取る等して、元の状態に戻せるように準備してから作業してください。

1. パンくずリスト表示プラグインを導入してください(※『導入方法』内の『テンプレートの編集』は不要)。
2. メニュー登録プラグインを導入してください(※『導入方法』内の『テンプレートの編集』は不要)。
3. タイトル設定プラグインを導入してください(※『導入方法』内の『テンプレートの編集』は不要)。
4. 管理メニュー＞システム＞設定管理＞プラグインの設定＞タイトル設定＞タイトル、のフォームの内容を全て削除し、以下の内容を張り付けてください。

   category,Blog
   comment,Comment
   entry,Blog
   file,File
   filter,Filter : フィルター設定
   information,Information
   login,Login
   profile,Profile
   regist,Regist : ユーザー登録
   reissue,Forgot Password : パスワード再発行
   user,User Page
   view,Blog
   
   clap,Clap
   contact,Contact
   entry_gallery,Blog Image List
   entry_image,Gallery
   media_all,Gallery
   media_document,Text
   media_list,Gallery
   message,Message
   page_image,Gallery
   page_image_categorized,Gallery
   search,Search

5. default_set/の中にある、css・images・templatesを設置したfreoの同名フォルダに上書きしてください。
6. 設置したfreoのtemplates_c/内にある、拡張子が.phpのファイルを全て削除してください。

• プラグインを導入している場合は、引き続きプラグイン導入に伴う補足を確認し、必要な作業を行ってください。

プラグイン導入に伴う補足

プラグイン導入時にご確認ください。リストにないプラグインで、表示に調整が必要な場合は頑張ってください。

～で上書きとなっているものは、プラグイン導入後に、設置したfreoのtemplates/plugins/にある同名のフォルダに上書きしてください(※上書き後templates_c/内にある、拡張子が.phpのファイルを全て削除してください)。

プラグイン名	Ver.	テンプレート	CSS
エントリーイメージ表示	1.5.0	plugins/entry_image/で上書き	記述済
関連エントリー表示プラグイン	1.3.0	記述済	記述済
エントリータグクラウド表示	1.1.0	記述済	記述済
ページイメージ表示	1.5.0	plugins/page_image/で上書き	記述済
ページイメージ分類別表示	1.4.0	plugins/page_image_categorized/で上書き	記述済
パンくずリスト表示 *導入必須	1.1.0	記述済	記述済
メディア一括表示	1.2.0	plugins/media_all/で上書き	記述済
メディア表示	1.2.1	plugins/media_list/で上書き	記述済
メディア文章表示	1.2.0	plugins/media_document/で上書き	記述済
検索	1.4.0	plugins/search/で上書き	記述済
タイトル設定 *導入必須	1.0.0	記述済	不要
メニュー登録 *導入必須	1.0.3	記述済	記述済
メール送信	1.0.1	plugins/contact/で上書き	記述済
拍手送信	1.1.1	plugins/clap/で上書き	記述済
メッセージ登録	1.0.0	plugins/message/で上書き	記述済
フィルター認証確認プラグイン	1.0.0	記述済 plugins/filter_confirm/で上書き(※フィルターIDが『r18』以外の場合は、テンプレート内に6箇所ある『r18』という文字を任意のIDに書き換えてください)	記述済

メニュー登録プラグインについての補足事項

• 管理メニュー＞プラグイン＞メニュー登録＞メニュー管理からメニューを登録出来ます。
  • 『説明』の部分はリンクのtitle属性になります。
  • URL設定例
    • Home freo設置ディレクトリのURL
    • Blog /entry
    • Gallery /entry_gallery
• メニューが未登録の場合は、『Home』と『Blog』へのリンクが表示されるようになっています。

詳しくは、メニュー登録プラグインの配布ページを確認してください。

タイトル設定プラグインについての補足事項

• 管理メニュー＞システム＞設定管理＞プラグインの設定＞タイトル設定＞タイトルから設定できます。
• <title>～</title>だけでなく、『パンくず』・『見出し』も変化します。
  例えば、login,Loginとなっている行を、login,ログインにすると、ログインページの『パンくず』・『見出し』がLoginからログインに変化します。

詳しくは、タイトル設定プラグインの配布ページを確認してください。

画像一覧のサムネイルについて

対象	仕様
エントリーイメージ表示プラグイン ページイメージ表示プラグイン ページイメージ分類別表示プラグイン extra/gallery/gallery.htmlの一覧	<ul class="gallery"> 登録した『ファイルのイメージ』のサイズで表示されます。 閲覧制限記事に専用画像を表示は導入済み。(images/wm_freo2/forbidden.png(55x55)※この画像のサイズを変更する場合、テンプレート側のimgタグのサイズ指定も変更する必要があります)
エントリーギャラリー表示プラグイン *本体標準装備	<ul class="gallery fix picture_M"> → 一覧ページ、およびextra/toppage/info1/の新着 <ul class="gallery fix picture_S"> → ユーティリティ内新着 リサイズ(CSS制御)し、正方形の統一サイズになります。 閲覧制限記事に専用画像を表示は導入済み。(images/wm_freo2/使用しているデザイン/forbidden_fix.png) サイズ変更はcss/wm_freo2/使用しているデザイン/style.cssを編集します(★コメントがついています)。
メディア一括表示プラグイン メディア表示プラグイン	<ul class="gallery fix picture_M"> リサイズ(CSS制御)し、正方形の統一サイズになります。 サイズ変更はcss/wm_freo2/使用しているデザイン/style.cssを編集します(★コメントがついています)。

• 公式配布ページにある『画像とともに記事のタイトルを表示』用のCSSは記述していません。
• 閲覧制限記事は管理メニュー＞システム＞設定管理＞本体の設定＞表示設定＞閲覧制限＞制限された記事の表示『一覧に表示する/一覧に表示しない』という部分で表示が変化します。

トップページの表示変更

テンプレート導入後に、設置したfreoのtemplates/internals/default/内にあるdefault.htmlに上書きしてください(※上書き後templates_c/内にある、拡張子が.phpのファイルを全て削除してください)。

概要	テンプレート
ブログの1ページ目と同じ表示 (インフォメーションを表示している場合は、エントリー上部に表示)	初期セットに同梱
インフォメーション ＋ブログ新着(日付-カテゴリ-タイトル) ＋エントリーギャラリー新着	extra/toppage/info1/内のdefault.htmlで上書き
インフォメーション ＋ユーティリティエリアにブログ新着(日付-カテゴリ-タイトル)とエントリーギャラリー新着	extra/toppage/info2/内のdefault.htmlで上書き

• インフォメーションは、管理メニュー＞システム＞設定管理＞本体の設定＞表示設定＞インフォメーション＞インフォメーション機能『利用する』に設定すると、管理メニュー＞システム＞インフォメーション管理で登録可能になります。『エントリーID』と『ページID』は特に必要なければ、空にしておいてください(登録すると抜粋で表示されます)。
• ブログ新着は、管理メニュー＞システム＞設定管理＞プラグインの設定＞新着エントリー表示、エントリーギャラリー新着は、管理メニュー＞システム＞設定管理＞プラグインの設定＞エントリーギャラリー表示＞新着設定から、件数を設定してください。

『gallery.html』について

『freoでサイト全体を管理する』と同じ構成のギャラリーを使用している場合のファイルです。

extra/gallery/内にあるgallery.htmlを設置したfreoのtemplates/internals/page/内にアップロードしてください。

初めてページ構築する人向け補足

• ページに設定する『ID』は、ページID（ページ登録時に入力する）と親ID（プルダウンから選択する）の2種類があります。
• ページID入力エリアは、初回登録時のみ表示され、以降は表示されません。後から変更する場合はプラグインの導入が必要です。
• ページIDを適切に階層化して記述していない場合、gallery.htmlが適用されないので注意してください。

構築例）

• ギャラリーページ | ページID:gallery 親ID:なし
  • カテゴリページ | ページID:gallery/kinoko 親ID:gallery
    • 作品ページ | ページID:gallery/kinoko/shimeji 親ID:gallery/kinoko

IDに含まれるgalleryの部分を別の物にする場合は、テンプレートのファイル名とテンプレート内に含まれるコードを変更する必要があります。

ネタバレボタンについて

『ネタバレボタンの実装について』のネタバレボタンを実装している人向け補足です。

• 導入方法にある、css/common.css及びcss/default.cssへの追記は不要です。※css/wm_freo2/style.css内div.hidearea ネタバレボタンに記述済み。

サブメニュー(上部ログインメニュー)が不要な時は

サブメニュー内には、ログインメニューの他に訪問者による新規ユーザー登録及びユーザーメニュー、パスワード再発行、フィルター設定を含みます。これらを使用する場合は、リンクを別の場所に移す等してください。

1. templates/header.htmlを開いて、{* ▼ サブメニュー ▼ *}～{* ▲ サブメニュー ▲ *}の間の行を全て削除してください。
2. 書き換えたheader.htmlを、設置したfreoのtemplates/header.htmlに上書きしてください。
3. 設置したfreoのtemplates_c/内にある、拡張子が.phpのファイルを全て削除してください。

デザイン『finch』の解説

このデザインは、『wm_freo2』の初期セットに含まれます。

finch : レイアウトの変更

templates/header.htmlにある、<body>タグに、使用したいレイアウトのクラスを付加する事で、レイアウトを変更します。

1. templates/header.htmlを開き、<body>タグに、使用したいレイアウトのクラスを付加します(使用できるレイアウト一覧は後述)。
   例) 全体幅780px サイドバー右

   <body class="width_780">

   例) 全体幅780px サイドバー左

   <body class="width_780 sidebar_left">

2. 書き換えたheader.htmlを、設置したfreoのtemplates/header.htmlに上書きします。
3. 設置したfreoのtemplates_c/内にある、拡張子が.phpのファイルを全て削除してください。

finch : レイアウト一覧

クラス	概要
クラス無し(初期状態)	全体幅980 サイドバー右
width_880	全体幅880 サイドバー右
width_780	全体幅780 サイドバー右
width_980 sidebar_left	全体幅980 サイドバー左
width_880 sidebar_left	全体幅880 サイドバー左
width_780 sidebar_left	全体幅780 サイドバー左

finch : カスタマイズ

finch : ファイル構成

• css/
  • wm_freo2/
    • layout.css - 全体のレイアウトに関する記述がまとめてあります。基本的に編集しません。
    • style.css - 共通の指定、色の指定、細部の指定に関する記述をしています。基本文字色・基本リンク色・背景等の指定は★コメント付きでまとめてあります。カスタマイズは主にこちらを調整します。
    • ie.css - IE6/7のレイアウトずれ等の目立つ部分のみ補正します。基本的に編集しません。
• images/
  • wm_freo2/
    • finch/ - デザイン『finch』で使用する画像ファイル。

デザイン『swallow』の解説

swallow : デザイン適用

基本セットの適用を済ませてから作業してください。
※既に導入済みで、<body>タグにレイアウト変更用のクラスを付加している場合は、クラス無し状態にしておいてください。

1. design/swallow/の中にある、css/とimages/を設置したfreoの同名フォルダに上書きしてください。
2. templates/header.htmlを開いて、上から10行目辺りにある

   <link rel="stylesheet" href="{$freo.core.http_url}{$smarty.const.FREO_CSS_DIR}wm_freo2/finch/style.css" type="text/css" media="all" />
   <link rel="stylesheet" href="{$freo.core.http_url}{$smarty.const.FREO_CSS_DIR}wm_freo2/finch/layout.css" type="text/css" media="all" />
   <!--[if lt IE 8]><link rel="stylesheet" href="{$freo.core.http_url}{$smarty.const.FREO_CSS_DIR}wm_freo2/finch/ie.css" type="text/css" media="all" /><![endif]-->

   を、以下の様にfinchの部分を３箇所、swallowに書き換えます。

   <link rel="stylesheet" href="{$freo.core.http_url}{$smarty.const.FREO_CSS_DIR}wm_freo2/swallow/style.css" type="text/css" media="all" />
   <link rel="stylesheet" href="{$freo.core.http_url}{$smarty.const.FREO_CSS_DIR}wm_freo2/swallow/layout.css" type="text/css" media="all" />
   <!--[if lt IE 8]><link rel="stylesheet" href="{$freo.core.http_url}{$smarty.const.FREO_CSS_DIR}wm_freo2/swallow/ie.css" type="text/css" media="all" /><![endif]-->

3. 書き換えたtemplates/header.htmlを設置したfreoの同名ファイルに上書きします。
4. 設置したfreoのtemplates_c/内にある、拡張子が.phpのファイルを全て削除してください。

※css/wm_freo2/finch/とimages/wm_freo2/finch/は、不要であれば削除してください。

swallow : レイアウトの変更

templates/header.htmlにある、<body>タグに、使用したいレイアウトのクラスを付加する事で、レイアウトを変更します。

1. templates/header.htmlを開き、<body>タグに、使用したいレイアウトのクラスを付加します(使用できるレイアウト一覧は後述)。
   例) 全体幅780px サイドバー右

   <body class="width_780">

   例) 全体幅780px サイドバー左

   <body class="width_780 sidebar_left">

2. 書き換えたheader.htmlを、設置したfreoのtemplates/header.htmlに上書きします。
3. 設置したfreoのtemplates_c/内にある、拡張子が.phpのファイルを全て削除してください。

レイアウト一覧 『swallow』

クラス	概要
クラス無し(初期状態)	全体幅980 サイドバー右
width_880	全体幅880 サイドバー右
width_780	全体幅780 サイドバー右
width_980 sidebar_left	全体幅980 サイドバー左
width_880 sidebar_left	全体幅880 サイドバー左
width_780 sidebar_left	全体幅780 サイドバー左

swallow : カスタマイズ

swallow : ファイル構成

• css/
  • wm_freo2/
    • swallow/
      • layout.css - 全体のレイアウトに関する記述がまとめてあります。基本的に編集しません。
      • style.css - 共通の指定、色の指定、細部の指定に関する記述をしています。基本文字色・基本リンク色・背景等の指定は★コメント付きでまとめてあります。カスタマイズは主にこちらを調整します。
      • ie.css - IE6/7のレイアウトずれ等の目立つ部分のみ補正します。基本的に編集しません。
• images/
  • wm_freo2/
    • swallow/ - デザイン『swallow』で使用する画像ファイル。

swallow : タイトル画像の変更

位置やサイズを変更せずに画像の上書きだけで変更する場合

横300px×縦55pxのtitle.pngというPNG形式の画像を作成し、images/freo2/swallow/内にある同名ファイルに上書きしてください。

位置やサイズ、ファイル名等も変更する場合

css/freo2/swallow/style.cssを開いて、2. 詳細指定という分類の中の、#header ヘッダー・#title タイトル・#menu メニューという辺りで調整してください。

デザイン『owl』の解説

owl : デザイン適用

基本セットの適用を済ませてから作業してください。
※既に導入済みで、<body>タグにレイアウト変更用のクラスを付加している場合は、クラス無し状態にしておいてください。

1. design/owl/の中にある、css/とimages/を設置したfreoの同名フォルダに上書きしてください。
2. templates/header.htmlを開いて、上から10行目辺りにある

   <link rel="stylesheet" href="{$freo.core.http_url}{$smarty.const.FREO_CSS_DIR}wm_freo2/finch/style.css" type="text/css" media="all" />
   <link rel="stylesheet" href="{$freo.core.http_url}{$smarty.const.FREO_CSS_DIR}wm_freo2/finch/layout.css" type="text/css" media="all" />
   <!--[if lt IE 8]><link rel="stylesheet" href="{$freo.core.http_url}{$smarty.const.FREO_CSS_DIR}wm_freo2/finch/ie.css" type="text/css" media="all" /><![endif]-->

   を、以下の様にfinchの部分を３箇所、owlに書き換えます。

   <link rel="stylesheet" href="{$freo.core.http_url}{$smarty.const.FREO_CSS_DIR}wm_freo2/owl/style.css" type="text/css" media="all" />
   <link rel="stylesheet" href="{$freo.core.http_url}{$smarty.const.FREO_CSS_DIR}wm_freo2/owl/layout.css" type="text/css" media="all" />
   <!--[if lt IE 8]><link rel="stylesheet" href="{$freo.core.http_url}{$smarty.const.FREO_CSS_DIR}wm_freo2/owl/ie.css" type="text/css" media="all" /><![endif]-->

3. 書き換えたtemplates/header.htmlを設置したfreoの同名ファイルに上書きします。
4. 設置したfreoのtemplates_c/内にある、拡張子が.phpのファイルを全て削除してください。

※css/wm_freo2/finch/とimages/wm_freo2/finch/は、不要であれば削除してください。

owl : レイアウトの変更

templates/header.htmlにある、<body>タグに、使用したいレイアウトのクラスを付加する事で、レイアウトを変更します。

1. templates/header.htmlを開き、<body>タグに、使用したいレイアウトのクラスを付加します(使用できるレイアウト一覧は後述)。
   例) 全体幅780px サイドバー右

   <body class="width_780">

   例) 全体幅780px サイドバー左

   <body class="width_780 sidebar_left">

2. 書き換えたheader.htmlを、設置したfreoのtemplates/header.htmlに上書きします。
3. 設置したfreoのtemplates_c/内にある、拡張子が.phpのファイルを全て削除してください。

レイアウト一覧 『owl』

クラス	概要
クラス無し(初期状態)	全体幅980 サイドバー右
width_880	全体幅880 サイドバー右
width_780	全体幅780 サイドバー右
width_980 sidebar_left	全体幅980 サイドバー左
width_880 sidebar_left	全体幅880 サイドバー左
width_780 sidebar_left	全体幅780 サイドバー左

owl : カスタマイズ

owl : ファイル構成

• css/
  • wm_freo2/
    • owl/
      • layout.css - 全体のレイアウトに関する記述がまとめてあります。基本的に編集しません。
      • style.css - 共通の指定、色の指定、細部の指定に関する記述をしています。基本文字色・基本リンク色・背景等の指定は★コメント付きでまとめてあります。カスタマイズは主にこちらを調整します。
      • ie.css - IE6/7のレイアウトずれ等の目立つ部分のみ補正します。基本的に編集しません。
• images/
  • wm_freo2/
    • owl/ - デザイン『owl』で使用する画像ファイル。

owl : タイトル画像の変更

位置やサイズを変更せずに画像の上書きだけで変更する場合

横300px×縦89pxのtitle.pngというPNG形式の画像を作成し、images/freo2/owl/内にある同名ファイルに上書きしてください。

位置やサイズ、ファイル名等も変更する場合

css/freo2/owl/style.cssを開いて、2. 詳細指定という分類の中の、#title タイトルという辺りで調整してください。

update

2013/01/14

記述ミス修正しました。

• templates/path.html ブログの日別アーカイブの時のパンくずが「1 Jan, 2013」の様になっていたのを、「Jan 1, 2013」になるように修正

ColorBoxのcssを付属しました(default_setに追加*全デザイン共通)。

• css/wm_freo2/colorbox.css
• images/wm_freo2/colorbox_control.png
• images/wm_freo2/colorbox_overlay.png
• images/wm_freo2/colorbox_loading.gif
• templates/header.html colorbox.cssの参照先変更

2013/01/11

公開

Thanks

• freo.jp
• ColorBox
• Ajaxload.info - ColorBoxのローディング画像を作成しました
• Maniackers Design - 『swallow』・『owl』のサンプル用のタイトル画像のフォントに『176MKSD-AL』を使用しています

Author: witchmakers : wmks (# 更新情報・お知らせ用 twitter)