freo 対応スキン共通 説明書

基本的に freo の規定に準じます。

• 著作権
  • phpプログラムの著作権は freo にあります。
  • スキンのレイアウトの著作権は KURAGEYA にあります。
• 著作権表示は footer.html に記述されています。著作権表示の削除は禁止です。
• 無断再配布・転載は禁止です。

• スキンをダウンロード及び使用したことによって トラブルや損害が発生しても、当サイトはその責任は一切負わないものとします。

• ソースの書き換えなど、カスタマイズは基本的に自己責任で自由です。
  背景や文字の色、タイトル、リンクなどを変更するだけでもだいぶイメージが変わります。
• 同梱画像の加工や差し替えもOKです。背景画像やタイトルなどは差し替え前提で作っているので、ぜひどんどんカスタマイズしてください。

• 配布目的の流用は禁止です。
• 自分のサイトのデザインやサイト内で使用している他CGIに、スキンのデザインを流用したり、素材を使用したりするのは許可します。
  • そのCGIの製作者が他素材で改造を許可しているかどうかはご自分でご確認ください。
  • 他サイトで配布しているスキン・テンプレとの中途半端な合成は、ご遠慮ください。
  • 同サイトでそのデザインのスキンを使用している場合、新たにリンクや表記等はしなくてもよいです。
  • スキンを使用せずにデザインや素材を流用する場合は、盗作などの誤解を避けるため、サイト内のどこかに必ず「デザインを借りている」旨とリンクを記述してください。

スキンをご使用になるには freoが正常に動作することが前提条件となります。
あらかじめ、freo設置を完了させ、デフォルトできちんと動くかどうかの動作確認をおこなってください。

この時点でのトラブルは、本体の設置失敗です。

• freo に行き、 freo本体をダウンロードし、設置します。
• スキン変更をともなうバージョンアップがあったときは、当サイトのスキンが対応していない可能性がありますので、更新情報に注意してください。

• 無事設置できたら、管理画面で設定をします。
• スキン変更の前に、基本的な設定と使いたい機能や表示に関する設定をしっかり決めます。

• スキン変更の際、ファイルが上書きされます。バックアップを取っておき、元に戻せるようにしておいてください。
• 他のスキンを使用していたり、すでにカスタマイズ済な場合は、すべてをデフォルトのスキンに戻してからのほうが変更が確実です。
• 管理画面や携帯の表示は変わりません。

ダウンロード

• HTMLテンプレートと使用したいデザインCSSの両方をダウンロードしてください。
  • HTMLtemplates/　　・・・　共通のHTMLンプレート（デザインCSSは Basic1）　[内容詳細]
  • CSS-○○/　　・・・　cssと画像ファイル　[内容詳細]

基本

HTMLテンプレート上書き

• とりあえず HTMLtemplates/default/ だけ使用します。

1. HTMLtemplates/default/templates/ の内容を、 templates/ 内に上書きアップロードします。
2. HTMLtemplates/default/images/ の内容を、 images/ 内に上書きアップロードします。
3. HTMLtemplates/default/css/ にある K.css を、 css/ 内に上書きアップロードします。
4. templates_c/ 内にある、拡張子が php のファイルをすべて削除します。　→ freo.jp (トラブルシューティング)
5. ブラウザで表示を更新して、スキン変更が反映されたか確認します。（※　この時点では、Basic1のデザインです）

CSSデザイン変更

• Basic1以外のデザインを使用する場合は、別にダウンロードしたデザインCSSを使用します。

1. CSS-○○/○○/images/ の内容を、 images/ 内に上書きアップロード
2. CSS-○○/○○/css/ にある K.css を、 css/ 内に上書きアップロード
3. ブラウザで表示を更新して、変更が反映されたか確認します。
4. 必要に応じて、トップページ、個別テンプレート、プラグイン用スキンを使用します。
5. 必要に応じて、スタイルシートの編集や画像の置き換えをして、自分好みにカスタマイズします。

• HTMLtemplates/
  • Readme_freo.html　　・・・　スキン共通の説明書
  • default/　（基本テンプレート）
    • templates/
      • internals/admin/ （プレビュー）　　・・・　entry_preview.html / information_preview.html / page_preview.html
      • internals/comment/ （コメント投稿）　　・・・　preview.html
      • internals/default/ （トップページ）　　・・・　default.html
      • internals/filter/ （フィルター設定）　　・・・　default.html
      • internals/information/ （インフォメーション）　　・・・　default.html
      • internals/login/ （ログイン）　　・・・　default.html
      • internals/page/ （各ページ表示）　　・・・　default.html
      • internals/profile/ （プロフィール）　　・・・　default.html
      • internals/regist/ （ユーザー登録）　　・・・　complete.html、default.html、preview.html
      • internals/reissue/ （パスワード再発行）　　・・・　complete.html、default.html、send.html
      • internals/user/ （ユーザー）　　・・・　comment_form.html、comment_preview.html、default.html、password_form.html、profile_form.html、profile_preview.html
      • internals/view/ （各記事表示）　　・・・　default.html
      • footer.html （共通下部）
      • header.html （共通上部）
      • utility.html （サイドバー）
      • utility_category.html （サイドバーのカテゴリー）
    • css/ （スタイルシート）
      • K.css
    • images/K/ （画像）
      • ○○.gif 、 ○○.jpg
  • custom/ （カスタマイズテンプレート）
    • 1column　（1カラムスキン用）
      • utility.html / utility4.html / entry_preview.html / information_preview.html / page_preview.html
    • page/　（ページ個別テンプレート）
      • gallery.html （ギャラリー用）
    • page_sidebar1-space/　（ページ個別テンプレート - サイドバーの空間）
      • default.html / gallery.html（ギャラリー用） / novel.html（小説用）
    • page_sidebar2-page_child/　（ページ個別テンプレート - サイドバーに目次を表示）
      • default.html / novel.html（小説用）
    • page_sidebar3-page_all/　（ページ個別テンプレート - サイドバーにページ目次を一覧表示）
      • default.html / gallery.html（ギャラリー用） / novel.html（小説用）
    • page_sidebar-preview　（サイドバーのあるプレビュー）
      • information_preview.html（インフォメーション） / page_preview.html（ページ）
    • toppage/　（トップページの表示を変更したテンプレート）
      • templates/internals/category/ （カテゴリー別表示）　　・・・　default.html
      • templates/internals/default/ （トップページ）　　・・・　default.html
      • templates/internals/entry/ （ブログ一覧）　　・・・　default.html
  • plugin/　（プラグイン用テンプレート）
    • bookmark/ （ブックマーク登録プラグイン）　　・・・　default.html
    • clap/ （拍手送信プラグイン）　　・・・　default.html、error.html
    • contact/ （メール送信プラグイン）　　・・・　complete.html、default.html、preview.html
    • entry_gallery/ （エントリーギャラリー表示プラグイン）　　・・・　default.html
    • entry_image/ （エントリーイメージ表示プラグイン）　　・・・　default.html
    • message/ （メッセージ登録プラグイン）　　・・・　complete.html、default.html、preview.html
    • page_all/ （ページ一括表示プラグイン）　　・・・　default.html
    • page_image/ （ページイメージ表示プラグイン）　　・・・　default.html
    • page_image_categorized/ （ページイメージ分類別表示プラグイン）　　・・・　default.html
    • paint/ （イラスト投稿プラグイン）　　・・・　default.html
    • password/ （パスワード認証プラグイン）　　・・・　default.html
    • protect/ （直接リンク防止プラグイン）　　・・・　default.html

• CSS-○○/
  • ○○/
    • css/ （スタイルシート）
      • K.css
    • images/K/ （画像）
      • ○○.gif 、 ○○.jpg

1. 1カラム用のスキンの場合は、 HTMLtemplates/custom/1column/ 内にある utility.html を代わりに使用します。
   • utility.html は以下のような構造になっています。（サイドバーの内容を３つに分割しています）

     <div id="utility">
     	<h2>ユーティリティ</h2>
     
     	<div class="utility-1column">　～サイドバーの内容その１～　</div>
     	<div class="utility-1column">　～サイドバーの内容その２～　</div>
     	<div class="utility-1column">　～サイドバーの内容その３～　</div>
     
     </div>
     <br class="cancel" />

   • サイドバーの項目の削除や移動は サイドバーから不必要な項目を消す を参考にしてください。（行は異なります）
   • ４つに分割したいときは HTMLtemplates/custom/1column/ 内にある utility4.html を utility.html に名前変更して使用します。
   • サイドバー付ページ、サイドバー付ギャラリーページ、サイドバー付小説ページ を使用する場合は、
     <div class="utility-1column"> と </div> を追記し、同様の構成に修正してください。
2. エントリープレビュー用の entry_preview.html を templlates/internals/admin/ 内に上書きアップロード
   （ページやインフォメーションのプレビューも同様のデザインにしたいときは information_preview.html、page_preview.html も使用）

ブログっぽくないように専用のトップページを表示します。

1. まず、管理メニューにログインして以下の設定をします。　→　freo.jp (サイト全体を管理するカスタマイズ)
   1. 「システム」→「設定管理」→「本体の設定」→「表示設定」→「インフォメーション」→「インフォメーション機能」を 『利用する』
   2. 「システム」→「インフォメーション編集」で、初期ページに表示する内容を設定
   3. IDに 親ID/ を入れて、親子関係を明確にしてページを登録
      • 例１ ： ギャラリー
        ギャラリー用ページ （gallery）　＞　分類用ページ１ （gallery/photo）　＞　作品ページ１ （gallery/photo/1）
      • 例２ ： 小説
        小説用ページ （novel）　＞　分類用ページ１ （novel/long）　＞　作品ページ１ （novel/long/1）
2. HTMLtemplates/custom/toppage/templates/ の内容を、 templlates/ 内に上書きアップロードします。

ギャラリーページ

1. HTMLtemplates/custom/page/ 内にある gallery.html を、 templlates/internals/page/ 内にアップロード

特徴

• 目次が添付ファイルのいめーじになります。ギャラリー向けのページです。
• IDに 親ID gallery/ を入れて、親子関係を明確にしてページを登録することが大切です。
  • ギャラリー用ページ [ ID: gallery | タイトル例: ギャラリー | 本文は空欄 ]
    • 分類用ページ１ [ ID例: gallery/original | タイトル例: オリジナル | 本文は空欄 ]
      • 作品ページ１ [ ID例: gallery/original/1 ]
      • 作品ページ２ [ ID例: gallery/original/2 ]
    • 分類用ページ２ [ ID例: gallery/fanart | タイトル例: 二次創作 | 本文は空欄 ]
      • 作品ページ１ [ ID例: gallery/fanart/1 ]
      • 作品ページ２ [ ID例: gallery/fanart/2 ]

サイドバーの空間確保

1. HTMLtemplates/custom/page_sidebar1-space/ 内の default.html、 gallery.html（ギャラリー用）、 novel.html（小説用）
   から使用するものに ページアーカイブ、ページカレンダー、新着ページ、ページタグクラウド、拍手などのプラグインや独自のなにかを追記
   （何も追記しないとサイドバーの空間が空いているだけで意味がありません）
2. templlates/internals/page/ 内にアップロード
3. ページプレビューをサイドバーがある状態で確認したい場合、HTMLtemplates/custom/page_sidebar-preview/ の page_preview.html を templlates/internals/admin/ 内に上書きアップロード

サイドバーに目次を表示 / 子ページを持たないページはサイドバーなし

1. 小説用は パンくずリストプラグイン を導入
2. HTMLtemplates/custom/page_sidebar2-page_child/ 内の default.html、novel.html（小説用）
   から使用するものを templlates/internals/page/ 内にアップロード
3. ページプレビューをサイドバーがある状態で確認したい場合、HTMLtemplates/custom/page_sidebar-preview/ の page_preview.html を templlates/internals/admin/ 内に上書きアップロード

特徴

• 子プラグイン（はじめからついています）をサイドバーに表示します。子ページを持たないページは、サイドバーなしで大きく表示します。
• 小説用はパンくずリストプラグインで「小説 > 長編「○○」 > 第一話」と並べてタイトルにするので、直感的に上の階層に戻りやすいです。
  以下のような構成の場合に見やすくなりそうです。
  • 小説用ページ [ ID: novel | タイトル例: 小説 | 本文にそれぞれの話の概要など ]
    • 分類用ページ１ [ ID例: novel/original1 | タイトル例: 長編「○○」 | 本文に読む前の注意書きや解説など ]
      • 作品ページ１ [ ID例: novel/original1/1 | タイトル例: 第一話「☆☆☆」 ]
      • 作品ページ２ [ ID例: novel/original1/2 | タイトル例: 第二話「▽▽▽」 ]

サイドバーにページ一括表示プラグインでページを一覧表示

1. ページ一括表示プラグイン と パンくずリストプラグイン （小説用）を導入
2. HTMLtemplates/custom/page_sidebar3-page_all/ 内の default.html、 gallery.html（ギャラリー用）、 novel.html（小説用）
   から使用するものを templlates/internals/page/ 内にアップロード
3. ページプレビューをサイドバーがある状態で確認したい場合、HTMLtemplates/custom/page_sidebar-preview/ の page_preview.html を templlates/internals/admin/ 内に上書きアップロード

特徴

• ページ一括表示プラグインにより、サイドバーにページが一覧で表示されるので他の作品にアクセスしやすいです。
  ギャラリー用、小説用はそれぞれgallery以下、novel以下のページが一覧表示されます。
• 小説用はパンくずリストプラグインで「小説 > 長編「○○」 > 第一部 > １」と並べてタイトルにするのでタイトル名を考えるのが楽です。
  基本的には　小説 > 分類 > 作品　の階層ですが、もう１階層くらいは大丈夫です。
• IDに 親ID gallery/ を入れて、親子関係を明確にしてページを登録することが大切です。
  • ギャラリー用ページ [ ID: gallery | タイトル例: ギャラリー | 本文は空欄 ]
    • 分類用ページ１ [ ID例: gallery/photo | タイトル例: 写真 | 本文は空欄 ]
      • 作品ページ１ [ ID例: gallery/photo/1 ]
      • 作品ページ２ [ ID例: gallery/photo/2 ]
    • 分類用ページ２ [ ID例: gallery/illust | タイトル例: イラスト | 本文は空欄 ]
      • 作品ページ１ [ ID例: gallery/illust/1 ]
      • 作品ページ２ [ ID例: gallery/illust/2 ]
  • 小説用ページ [ ID: novel | タイトル例: 小説 | 本文は空欄 ]
    • 分類用ページ１ [ ID例: novel/long1 | タイトル例: 長編「○○」 | 本文は空欄 ]
      • 小分類用ページ１ [ ID例: novel/long1/1 | タイトル例: 第一部 | 本文は空欄 ]
        • 作品ページ１ [ ID例: novel/long1/1/1 | タイトル例: １ ]
        • 作品ページ２ [ ID例: novel/long1/1/2 | タイトル例: ２ ]
    • 分類用ページ２ [ ID例: novel/short | タイトル例: 短編 | 本文は空欄 ]
      • 作品ページ１ [ ID例: novel/short/1 ]
      • 作品ページ２ [ ID例: novel/short/2 ]

小説用のページ作成

• サンプルでは以下のような形式でページを作成しています。

  <div class="kaisetu">
  	<ul>
  		<li>解説など</li>
  		<li>～</li>
  	</ul>
  </div>
  <h3>手袋を買いに</h3>
  <p>本文</p>
  <p>～</p>
  <div class="atogaki">
  	<p>後書き</p>
  	<p>～</p>
  </div>

エントリー、ページ、インフォメーションを登録するときのプレビューを、実際表示されるデザインとほぼ同じにします。

• 通常用は基本テンプレートの HTMLtemplates/default/templlates/internals/admin/ にはいっています。
• インフォメーションもサイドバーがある状態で確認したい場合、
  HTMLtemplates/custom/page_sidebar-preview/ の information_preview.html を使用
• サイドバー付ページ を使用しているなどで、ページもサイドバーがある状態で確認したい場合、
  HTMLtemplates/custom/page_sidebar-preview/ の page_preview.html を使用
• 1カラム用スキン を使用する場合は、HTMLtemplates/custom/1column/ にはいっているものを使用

以下のプラグインを導入する場合、通常どおり導入したあと、同梱のプラグイン用スキンで上書きをしてください。
テンプレートへの追記をする際は、以下にあるそれぞれの説明を見てください。

• エントリー用 ... エントリーギャラリー表示 / エントリーイメージ表示 / 関連エントリー表示 / エントリータグクラウド表示
• ページ用 ... ページイメージ表示 / ページイメージ分類別表示 / パンくずリスト表示 / ページ一括表示 / 兄弟ページ表示 / ページアーカイブ表示 / ページカレンダー表示 / 新着ページ表示 / ページタグクラウド表示
• 機能追加 ... 検索 / ブックマーク登録 / ブックマーク棚卸 / ブックマークタグクラウド表示 / メニュー登録 / イラスト投稿 / メール送信 / 拍手送信 / メッセージ登録
• サイト管理 ... 人気コンテンツ / パスワード認証 / 直接リンク防止

エントリーギャラリー表示プラグイン

• 通常どおり導入したあと、HTMLtemplates/plugins/entry_gallery/ で上書き
• サイドバーに新着画像を表示する場合、 utility.html への追記

  	<div class="utility_gallery">
  		<div class="title"><h3>gallery</h3></div>
  		<div class="content"><div class="content2">
  			<ul class="gallery"><!--{foreach from=$plugin_entry_galleries|smarty:nodefaults item='plugin_entry_gallery'}--><li><a href="{$freo.core.http_file}/view/{if $plugin_entry_gallery.code}{$plugin_entry_gallery.code}{else}{$plugin_entry_gallery.id}{/if}"><!--{if $plugin_entry_gallery.image}--><img src="{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}entry_images/{$plugin_entry_gallery.id}/{$plugin_entry_gallery.image}" alt="{$plugin_entry_gallery.memo|default:$plugin_entry_gallery.title}" title="{$plugin_entry_gallery.memo|default:$plugin_entry_gallery.title}" width="{$plugin_entry_gallery_images[$plugin_entry_gallery.id].width}" height="{$plugin_entry_gallery_images[$plugin_entry_gallery.id].height}" /><!--{else}--><img src="{$plugin_entry_gallery_medias[$plugin_entry_gallery.id].file}" alt="{$plugin_entry_gallery.memo|default:$plugin_entry_gallery.title}" title="{$plugin_entry_gallery.memo|default:$plugin_entry_gallery.title}" width="{$plugin_entry_gallery_medias[$plugin_entry_gallery.id].width}" height="{$plugin_entry_gallery_medias[$plugin_entry_gallery.id].height}" /><!--{/if}--></a></li><!--{/foreach}--></ul>
  		</div></div>
  	</div>

エントリーイメージ表示プラグイン

• 通常どおり導入したあと、HTMLtemplates/plugins/entry_image/ で上書き
• サイドバーに新着画像を表示する場合、 utility.html への追記

  	<div class="utility_gallery">
  		<div class="title"><h3>image</h3></div>
  		<div class="content"><div class="content2">
  			<ul class="gallery"><!--{foreach from=$plugin_entry_images|smarty:nodefaults item='plugin_entry_image'}--><li><a href="{$freo.core.http_file}/view/{if $plugin_entry_image.code}{$plugin_entry_image.code}{else}{$plugin_entry_image.id}{/if}"><img src="{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}entry_images/{$plugin_entry_image.id}/{$plugin_entry_image.image}" alt="{$plugin_entry_image.memo|default:$plugin_entry_image.title}" title="{$plugin_entry_image.memo|default:$plugin_entry_image.title}" width="{$plugin_entry_image_images[$plugin_entry_image.id].width}" height="{$plugin_entry_image_images[$plugin_entry_image.id].height}" /></a></li><!--{/foreach}--></ul>
  		</div></div>
  	</div>

関連エントリー表示プラグイン

• view/default.html への追記　（81行 <!--{if $entry.trackback != 'closed'}--> の前の行）

  <div id="entryrelate">
  	<div class="title"><div class="title2"><h2>関連エントリー</h2></div></div>
  	<div id="entryrelate2">
  		<ul>
  		<!--{foreach from=$plugin_entry_relates|smarty:nodefaults item='plugin_entry_relate'}-->
  		<li><span class="entryrelate_time">{$plugin_entry_relate.datetime|date_format:'%Y/%m/%d'}</span><a href="{$freo.core.http_file}/view/{if $plugin_entry_relate.code}{$plugin_entry_relate.code}{else}{$plugin_entry_relate.id}{/if}">{$plugin_entry_relate.title}</a></li>
  		<!--{foreachelse}--><li>関連エントリーはありません。</li><!--{/foreach}-->
  		</ul>
  	</div>
  </div>

• サイドバーに表示する場合、 utility.html への追記

  	<div class="utility"><div class="utility_entryrelate">
  		<div class="title"><h3>related entry</h3></div>
  		<div class="content"><div class="content2">
  			<ul><!--{foreach from=$plugin_entry_relates|smarty:nodefaults item='plugin_entry_relate'}--><li><a href="{$freo.core.http_file}/view/{if $plugin_entry_relate.code}{$plugin_entry_relate.code}{else}{$plugin_entry_relate.id}{/if}">{$plugin_entry_relate.title} <span class="time">{$plugin_entry_relate.datetime|date_format:'%Y/%m/%d'}</span></a></li><!--{foreachelse}--><li><p>関連エントリーはありません。</p></li><!--{/foreach}--></ul>
  		</div></div>
  	</div></div>

エントリータグクラウド表示プラグイン

• サイドバーに表示する場合、 utility.html への追記

  	<div class="utility_tagcloud">
  		<div class="title"><h3>tag</h3></div>
  		<div class="content"><div class="content2">
  			<ul class="tagcloud">
  				<!--{foreach from=$plugin_entry_tagclouds|smarty:nodefaults item='plugin_entry_tagcloud'}-->
  				<li><a href="{$freo.core.http_file}/entry?tag={$plugin_entry_tagcloud.tag|smarty:nodefaults|escape:'url'}" style="font-size:{$plugin_entry_tagcloud.size}%;">{$plugin_entry_tagcloud.tag}</a>{$plugin_entry_tagcloud.count}</li>
  				<!--{/foreach}-->
  			</ul>
  		</div></div>
  	</div>

ページイメージ表示プラグイン

• 通常どおり導入したあと、HTMLtemplates/plugins/page_image/ で上書き
• サイドバーに新着画像を表示する場合、 utility.html への追記

  	<div class="utility_gallery">
  		<div class="title"><h3>image</h3></div>
  		<div class="content"><div class="content2">
  			<ul class="gallery"><!--{foreach from=$plugin_page_images|smarty:nodefaults item='plugin_page_image'}--><li><a href="{$freo.core.http_file}/page/{$plugin_page_image.id}"><img src="{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}page_images/{$plugin_page_image.id}/{$plugin_page_image.image}" alt="{$plugin_page_image.memo|default:$plugin_page_image.title}" title="{$plugin_page_image.memo|default:$plugin_page_image.title}" width="{$plugin_page_image_images[$plugin_page_image.id].width}" height="{$plugin_page_image_images[$plugin_page_image.id].height}" /></a></li><!--{/foreach}--></ul>
  		</div></div>
  	</div>

ページイメージ分類別表示プラグイン

• 通常どおり導入したあと、HTMLtemplates/plugins/page_image_categorized/ で上書き

一覧表示について

• 表示順を「並び順」「登録日時の昇順」「登録日時の降順」から選択、任意の件数に変更できます。
  デフォルトは「並び順」「10件」なので、新しいものから表示したい場合は、管理画面で「登録日時の降順」に変更します。

説明をつけたい

• HTMLtemplates/plugins/page_image_categorized/default.html の 5行 <div class="content"> の直後に追記します。
  たとえばこんな感じに説明します。

  			<ul>
  				<li>各ジャンルの最新サムネイルを表示しています。（タイトルをクリックするとジャンル内のサムネイルがすべて表示されます）<br />サムネイルをクリックすると各ページへ移動します。</li>
  				<li>ジャンル説明
  					<ul class="minilist">
  						<li><strong>オリジナル</strong>　・・・　☆☆☆系。</li>
  						<li><strong>■■■</strong>　・・・　主に◇◇◇のイラスト。～に注意！</li>
  						<li><strong>○○○</strong>　・・・　●●●と□□□ばかり。</li>
  						<li><strong>その他</strong>　・・・　上記以外のジャンル。△△△、▽▽▽、たまに×××も。</li>
  						<li><strong>お絵描き掲示板絵</strong>　・・・　一度に１０枚表示します。ジャンルいろいろ。</li>
  					</ul>
  				</li>
  				<li>原作者や出版社など公式なものとの関係は一切ありません。</li>
  			</ul>

分類内のイメージをすべて表示するページへのリンクについて

• 分類別タイトルをクリックすると、分類内のイメージをすべて表示するページに移動します。
  このことがわかりにくいという場合、上記のように説明をつけるとよいです。または以下のようにカスタマイズするとよいかもしれません。
  1. HTMLtemplates/plugins/page_image_categorized/default.html の
     <a href="{$freo.core.http_file}/page_image_categorized/{$category.id}?view=1">{$category.title}</a> を
     書き換えます。（「...すべて表示」の文字にallクラスのリンクがはられます）

     {$category.title} <a href="{$freo.core.http_file}/page_image_categorized/{$category.id}?view=1" class="all">...すべて表示</a>

  2. このままだとタイトル同様のデザインなのでスタイルシートにデザインを追記します。

     a.all {
     	font-weight: normal;
     	letter-spacing: normal;
     }

パンくずリスト表示プラグイン

• page/default.html への追記
  （5行 <div class="page_page"><div class="pages"> の直後 [ Basic, Line, Scroll, Pretty, Time ] ）
  （7行 <div class="title2"> の直後 [ Box, Simple ] ）
  （7行 </h2></div> の直後 [ Simple ] ）

  <p class="topicpath"><a href="{$freo.core.http_file}">トップページ</a>
  <!--{foreach from=$plugin_page_topicpaths|smarty:nodefaults item='plugin_page_topicpath'}-->
   &gt; <a href="{$freo.core.http_file}/page/{$plugin_page_topicpath.id}">{$plugin_page_topicpath.title}</a>
  <!--{/foreach}--> &gt; {$page.title}</p>

ページ一括表示プラグイン

• 通常どおり導入したあと、HTMLtemplates/plugins/page_all/ で上書き
• page/default.html への追記　（77行 <ul class="link">　～ の前の行）

  <h3>ページ一覧</h3>
  {include file='plugins/page_all/default.html'}

兄弟ページ表示プラグイン

• ページ個別テンプレートの サイドバー付ページ、サイドバー付ギャラリーページ、サイドバー付小説ページ に追記する場合

  	<!--{if $plugin_page_siblings|smarty:nodefaults}-->
  	<div class="utility"><div class="utility_page_all" id="utility_page_siblings">
  		<div class="title"><h3>ページ直接移動</h3></div>
  		<div class="content"><div class="content2">
  			<ul class="page_child"><!--{foreach from=$plugin_page_siblings|smarty:nodefaults item='plugin_page_sibling'}--><li><!--{if $page.id != $plugin_page_sibling.id}--><a href="{$freo.core.http_file}/page/{$plugin_page_sibling.id}">{$plugin_page_sibling.title}</a><!--{else}--><span class="direct_page">{$plugin_page_sibling.title}</span><!--{/if}--></li><!--{/foreach}--></ul>
  		</div></div>
  	</div></div>
  	<!--{/if}-->

ページアーカイブ表示プラグイン

• サイドバーに表示する場合、 utility.html への追記

  	<div class="utility"><div class="utility_archive">
  		<div class="title"><h3>archive</h3></div>
  		<div class="content"><div class="content2">
  			<p><select name="archive-dropdown" onchange='document.location.href=this.options[this.selectedIndex].value;'>
  				<option value="">月を選択</option>
  				<!--{foreach from=$plugin_page_archives|smarty:nodefaults item='plugin_page_archive'}-->
  				<option value='{$freo.core.http_file}/page?date={$plugin_page_archive.year}{$plugin_page_archive.month}'> {$plugin_page_archive.year}年{$plugin_page_archive.month}月　({$plugin_page_archive.count})　</option>
  				<!--{foreachelse}-->
  				<option value="">エントリーが登録されていません。</option>
  				<!--{/foreach}-->
  			</select></p>
  			<noscript><ul>
  				<!--{foreach from=$plugin_page_archives|smarty:nodefaults item='plugin_page_archive'}-->
  				<li><a href="{$freo.core.http_file}/page?date={$plugin_page_archive.year}{$plugin_page_archive.month}">{$plugin_page_archive.year}年{$plugin_page_archive.month}月 ({$plugin_page_archive.count})</a></li>
  				<!--{foreachelse}-->
  				<li>エントリーが登録されていません。</li>
  				<!--{/foreach}-->
  			</ul></noscript>
  		</div></div>
  	</div></div>

ページカレンダー表示プラグイン

• サイドバーに表示する場合、 utility.html への追記

  	<div class="utility"><div class="utility_calendar">
  		<div class="title"><h3>calendar</h3></div>
  		<div class="content"><div class="content2">
  			<table summary="カレンダー" class="calender">
  				<tr>
  					<th colspan="7"><a href="{$freo.core.http_file}/page?date={$plugin_page_calender_previous}" title="前の月" class="calender_prev">{$plugin_page_calender_previous|substr:4}</a><span class="calender_"><span class="year">{$plugin_page_calender_year}<span>/</span></span><span class="month">{$plugin_page_calender_month}</span></span><a href="{$freo.core.http_file}/page?date={$plugin_page_calender_next}" title="次の月" class="calender_next">{$plugin_page_calender_next|substr:4}</a></th>
  				</tr>
  				<tr>
  					<td><span class="sunday">S</span></td>
  					<td><span class="day">M</span></td>
  					<td><span class="day">T</span></td>
  					<td><span class="day">W</span></td>
  					<td><span class="day">T</span></td>
  					<td><span class="day">F</span></td>
  					<td><span class="satday">S</span></td>
  				</tr>
  				<!--{foreach from=$plugin_page_calenders|smarty:nodefaults item='plugin_page_calender' name='loop'}-->
  				<!--{if $smarty.foreach.loop.index % 7 == 0}-->
  				<tr>
  				<!--{/if}-->
  				<!--{if $plugin_page_calender.type == 'day'}-->
  					<td><!--{if $plugin_page_calender.flag}--><a href="{$freo.core.http_file}/page?date={$plugin_page_calender.date}"><!--{/if}--><span class="day">{$plugin_page_calender.day}</span><!--{if $plugin_page_calender.flag}--></a><!--{/if}--></td>
  				<!--{elseif $plugin_page_calender.type == 'satday'}-->
  					<td><!--{if $plugin_page_calender.flag}--><a href="{$freo.core.http_file}/page?date={$plugin_page_calender.date}"><!--{/if}--><span class="satday">{$plugin_page_calender.day}</span><!--{if $plugin_page_calender.flag}--></a><!--{/if}--></td>
  				<!--{elseif $plugin_page_calender.type == 'sunday'}-->
  					<td><!--{if $plugin_page_calender.flag}--><a href="{$freo.core.http_file}/page?date={$plugin_page_calender.date}"><!--{/if}--><span class="sunday">{$plugin_page_calender.day}</span><!--{if $plugin_page_calender.flag}--></a><!--{/if}--></td>
  				<!--{else}-->
  					<td>-</td>
  				<!--{/if}-->
  				<!--{if $smarty.foreach.loop.index % 7 == 6}-->
  				</tr>
  				<!--{/if}-->
  				<!--{/foreach}-->
  			</table>
  		</div></div>
  	</div></div>

新着ページ表示プラグイン

• サイドバーに表示する場合、 utility.html への追記

  	<div class="utility"><div class="utility_page">
  		<div class="title"><h3>new page</h3></div>
  		<div class="content"><div class="content2">
  			<ul><!--{foreach from=$plugin_page_recentries|smarty:nodefaults item='plugin_page_recently'}--><li><a href="{$freo.core.http_file}/page/{$plugin_page_recently.id}">{$plugin_page_recently.title} <span class="time">{$plugin_page_recently.datetime|date_format:'%Y/%m/%d %H:%M'}</span></a></li><!--{/foreach}--></ul>
  		</div></div>
  	</div></div>

ページタグクラウド表示プラグイン

• サイドバーに表示する場合、 utility.html への追記

  	<div class="utility_tagcloud">
  		<div class="title"><h3>tag</h3></div>
  		<div class="content"><div class="content2">
  			<ul class="tagcloud">
  				<!--{foreach from=$plugin_page_tagclouds|smarty:nodefaults item='plugin_page_tagcloud'}-->
  				<li><a href="{$freo.core.http_file}/page?tag={$plugin_page_tagcloud.tag|smarty:nodefaults|escape:'url'}" style="font-size:{$plugin_page_tagcloud.size}%;">{$plugin_page_tagcloud.tag}</a>{$plugin_page_tagcloud.count}</li>
  				<!--{/foreach}-->
  			</ul>
  		</div></div>
  	</div>

検索プラグイン

• 通常どおり導入したあと、HTMLtemplates/plugins/search/ で上書き
• サイドバーに表示する場合、 utility.html への追記

  	<div class="utility"><div class="utility_search">
  		<div class="title"><h3>search</h3></div>
  		<div class="content"><div class="content2">
  			<form action="{$freo.core.http_file}/search" method="get">
  				<fieldset>
  					<legend>キーワード検索フォーム</legend>
  					<dl>
  						<dt>キーワード</dt>
  							<dd><input type="text" name="word" size="50" value="{$smarty.get.word}" /></dd>
  					</dl>
  					<p><input type="submit" value="検索する" /></p>
  				</fieldset>
  			</form>
  		</div></div>
  	</div></div>

ブックマーク登録プラグイン

• 通常どおり導入したあと、HTMLtemplates/plugins/bookmark/ で上書き
• はてなブックマーク数表示の追記は 29行 <!--{/foreach}--></span> の直後

ブックマーク棚卸プラグイン

• サイドバーに表示する場合、 utility.html への追記

  	<div class="utility_bookmark">
  		<div class="title"><h3>{$smarty.now|date_format:'%m'}月{$smarty.now|date_format:'%d'}日のブックマーク</h3></div>
  		<div class="content"><div class="content2">
  		<dl>
  			<!--{foreach from=$plugin_bookmark_inventories|smarty:nodefaults item='plugin_bookmark_inventory'}-->
  			<dt><a href="{$plugin_bookmark_inventory.url}" title="{$plugin_bookmark_inventory.title}">{$plugin_bookmark_inventory.title|mb_truncate:12:'...'}</a></dt>
  			<dd><!--{foreach from=$plugin_bookmark_inventory_tags[$plugin_bookmark_inventory.id]|smarty:nodefaults item='plugin_bookmark_inventory_tag' name='loop'}-->{$plugin_bookmark_inventory_tag}<!--{if !$smarty.foreach.loop.last}-->, <!--{/if}--><!--{/foreach}--><!--{if $freo.user.authority == 'root' or $freo.user.authority == 'admin'}--><a href="{$freo.core.http_file}/bookmark/admin_form?id={$plugin_bookmark_inventory.id}" class="edit">編集</a><!--{/if}--></dd>
  			<!--{foreachelse}--><dt class="nodata">No Data</dt><dd class="nodata">ブックマークはありません。</dd><!--{/foreach}-->
  		</dl>
  		</div></div>
  	</div>

ブックマークタグクラウド表示プラグイン

• plugins/bookmark/default.html への追記は、32行 </ul> の直後に

メニュー登録プラグイン

• サイドバーに表示する場合、 utility.html への追記

  	<div class="utility"><div class="utility_menu">
  		<div class="title"><h3>menu</h3></div>
  		<div class="content"><div class="content2">
  			<ul><!--{foreach from=$plugin_menus|smarty:nodefaults item='plugin_menu'}--><li><a href="{if $plugin_menu.url|regex_match:'/^https?\:\/\//'}{$plugin_menu.url}{else}{$freo.core.http_file}{$plugin_menu.url}{/if}">{$plugin_menu.title}</a></li>
  			<!--{/foreach}--></ul>
  		</div></div>
  	</div></div>

イラスト投稿プラグイン

• 通常どおり導入したあと、HTMLtemplates/plugins/paint/ で上書き

メール送信プラグイン

• 通常どおり導入したあと、HTMLtemplates/plugins/contact/ で上書き

拍手送信プラグイン

• 通常どおり導入したあと、HTMLtemplates/plugins/clap/ で上書き
• メニューに並べる場合、 header.html への追記例　（32行 <ul>　～　ログイン</a>　～　</li></ul>）

  <form action="{$freo.core.http_file}/clap" method="post">
  <ul>
  　～　
  ログイン</a>
  <input type="hidden" name="freo[token]" value="{$token}" /><input type="submit" value="拍手を送る" />
  </li></ul>
  </form>

• メニューにリンクとして並べる場合、 header.html への追記例　（32行 ～　ログイン</a></li> の直後）

  <li><a href="{$freo.core.http_file}/clap">拍手</a></li>

• サイドバーに表示する場合、 utility.html への追記

  	<div class="utility"><div class="utility_clap">
  		<div class="title"><h3>clap</h3></div>
  		<div class="content"><div class="content2">
  			<form action="{$freo.core.http_file}/clap" method="post">
  			<fieldset>
  			<legend>拍手送信フォーム</legend>
  			<input type="hidden" name="freo[token]" value="{$token}" />
  			<p><input type="submit" value="拍手を送る" /></p>
  			</fieldset>
  			</form>
  		</div></div>
  	</div></div>

• サイドバーにメッセージフォームも表示する場合、 utility.html への追記

  	<div class="utility"><div class="utility_clap">
  		<div class="title"><h3>clap</h3></div>
  		<div class="content"><div class="content2">
  			<form action="{$freo.core.http_file}/clap" method="post">
  			<fieldset>
  			<legend>拍手送信フォーム</legend>
  			<input type="hidden" name="freo[token]" value="{$token}" />
  			<p><input type="submit" value="拍手を送る" /></p><p>リクエストとか意見とかあればどうぞ</p>
  			<input type="hidden" name="freo[token]" value="{$token}" />
  			<input type="hidden" name="plugin_clap[title]" value="{$smarty.post.plugin_clap.title}" />
  			<dl><dt>メッセージ</dt><dd><textarea name="plugin_clap[text]" cols="50" rows="2"></textarea></dd></dl>
  			</fieldset>
  			</form>
  		</div></div>
  	</div></div>

メッセージ登録プラグイン

• 通常どおり導入したあと、HTMLtemplates/plugins/message/ で上書き

人気コンテンツプラグイン

• サイドバーに表示する場合、 utility.html への追記

  	<div class="utility"><div class="utility_popular">
  		<div class="title"><h3>popular</h3></div>
  		<div class="content"><div class="content2">
  			<ul>
  			<!--{foreach from=$plugin_popularities|smarty:nodefaults item='plugin_popularity'}--><li><a href="{$freo.core.http_file}{$plugin_popularity.parameter}">{$plugin_popularity.title|default:$plugin_popularity.parameter} <span class="count">({$plugin_popularity.count})</span></a></li><!--{/foreach}-->
  			</ul>
  		</div></div>
  	</div></div>

パスワード認証プラグイン

• 通常どおり導入したあと、HTMLtemplates/plugins/password/ で上書き

直接リンク防止プラグイン

• 通常どおり導入したあと、HTMLtemplates/plugins/protect/ で上書き

見出しについて

各記事の題名が h3 なので、記事内の見出しは <h4> ～ </h4> を使うのが適切です。さらに下位の見出しは h5 タグや h6 タグになります。

※　ページは題名が h2 なのでページ内の見出しは <h3> ～ </h3> からになります。

段落

普通の文や画像は基本的に <p> ～ </p> ではさみます。改行するときは、 <br /> を記述します。
</p><p> と一度pタグを閉じると２回改行したくらいの隙間が空き、もっと隙間を空けたいときは、 </p><p><br /> をその数だけ並べます。

インライン要素

大きさや色などを変更する、よく使う文字の装飾はスタイルシートに用意しておくと便利です。

強調したいことばは <em> ～ </em> ではさみ、さらにより強く強調したいことばを <strong> ～ </strong> ではさみます。

<body> ～ のようなコードテキストは、 < などを < などに直し、 <code> ～ </code> ではさみます。

画像について

左寄せにして文字を右に文字を回り込ませたい画像は、class="img_left" を指定します。

右寄せにして文字を左に文字を回り込ませたい画像は、class="img_right" を指定します。

回り込みを解除させたい p や li などのタグに class="clear" を指定、または <br class="clear" /> を記述すると解除できます。

中央寄せにしたい画像は <p class="img_center"> ～ </p> ではさみます。
左右の余白を「0」にしているので、さらに大きめの画像をはみ出さずに表示できます。

例

<p><img src="～" class="img_left" /></p>
<p>画像が左に寄せられて、文字が右側に回り込みます。</p>
<p class="clear">ここから回り込みを解除。</p>

リスト

見やすいように段落同様に余白をとっています。
上下の余白をなくし、すっきりさせたいときは ul 、 ol、 dl のタグに class="minilist" を指定します。

序列リスト

1. 序列リストは番号がつきます。ひとつのリストの前後を <li> ～ </li> ではさみ、全体を <ol> ～ </ol> ではさみます。
2. 序列リストの数字はスタイルシートの設定で変更可能です。

非序列リスト

• 非序列リストは番号なしの箇条書きリストです。ひとつのリストの前後を <li> ～ </li> ではさみ、全体を <ul> ～ </ul> ではさみます。
• 非序列リストのリストマークはスタイルシートで背景画像を指定しているものが多いです。

定義リスト

定義リストについて

定義リストは、定義語とその説明からなります。
定義語を <dt> ～ </dt>で、その説明を <dd> ～ </dd> ではさんだ後、全体を <dl> ～ </dl> ではさみます。

定義語は インライン要素のみですが、説明のほうは p タグや各種リストなどのブロック要素も使えます。

その他

追加した情報を <ins> ～ </ins> ではさむと、下線がつきます。
削除した情報を消さずに <del> ～ </del> ではさむと抹消線がつきます。

引用文は普通に記述した後、全体を <blockquote> ～ </blockquote> ではさみます。

整形済みテキストは <pre> ～ </pre> ではさみます。（アスキーアートの場合は <pre class="aa"> ～ </pre> ではさみます）

テーブルの記述例

<h4>テーブル</h4>
<table summary="点数表">
<caption>学年末テスト集計(100点満点)</caption>
<tbody>
<tr><th>名前</th><th>英語</th><th>国語</th><th>数学</th><th>理科</th><th>社会</th><th>合計</th><th>平均</th></tr>
<tr><td>たろう</td><td>90</td><td>70</td><td>50</td><td>35</td><td>35</td><td>280</td><td>56</td></tr>
<tr><td>はなこ</td><td>70</td><td>75</td><td>90</td><td>80</td><td>85</td><td>400</td><td>80</td></tr>
</tbody>
</table>

サンプルのインフォメーション

スキンサンプルのインフォメーションはこんなふうに記述しています。

<p><img title="トップ画像" src="○○" alt="トップ画像" width="○○" height="○○" /></p>

<h3>お知らせ</h3>
<p>5,000ヒット超えたので、リクエスト企画を立てました。詳しくはこちらから。4月1日まで受け付け中です。</p>

<h3>初めに</h3>
<ul>
	<li>ようこそ。 初めての方は【ABOUT】にも目を通してください。</li>
	<li>当サイトはオリジナルノベルと二次創作を公開しています。現在は☆☆中心。<br />ネタバレなどもありますので、閲覧の際は自己責任にてお願いします。</li>
	<li>原作者様、出版社様、その他関係各社様とは一切関係はありません。</li>
	<li>サイト内のバナーを除く画像や文章の無断転載はご遠慮願います。</li>
	<li>ログインすると、コメント投稿や登録者限定ページの閲覧ができるようになります。<br />このサイトが気に入ったらどうぞユーザー登録してください。</li>
</ul>

<h3>更新情報</h3>
<ul>
	<li>2010/10/14　【リクエスト企画】はじめました / 拍手お礼差し替え（前のはMAINに収納済）</li>
	<li>2010/9/25　【MAIN】「○○」の続きを追加</li>
	<li>　～　</li>
	<li>2003/2/13　サイト正式公開</li>
</ul>

<h3>その他</h3>
<p><img title="◇◇同盟バナー" src="◇◇" alt="◇◇同盟バナー" width="200" height="40" /><br />同盟やイベントのバナーで自己主張したり、サーチや素材屋に感謝したり、などなど</p>

• ある程度文字が見やすく。いろいろなタグを使ってもデザインが整っているように。
• display: block; などで、リンクのクリックできる領域を大きくする。
• サイドバーは、最低でも200pxのバナーが置ける幅にする。
• カスタマイズの余地がたくさんあるように。

Basic1

• シンプルなデザインで、画像の使用も最小限です。
• HTMLテンプレートに最初から同梱されています。
• 線の色は #000000 と #CCCCCC 、背景色は #FFFFFF 、文字色は #333333 です。
• p タグにはさんだ画像は、最大横幅 474px （サイドバーがないときは 724px ）まではみ出さず表示できます。
  <p class="img_center"> ～ </p> にはさんだ場合、最大横幅は 498px （サイドバーがないときは 748px ）です。

Line1

• 直線が特徴のシンプルなデザインです。
• リンク、カレンダー、 .attention 、 div.kaisetu 、 code 以外は白・黒・グレー系です。
• 線の色は #AAAAAA 、文字色は #999999 、時刻や件数などの文字色は #BBBBBB です。
  薄めなので、文字が少ないイラストサイト向きかも。
• p タグにはさんだ画像は、最大横幅 474px （サイドバーがないときは 719px ）まではみ出さず表示できます。
  <p class="img_center"> ～ </p> にはさんだ場合、最大横幅は 498px （サイドバーがないときは 743px ）です。

メニュー項目

• メニュー項目の変更をしたときは、項目数に合わせてスタイルシート の width を修正します。（デフォルトは 95px×2項目）
  1. div#menu li をメニューの文字数や大きさに合わせて修正します。
  2. div#menu ul を div#menu liのwidth × 項目数 に修正します。
     デフォルトの幅（95px）の場合、4項目は 380px 、5項目は 475px 、6項目は 570px 、7項目は665px です。
     
• メニューの横幅全部同じで、はじまでぴったりにそろえるのは少し難しいです。
  1. div.menu の text-align: right; を削除し、 div#menu ul の margin を 0 に修正します。
  2. div#menu li の width を好きな幅にします。
  3. その幅×項目数が全体の横幅になります。（例：100px×8項目＝800px）
     div#container 、 div.menu 、 div#menu ul の width を div#menu liのwidth × 項目数 に修正します。
  4. * html div#container 、 div#content の width も同じだけ増減します。（例：800pxの場合55px増加）
• 5項目の場合、全体の横幅そのままで、はじまでぴったりにそろえられます。（149×5＝745）
  1. div.menu の text-align: right; を削除し、 div#menu ul の margin を 0 に width を 745px に修正します。
  2. div#menu li の width を 149px に修正します。
• メニューを普通のリンクにしたいときは以下のように書き換えてください。

  div.menu {
  }
  div#menu ul {
  	margin: 0;
  	padding: 4px 0;
  	border-bottom: 1px solid #AAAAAA;
  	text-align: right;
  }
  div#menu li {
  	margin: 0;
  	padding: 0;
  	display: inline;
  	background: none;
  	line-height: 1;
  }
  div#menu a {
  	padding: 4px 12px;
  	letter-spacing: 1px;
  }

Simple-A

• ヘッダ等は枠で囲んでいないシンプルなデザインです。カスタマイズ向け。
  • Simple-A1 は、海月屋の代表的なスキンデザインです。白背景。
• 記事タイトルの背景とリンク色を変更すると、イメージが変えられます。
• p タグにはさんだ画像は、最大横幅 494px （サイドバーがないときは 754px ）まではみ出さず表示できます。
  <p class="img_center"> ～ </p> にはさんだ場合、最大横幅は 518px （サイドバーがないときは 778px ）です。

Simple-B

• ほとんどの内容を枠で囲んでいます。カスタマイズ向け。
  • Simple-B1 は、白背景に青系でまとまっています。
  • Simple-B2 は、黒背景に白・グレー系です。
• 記事タイトルの先頭にアイコンを置いたり、背景画像とリンクの色を好みのものに変えるとイメージが変わります。
• p タグにはさんだ画像は、最大横幅 474px （サイドバーがないときは 704px ）まではみ出さず表示できます。
  <p class="img_center"> ～ </p> にはさんだ場合、最大横幅は 498px （サイドバーがないときは 728px ）です。

Scroll-A

• 縦一直線のシンプルなデザインです。
  全体の背景画像や、ヘッダー、メニューの背景のカスタマイズがおすすめです。
• 上から下までつながったデザインです。
  ほとんどがCSSによるものなので、枠の色や横幅の変更もできますが、ある程度記事が長くないと下が切れてしまいます。
  • Scroll-A1 は、白背景です。
  • Scroll-A2 は、黒背景です。
• p タグにはさんだ画像は、最大横幅 455px （サイドバーがないときは 676px ）まではみ出さず表示できます。
  <p class="img_center"> ～ </p> にはさんだ場合、最大横幅は 479px （サイドバーがないときは 700px ）です。

メニュー項目

• メニュー項目の変更をしたときは、項目数に合わせてスタイルシートの width を修正します。（デフォルトは (109px＋1px)×2項目）
  1. div#menu li の width をメニューの文字数や大きさに合わせて修正します。
  2. div#menu ul の width を ( div#menu liのwidth ＋ 1px ) × 項目数 に修正します。
     デフォルトの幅（109px）の場合、4項目は 440px 、5項目は 550px 、6項目は 660px です。
     
• メニューの横幅全部同じで、はじまでぴったりにそろえるのは少し難しいです。
  1. div.menu の text-align: right; を削除し、 div#menu ul の margin を 0 に修正します。
  2. div#menu li の width を好きな幅にします。（例：99px）
  3. (その幅＋1px)×項目数－1pxが全体の横幅になります。（例：7項目の場合　(99px＋1px)×7－1px＝699px）
     div#container 、 div#menu ul の width を ( div#menu liのwidth ＋ 1px ) × 項目数 － 1px に修正します。
  4. * html div#container 、 div#content の width も同じだけ増減します。（例：699pxの場合1px減らします）
  5. 一番左になるメニューの li要素にクラス指定して、余白と背景画像の線をなしにします。
     たとえば、menuleft クラスを指定した場合、このような指定を追記します。

     div#menu li.menuleft {
     	padding: 0;
     	background: none;
     }

• メニューを普通のリンクにしたいときは以下のように書き換えてください。

  div.menu {
  }
  div#menu ul {
  	margin: 0;
  	padding: 4px 0;
  	text-align: right;
  }
  div#menu li {
  	margin: 0;
  	padding: 0;
  	display: inline;
  	background: none;
  	line-height: 1;
  }
  div#menu a {
  	padding: 4px 10px;
  	letter-spacing: 1px;
  }

Scroll-B

• Scroll-B は Scroll-A とほとんど同じデザインですが、ヘッダーやメニューもサイドバーに表示され、記事は常に同じ幅です。
  • Scroll-B1 は、白背景です。
  • Scroll-B2 は、黒背景です。
• p タグにはさんだ画像は、最大横幅 533px まではみ出さず表示できます。
  <p class="img_center"> ～ </p> にはさんだ場合、最大横幅は 557px です。

サイドバーの開始位置の変更

• メニュー項目の変更をしたときは、項目数に合わせてサイドバーの開始位置を変更します。
  1. div#blogtitleのheight　＋　div#menu liのheight × 項目数　を計算します。（デフォルトでは1項目追加ごとに30px増加）
  2. div#utility の top をその数値に修正します。

Pretty-A

• Pretty-A はスタイルシートと画像を多用した可愛いデザインです。メニューがサイドバーに表示され、記事は常に同じ幅です。
  • Pretty-A1 は、白背景にピンクの星です。
  • Pretty-A2 は、白背景にブルーの星です。
• p タグにはさんだ画像は、最大横幅 510px まではみ出さず表示できます。
  <p class="img_center"> ～ </p> にはさんだ場合、最大横幅は 546px です。

サイドバーの開始位置の変更

• メニュー項目の変更をしたときは、項目数に合わせてサイドバーの開始位置を変更します。
  1. 32px × 項目数 ＋ 32px （上余白5px、下余白5px、上のラインに2px、好みで余白を20px程度） で、メニューのサイズを計算します。
  2. メニューサイズから 132px （div.blogtitle の高さ120px、上余白5px、下余白5px、上線1px、下線1px） を引きます。
  3. div#utility の margin-top をその数値に修正します。
     （例 : 2項目 -36px / 3項目 -4px / 4項目 28px / 5項目 60px / 6項目 92px / 7項目 124px）

Box-A

• Box-Aは、記事ひとつひとつを小さな丸角枠で囲んでいるデザインです。
  • Box-A1 は、濃灰色枠の白背景にブルー系の配色で、さわやかなイメージでデザインしています。
  • Box-A2 は、濃茶色枠の白背景にピンク系の配色で、あたたかい春のイメージでデザインしています。
  • Box-A3 は、濃灰色枠の黒背景にグリーン系の配色で、都会的なイメージでデザインしています。
  • Box-A4 は、薄茶色枠の濃茶背景にオレンジ系の配色で、アンティークなイメージでデザインしています。
• 記事タイトルの背景画像や、ヘッダーの背景画像（titleimage.gif）はぜひ、カスタマイズしてみてください。
• p タグにはさんだ画像は、最大横幅 523px （サイドバーがないときは 769px ）まではみ出さず表示できます。
  <p class="img_center"> ～ </p> にはさんだ場合、最大横幅は 553px （サイドバーがないときは 799px ）です。
• メニューなどのカスタマイズ方法は Box-A共通です。

メニュー項目

• メニュー項目の変更をしたときは、項目数に合わせてスタイルシートの width を修正します。（デフォルトは 100px×2項目）
  1. div#menu li の width をメニューの文字数や大きさに合わせて修正します。
  2. div#menu ul の width を div#menu liのwidth × 項目数 に修正します。
     デフォルトの幅（100px）の場合、4項目は 400px 、5項目は 500px 、6項目は 600px 、7項目は700px です。
     
• メニューを左右均等にそろえるカスタマイズもできます。
  1. スタイルシートの div.menu の text-align を center に div#menu ul の margin を 0 auto に、修正します。
  2. div#menu ul （div#menu liのwidth × 項目数　※791pxに近い数値がよい） と div#menu li の width を修正します。
     • 5項目　・・・　div#menu ul → 790px　／　div#menu li → 158px
     • 6項目　・・・　div#menu ul → 786px　／　div#menu li → 131px
     • 7項目　・・・　div#menu ul → 791px　／　div#menu li → 113px
     • 8項目　・・・　div#menu ul → 784px　／　div#menu li → 98px
  3. 一番左になるメニューの li要素にクラス指定して、背景画像の線をなしにします。
     たとえば、menuleft クラスを指定した場合、このような指定を追記します。

     div#menu li.menuleft a {
     	background-image: none;
     }

• メニューを普通のリンクにしたいときは以下のように書き換えてください。

  div.menu {
  	padding: 0 1px;
  }
  div#menu ul {
  	margin: 0;
  	padding: 4px 10px 0;
  	text-align: right;
  }
  div#menu li {
  	margin: 0;
  	padding: 0;
  	display: inline;
  	background: none;
  	line-height: 1;
  }
  div#menu a {
  	padding: 4px 10px;
  	letter-spacing: 1px;
  }

Box-A-1column

• Box-A-1columnは、 Box-A の 1カラムバージョン です。
  • 横幅 723px （Box-A○-1column723）
    • HTMLtemplates/1column/templates/ 内にある utility.html を使用します。
    • p タグにはさんだ画像は、最大横幅 691px まではみ出さず表示できます。
      <p class="img_center"> ～ </p> にはさんだ場合、最大横幅は 721px です。
  • 横幅 969px （Box-A○-1column969）
    • HTMLtemplates/1column/ 内にある utility4.html を utility.html に名前変更して使用します。
    • p タグにはさんだ画像は、最大横幅 937px まではみ出さず表示できます。
      <p class="img_center"> ～ </p> にはさんだ場合、最大横幅は 967px です。
• 横幅が変わりますが、メニューなどのカスタマイズ方法は Box-A とほぼ同じです。

Box-B

• Box-Bは、Box-Aとほとんど同じデザインですが、全体を丸角ボックスで囲んでいます。
  • Box-B1 は、濃灰色枠の白背景にブルー系の配色で、さわやかなイメージでデザインしています。
  • Box-B2 は、濃茶色枠の白背景にピンク系の配色で、あたたかい春のイメージでデザインしています。
  • Box-B3 は、濃灰色枠の黒背景にグリーン系の配色で、都会的なイメージでデザインしています。
  • Box-B4 は、薄茶色枠の濃茶背景にオレンジ系の配色で、アンティークなイメージでデザインしています。
• 記事タイトルの背景画像や、ヘッダーの背景画像（titleimage.gif）はぜひ、カスタマイズしてみてください。
• p タグにはさんだ画像は、最大横幅 520px （サイドバーがないときは 770px ）まではみ出さず表示できます。
  <p class="img_center"> ～ </p> にはさんだ場合、最大横幅は 550px （サイドバーがないときは 800px ）です。
• メニューなどのカスタマイズ方法は Box-B共通です。

メニュー項目

• メニュー項目の変更をしたときは、項目数に合わせてスタイルシートの width を修正します。（デフォルトは 100px×2項目）
  1. div#menu li の width をメニューの文字数や大きさに合わせて修正します。
  2. div#menu ul の width を div#menu liのwidth × 項目数 に修正します。
     デフォルトの幅（100px）の場合、4項目は 400px 、5項目は 500px 、6項目は 600px 、7項目は700px です。
     
• 一番右側になるメニュー項目が拍手画像などや、一番左側がサイト名などで、横幅が他と違っていてもOKな場合、その li要素にクラス指定で個別指定することによって、ぴったりさせることができます。
  合計が 818px になるように、調整してください。 7項目の例： 117（px）×6（項目）＋116＝818
  1. メニュー項目の変更 でたとえば７番目のメニュー項目をこのように指定します。

     <li class="menuright"><a href="{$freo.core.http_file}/clap">拍手画像</a></li>

  2. スタイルシートに追記します。

     div#menu li.menuright {
     	width: 116px;
     }

• メニューを普通のリンクにしたいときは以下のように書き換えてください。

  div#menu ul {
  	margin: 0;
  	padding: 4px 0;
  	text-align: right;
  }
  div#menu li {
  	margin: 0;
  	padding: 0;
  	display: inline;
  	background: none;
  	line-height: 1;
  }
  div#menu a {
  	padding: 4px 10px;
  	letter-spacing: 1px;
  }

Time-A

• 投稿時刻の表示が特徴的です。
• Time-Aは、メニューとフッターのはじまであるラインで画面をひきしめている、クールなデザインです。
  • Time-A1 は、ほとんどがグレー系で、ヘッダーの画像とリンクの緑が全体のポイントとなっています。
• ページタイトルの前の空白が気になる方はページにも投稿日時を表示するとよいかもしれません。
• p タグにはさんだ画像は、最大横幅 550px （サイドバーがないときは 790px ）まではみ出さず表示できます。
  <p class="img_center"> ～ </p> にはさんだ場合、最大横幅は 580px （サイドバーがないときは 820px ）です。
• カスタマイズは、まずトップ画像を変更し、それに合わせた色にスタイルシートの #55CC11 を一括変更するとよいです。

メニュー項目

1. メニュー項目の変更をしたときは、項目数に合わせてスタイルシートを修正します。（デフォルトは7項目）
   • 5項目　・・・　div#menu ul → 820px　／　div#menu li → 163px
   • 6項目　・・・　div#menu ul → 816px　／　div#menu li → 135px
   • 7項目　・・・　div#menu ul → 819px　／　div#menu li → 116px
   • 8項目　・・・　div#menu ul → 816px　／　div#menu li → 101px
   • 4項目以下の場合、div#menu ul （806～820px内が適当）、div#menu li は好きな幅にしてください。
     必要があれば border-right: 1px solid #FFFFFF; を追記します。

Time-B

• 投稿時刻の表示が特徴的です。
• Time-Bは、メニューの上の画像とリンクの線がポイントの、カチッとしたデザインです。
  • Time-B1 は、白背景に緑系の、どことなく企業系なイメージです。
• ページタイトルの前の空白が気になる方はページにも投稿日時を表示するとよいかもしれません。
• p タグにはさんだ画像は、最大横幅 550px （サイドバーがないときは 790px ）まではみ出さず表示できます。
  <p class="img_center"> ～ </p> にはさんだ場合、最大横幅は 580px （サイドバーがないときは 820px ）です。
• 違った色合いにしたいときは、画像をカスタマイズするほかに、スタイルシートで、緑系の色 #FF8800 #E3F3C3 #4C5C28 #669933 #99CC66 と、リンクの色（オレンジ系）#EE6600 #FF8800 を変更してください。

メニュー項目

• メニュー項目の変更をしたときは、内容にあわせてスタイルシートを修正します。
  1. 文字数に合わせて div#menu li の width を修正します。
  2. 文字サイズを大きくするときや使用画像が大きいときは div#menu ul と div#menu li の height 、div#menu a の line-height で高さも修正します。
• 一番右側になるメニュー項目が拍手画像などや、一番左側がサイト名などで、横幅が他と違っていてもOKな場合、その li要素にクラス指定で個別指定することによって、ぴったりさせることができます。
  合計が 818px になるように、調整してください。 例： 818－6×（120＋1）＝92
  1. メニュー項目の変更 でたとえば７番目のメニュー項目をこのように指定します。

     <li class="menuright"><a href="{$freo.core.http_file}/clap">拍手画像</a></li>

  2. スタイルシートに追記します。

     div#menu li.menuright {
     	border: none;
     	width: 92px;
     }
     div#menu li a img {
     	border: none;
     }

Time-C

• 投稿時刻の表示が特徴的です。
• Time-Cは、メニュー以下を囲んだデザインなので、ブログタイトルのデザインでいろいろ遊んでも見やすいです。
  ブログタイトルを画像（psdファイル同梱）にしていますが、普通にすることもできます。
  • Time-C1 は、白背景に濃いピンクが目をひくポップなデザインです。
  • Time-C2 は、黒背景に水色が目をひくポップなデザインです。
• ページタイトルの前の空白が気になる方はページにも投稿日時を表示するとよいかもしれません。
• p タグにはさんだ画像は、最大横幅 550px （サイドバーがないときは 790px ）まではみ出さず表示できます。
  <p class="img_center"> ～ </p> にはさんだ場合、最大横幅は 580px （サイドバーがないときは 820px ）です。
• スタイルシートで、濃いピンクの #FF0088 薄いピンクの #FFDDEE を一括変換し、ブログタイトル画像を変更するとがらっと雰囲気を変えられます。

メニュー項目

• メニュー項目の変更をしたときは、内容にあわせてスタイルシートを修正します。
  1. 文字数に合わせて div#menu li の width を修正します。
  2. 文字サイズを大きくするときや使用画像が大きいときは div#menu ul と div#menu li の height 、div#menu a の line-height で高さも修正します。
• 一番右側になるメニュー項目が拍手画像などや、一番左側がサイト名などで、横幅が他と違っていてもOKな場合、その li要素にクラス指定で個別指定することによって、ぴったりさせることができます。
  合計が 850px になるように、調整してください。 例： 850－6×（125＋1）＝94
  1. メニュー項目の変更 でたとえば７番目のメニュー項目をこのように指定します。

     <li class="menuright"><a href="{$freo.core.http_file}/clap">拍手画像</a></li>

  2. スタイルシートに追記します。

     div#menu li.menuright {
     	border: none;
     	width: 94px;
     }
     div#menu li a img {
     	border: none;
     }

ブログタイトル画像

• 違うものに変えたときは、それに合わせてスタイルシートを修正してください。
  （参考：ブログタイトルを画像にしたい）
• テキストリンクにしたいときは、たとえば以下のように書き換えます。

  div.blogtitle h1 {
  	margin: 10px 5px 0;
  	font-size: 300%;
  	letter-spacing: 8px;
  }
  div.blogtitle a {
  }

1. * html body の text-align を修正します。右寄せは right 、左寄せは left 、中央寄せは center です。（IE6対策）
2. div#container の margin を修正します。右寄せは 0 0 0 auto 、左寄せは 0 auto 0 0 、中央寄せは 0 auto です。
   • div#container に何も指定していないスキンの場合は、 div#body 、 div#blogtitle 、 div#menu 、 div#footer （またはaddress 、 div#footer p） に個別指定しているので、左右の margin を同じように修正します。

1. 記事の横幅
   div#content の width を増減します。
   • div#container に何も指定していないスキンの場合は、 div#body 、 div#blogtitle 、 div#menu 、 div#footer （またはaddress 、 div#footer p） に個別指定されている width を増減します。
2. サイドバーの横幅
   div#utility 、 div.utility dl dd input, div.utility dl dd textarea 、 table.calender の width を同じだけ増減します。
3. 全体の横幅
   それぞれで増減した合計分、 div#container の width を増減します。
4. これ以外にも横幅が指定されている場合もあります。 width を検索して同じように調整します。

1. div#utility と div#content の、 float: left; と float: right; を入れ替えます。
2. 他微調整。

Basic、Line、Simple

1. スタイルシートから ul.entry_information li の display: inline; を削除します。
2. 余白を修正します。
   • ul.entry_information → padding: 3px 8px 0;
   • ul.entry_information li → margin: 0 0 3px;

Box

1. スタイルシートから ul.entry_information li の display: inline; を削除します。
2. 余白を修正します。
   • ul.entry_information → padding: 4px 15px 0;
   • ul.entry_information li → margin: 0;padding: 0 0 5px;

Pretty

1. スタイルシートから ul.entry_information li の display: inline; を削除します。
2. 余白を修正します。
   • ul.entry_information li → margin: 3px 0 0;

Time

1. 投稿時刻、カテゴリ、タグを下のURL、投稿者、コメント、トラックバック、編集と一緒に並べるカスタマイズで、投稿時刻を残し、カテゴリ、タグを下に移動します。
2. スタイルシートに追記します。
   線の色はグレー #CCCCCC ですが、何色でもよいです。（たとえば Time-B1 は #E0EEC0 など）

   ul.link {
   	text-align: left;
   }
   ul.link li.link_category {
   	padding: 3px 5px;
   	border-top: 1px solid #CCCCCC;
   	display: block;
   	background: none;
   }
   ul.link li.link_tag {
   	margin: 0 0 5px;
   	padding: 3px 5px;
   	border-bottom: 1px solid #CCCCCC;
   	display: block;
   	background: none;
   }

1. images/K/ 内に画像を用意します。
2. スタイルシートに次のように記述します。

   div.blogtitle h1 {
   	position: relative;
   	height: 画像の高さと上からの位置を足した数値px;
   }
   div.blogtitle a {
   	position: absolute;
   	top: 上からの位置px;
   	left: 左からの位置px;
   	width: 画像の横幅px;
   	height: 画像の高さpx;
   	background: url("../images/K/画像ファイル名.gif") no-repeat 0 0;
   	text-indent: -9999em;
   }

1. スタイルシートに以下の記述を削除します。

   a:link img, a:visited img {
   	borderやbackgroundなど
   }
   a:hover img, a:active img {
   	borderやbackgroundなど
   }

• トップページだけスタイルシートの表示を変更するときは、スタイルシートに body#toppage ～ {　～　} で指定します。
• header.html に追記すれば、特定のページだけ同様に変更することができます。
  たとえば、 <!--{/if}--> の前に <!--{elseif $smarty.request.freo.work == 'novel'}--> id="novelpage" というように追記すれば、 body#novelpage ～ {　～　} で小説ページだけ指定ができます。

トップページ以外ヘッダーを表示しない

1. スタイルシートに以下のような記述を追加します。

   div#blogtitle {
   	display: none;
   }
   body#toppage div#blogtitle {
   	display: block;
   }

トップページだけヘッダーの画像と高さを変更（Time-A）
トップページだけヘッダーに画像を表示（Basic、Line、Simple、Time-C）

1. images/K/ 内に画像を用意します。
2. スタイルシートに以下のような記述を追加します。

   body#toppage div#blogtitle {
   	height: 高さpx;
   	background: url("../images/K/画像ファイル名") no-repeat right bottom;
   }

   Basic1、Line1、Simple1 の場合、height は padding-top のほうがよいかもしれません。

トップページだけヘッダーの画像や高さを変更（Pretty、Box）

1. images/K/ 内に画像を用意します。
2. スタイルシートに以下のような記述を追加します。（Boxの場合、高さは150pxまで　それ以上はh1-801.gifの高さを大きくする必要あり）

   body#toppage div#blogtitle {
   	background: url("../images/K/画像ファイル名") no-repeat 300px 1px;
   }
   body#toppage div.blogtitle {
   	height: 高さpx;
   }

トップページだけメニューの画像と高さを変更（Time-B）

1. images/K/ 内に画像を用意します。
2. スタイルシートに以下のような記述を追加します。

   body#toppage div#menu {
   	padding-top: 背景画像の高さpx;
   	background: url("../images/K/画像ファイル名") no-repeat right bottom;
   }

• Timeシリーズ以外は、記事タイトルの先頭に、小さなアイコンを背景画像として置くことができます。
  Basic、Simple-B以外はすでにアイコンらしい背景画像を指定済みですが、ぜひ好みのものにカスタマイズしてみてください。

1. 以下の background を background: url("../images/K/○○.gif") no-repeat 5px 5px; というように修正します。
   • エントリーの記事タイトル（通常）
     div.entry h3 a , div.entry h3 a:link , div.entry h3 a:visited
   • エントリーの記事タイトル（マウスオーバー）
     div.entry h3 a:hover , div.entry h3 a:active
   • その他のタイトル
     div#information div.entry h3, div#information div.information h2 ～
2. 以下の padding をアイコンの大きさに合わせて修正します。
   • エントリーの記事タイトル
     div.entry h3 a
   • その他のタイトル
     div#information div.entry h3, div#information div.information h2 ～

イラスト投稿プラグインを使用するとき

1. アプレット作成者の著作権表記の追記が必要になります。
   たとえば、しぃペインターと動的パレットを使用する場合は、 footer.html 9行目 Designed の直前に以下のように追記します。

   ShiPainter <a href="http://shichan.jp/" title="Shi-do">Shi-do</a> / 
   DynamicPalette <a href="http://wondercatstudio.com/" title="WonderCatStudio">WonderCatStudio</a> / 

自分で独自にスキン改造したことを表示したい

1. KURAGEYA</a> の直後にこんな感じでしょうか。
   素材屋の画像を使用して改造した場合は、そこの規約に従い、必要があればリンク挿入してください。
   （「graphics by　～」は「Photo by　～」　や　「イラスト：　～」などでも）

    / skin edit by 改造者の名前やサイト名など
    / graphics by <a href="素材屋URL" title="素材屋サイト名">素材屋サイト名</a>

コピーライト

1. 投稿記事やサイト全体の著作権表示は、 footer.html 9行目 </address> の直後に、以下のような記述を追記するとよいかもしれません。

   <p>Copyright &copy; 2009-2010 ○○, All rights reserved.</p>

「login」の文字変更

1. 「login」の文字は、 footer.html 9行目にある login を変更することで変えられます。

1. utility.html から該当項目を削除します。
   • カレンダー　→　6～41行 <div class="utility"><div class="utility_calendar">　～　</div></div>
   • カテゴリー　→　45～50行 <div class="utility"><div class="utility_category">　～　</div></div>
   • 検索フォーム　→　54～68行 <div class="utility"><div class="utility_search">　～　</div></div>
   • ページ　→　72～77行 <div class="utility"><div class="utility_page">　～　</div></div>
   • リンク　→　81～86行 <div class="utility"><div class="utility_links">　～　</div></div>
   • ユーザー　→　90～95行 <div class="utility"><div class="utility_user">　～　</div></div>
   • 新着エントリー　→　99～106行 <!--{if $plugin_entry_recentries|smarty:nodefaults}-->　～　<!--{/if}-->
   • 新着コメント　→　110～117行 <!--{if $plugin_comment_recentries|smarty:nodefaults}-->　～　<!--{/if}-->
   • 新着トラックバック　→　121～128行 <!--{if $plugin_trackback_recentries|smarty:nodefaults}-->　～　<!--{/if}-->
   • 過去ログ　→　132～151行 <div class="utility"><div class="utility_archive">　～　</div></div>
   • feed　→　155～160行 <div class="utility"><div class="utility_feed">　～　</div></div>

utility.html に追記することができます。

サンプルのプロフィール例１

• スキンサンプルのプロフィール例１はこんなふうに記述しています。

  	<div class="utility_parts">
  		<div class="title"><h3>プロフィール例１</h3></div>
  		<div class="content"><div class="content2">
  
  			<p class="img_center"><img src="○○" width="○○" height="○○" alt="○○" /></p>
  			<p>管理人：☆☆<br />19XX年XX月XX日生。東京都在住。</p>
  			<ul>
  				<li>○○や●●が好きです。</li>
  				<li>今は☆☆を主に活動しています。</li>
  				<li><strong>◇◇に参加予定。</strong></li>
  			</ul>
  			<h4>最近のお仕事</h4>
  			<p><a href="○○"><img src="○○" alt="○○" width="○○" height="○○" /></a><br />□□に参加させていただきました。</p>
  			<p><img src="○○" width="○○" height="○○" alt="○○" /></p>
  			<table summary="予定表">
  				<tbody>
  					<tr><td colspan="2"> 6月予定</td></tr>
  					<tr><th rowspan="2">4日（土）</th><td>AAAイベント</td></tr>
  					<tr><td>BBBオンリーイベント</td></tr>
  					<tr><th>19日（日）</th><td>CCCイベント</td></tr>
  				</tbody>
  			</table>
  
  		</div></div>
  	</div>

• スキンサンプルのプロフィール例２はこんなふうに記述しています。

  	<div class="utility_parts">
  		<div class="title"><h3>プロフィール例２</h3></div>
  		<div class="content"><div class="content2">
  
  			<p><img src="○○" width="○○" height="○○" alt="○○" class="img_left" /></p>
  			<p>管理人：☆☆<br />19XX年XX月XX日生<br />東京都在住</p>
  			<ul class="clear">
  				<li>○○や●●が好きです。</li>
  				<li>今は☆☆を主に活動しています。</li>
  			</ul>
  			<p>＞<a href="○○">仕事情報</a>　　＞<a href="○○">同人情報</a></p>
  
  		</div></div>
  	</div>

ブログパーツの追記

• Twitterウィジェットなど { や } を含むコードは {literal}　～　{literal} で囲まないとエラーになることに注意してください。
  → freo.jp (Twitterへの投稿内容を表示する)
• スキンサンプルのブログパーツはこんなふうに記述しています。

  	<div class="utility_parts">
  		<div class="title"><h3>ブログパーツ</h3></div>
  		<div class="content"><div class="content2">
  
  			<div class="utility_parts2">ブログパーツのJavaScriptコード</div>
  
  			<div class="utility_parts2">ブログパーツのJavaScriptコード</div>
  
  		</div></div>
  	</div>

• スキンサンプルの枠に囲んでいないブログパーツはこんなふうに記述しています。

  	<div class="utility_blogparts">
  		ブログパーツのJavaScriptコード
  	</div>

訪問者に教えてもらった情報（２ちゃんねる）をもとに２案を考えてみました。
utility.html の132～151行（1カラム用のスキンの場合は58～77行）を以下のように書き換えます。

一覧表示

	<div class="utility"><div class="utility_archive">
		<div class="title"><h3>archive</h3></div>
		<div class="content"><div class="content2">
			<!--{assign var="pid" value=""}-->
				<!--{foreach from=$plugin_entry_archives|smarty:nodefaults item='plugin_entry_archive' name='loop'}-->
					<!--{if $pid!=$plugin_entry_archive.year}--><!--{if !$smarty.foreach.loop.first}--></ul></li></ul><!--{/if}--><ul><li><a href="{$freo.core.http_file}/entry?date={$plugin_entry_archive.year}">{$plugin_entry_archive.year}年</a><ul><!--{/if}-->
					<li><a href="{$freo.core.http_file}/entry?date={$plugin_entry_archive.year}{$plugin_entry_archive.month}" title="{$plugin_entry_archive.count}件">{$plugin_entry_archive.month}月 <span class="count">({$plugin_entry_archive.count})</span></a></li>
					<!--{if $smarty.foreach.loop.last}--></ul></li></ul><!--{/if}-->
				<!--{assign var="pid" value=$plugin_entry_archive.year}-->
			<!--{foreachelse}-->
			<p>エントリーが登録されていません。</p>
			<!--{/foreach}-->
		</div></div>
	</div></div>

コンパクト一覧表示

	<div class="utility"><div class="utility_archive">
		<div class="title"><h3>archive</h3></div>
		<div class="content"><div class="content2">
			<table>
			<!--{assign var="pid" value=""}-->
				<!--{foreach from=$plugin_entry_archives|smarty:nodefaults item='plugin_entry_archive' name='loop'}-->
					<!--{if $pid!=$plugin_entry_archive.year}-->
						<!--{if !$smarty.foreach.loop.first}--></td></tr><!--{/if}-->
						<tr><th><a href="{$freo.core.http_file}/entry?date={$plugin_entry_archive.year}">{$plugin_entry_archive.year}</a></th><td>
					<!--{/if}-->
					<a href="{$freo.core.http_file}/entry?date={$plugin_entry_archive.year}{$plugin_entry_archive.month}" title="{$plugin_entry_archive.count}件">{$plugin_entry_archive.month}</a> 
					<!--{if $smarty.foreach.loop.last}--></td></tr><!--{/if}-->
				<!--{assign var="pid" value=$plugin_entry_archive.year}-->
			<!--{foreachelse}-->
			<tr><td>エントリーが登録されていません。</td></tr>
			<!--{/foreach}-->
			</table>
		</div></div>
	</div></div>

記事表示画面

view/default.html をカスタマイズします。

1. 8～16行 <ul class="entry_information"> ～ </ul> を削除
   ※　投稿時刻を残す場合、 <!--{if $entry_associate.category}--> ～ <!--{/if}--> だけ削除
2. <ul class="link"> の後ろに追記

   <li class="link_time">{$entry.datetime|date_format:'%Y/%m/%d %H:%M'}</li><!--{if $entry_associate.category}-->
   <li class="link_category"><!--{foreach from=$entry_associate.category|smarty:nodefaults key='entry_category' item='entry_category' name='loop'}-->
   <a href="{$freo.core.http_file}/category/{$entry_category}" title="カテゴリー：{$freo.refer.categories[$entry_category].name}">{$freo.refer.categories[$entry_category].name}</a><!--{if !$smarty.foreach.loop.last}-->,<!--{/if}-->
   <!--{/foreach}--></li><!--{/if}--><!--{if $entry_tags}-->
   <li class="link_tag"><!--{foreach from=$entry_tags|smarty:nodefaults item='entry_tag' name='loop'}--><a href="{$freo.core.http_file}/entry?tag={$entry_tag|smarty:nodefaults|escape:'url'}" title="タグ：{$entry_tag}">{$entry_tag}</a><!--{if !$smarty.foreach.loop.last}-->,<!--{/if}-->
   <!--{/foreach}--></li><!--{/if}-->

ページ画面

page/default.html （個別テンプレートを使用している場合は page/gallery.html と page/novel.html も） をカスタマイズします。

1. 8～10行 <!--{if $page_tags}--> ～ <!--{/if}--> を削除
2. <ul class="link"> の後ろに追記

   <!--{if $page_tags}--><li class="link_tag"><!--{foreach from=$page_tags|smarty:nodefaults item='page_tag' name='loop'}-->
   <a href="{$freo.core.http_file}/page?tag={$page_tag|smarty:nodefaults|escape:'url'}" title="タグ：{$page_tag}">{$page_tag}</a><!--{if !$smarty.foreach.loop.last}-->,<!--{/if}-->
   <!--{/foreach}--></li><!--{/if}-->

トップページ、他

default/default.html をカスタマイズします。
トップページの表示を変更している場合は entry/default.html と category/default.html をかわりにカスタマイズします。

1. 91～99行 <ul class="entry_information"> ～ </ul> を削除 （ entry/default.html 、 category/default.html は16～24行 ）
   ※　投稿時刻を残す場合、 <!--{if $entry_associates[$entry.id].category}--> ～ <!--{/if}--> だけ削除
2. <ul class="link"> の後ろに追記

   <li class="link_time">{$entry.datetime|date_format:'%Y/%m/%d %H:%M'}</li><!--{if $entry_associates[$entry.id].category}-->
   <li class="link_category"><!--{foreach from=$entry_associates[$entry.id].category|smarty:nodefaults key='entry_category' item='entry_category' name='loop'}-->
   <a href="{$freo.core.http_file}/category/{$entry_category}" title="カテゴリー：{$freo.refer.categories[$entry_category].name}">{$freo.refer.categories[$entry_category].name}</a><!--{if !$smarty.foreach.loop.last}-->,<!--{/if}-->
   <!--{/foreach}--></li><!--{/if}--><!--{if $entry_tags[$entry.id]}-->
   <li class="link_tag"><!--{foreach from=$entry_tags[$entry.id]|smarty:nodefaults item='entry_tag' name='loop'}--><a href="{$freo.core.http_file}/entry?tag={$entry_tag|smarty:nodefaults|escape:'url'}" title="タグ：{$entry_tag}">{$entry_tag}</a><!--{if !$smarty.foreach.loop.last}-->,<!--{/if}-->
   <!--{/foreach}--></li><!--{/if}-->

エントリープレビュー

admin/entry_preview.html をカスタマイズします。

1. 8～16行 <ul class="entry_information"> ～ </ul> を削除
   ※　投稿時刻を残す場合、 <!--{if $entry_associate.category}--> ～ <!--{/if}--> だけ削除
2. <ul class="link"> の後ろに追記

   <li class="link_time">{$entry.datetime|date_format:'%Y/%m/%d %H:%M'}</li><!--{if $entry_associate.category}-->
   <li class="link_category"><!--{foreach from=$entry_associate.category|smarty:nodefaults key='entry_category' item='entry_category' name='loop'}-->
   <a href="#">{$freo.refer.categories[$entry_category].name}</a><!--{if !$smarty.foreach.loop.last}-->,<!--{/if}-->
   <!--{/foreach}--></li><!--{/if}--><!--{if $entry_tags}-->
   <li class="link_tag"><!--{foreach from=$entry_tags|smarty:nodefaults item='entry_tag' name='loop'}--><a href="#">{$entry_tag}</a><!--{if !$smarty.foreach.loop.last}-->,<!--{/if}-->
   <!--{/foreach}--></li><!--{/if}-->

ページプレビュー

admin/page_preview.html をカスタマイズします。

1. 7～9行 <!--{if $page_tags}--> ～ <!--{/if}--> を削除
2. <ul class="link"> の後ろに追記

   <!--{if $page_tags}--><li class="link_tag"><!--{foreach from=$page_tags|smarty:nodefaults item='page_tag' name='loop'}-->
   <a href="#">{$page_tag}</a><!--{if !$smarty.foreach.loop.last}-->,<!--{/if}-->
   <!--{/foreach}--></li><!--{/if}-->

このかたまりごとに順序を変えたり、一部削除したりできます。

記事表示画面

1. view/default.html をカスタマイズします。
   • 投稿時間　→　<li class="entry_time">　～　</li>
   • 投稿時間（カスタマイズ後）　→　<li class="link_time">　～　</li>
   • カテゴリー　→　<!--{if $entry_associate.category}-->　～　<!--{/if}-->
   • タグ　→　<!--{if $entry_tags}-->　～　<!--{/if}-->
   • 記事のURL　→　<li class="link_url">　～　</li>
   • 投稿者　→　<li class="link_user">　～　</li>
   • コメント　→　<!--{if $entry.comment != 'closed'}-->　～　<!--{/if}-->
   • トラックバック　→　<!--{if $entry.trackback != 'closed'}-->　～　<!--{/if}-->
   • 編集　→　<!--{if $freo.user.authority == 'root' or $freo.user.id == $entry.user_id}-->　～　<!--{/if}-->

ページ画面

1. page/default.html （個別テンプレートを使用している場合は page/gallery.html と page/novel.html も） をカスタマイズします。
   • タグ　→　<!--{if $page_tags}-->　～　<!--{/if}-->
   • ページURL　→　<li class="link_url">　～　</li>
   • 投稿者　→　<li class="link_user">　～　</li>
   • 編集　→　<!--{if $freo.user.authority == 'root' or $freo.user.id == $page.user_id}-->　～　<!--{/if}-->

トップページ、他

1. default/default.html をカスタマイズします。
   トップページの表示を変更している場合は entry/default.html と category/default.html をかわりにカスタマイズします。
   • 投稿時間　→　<li class="entry_time">　～　</li>
   • 投稿時間（カスタマイズ後）　→　<li class="link_time">　～　</li>
   • カテゴリー　→　<!--{if $entry_associates[$entry.id].category}-->　～　<!--{/if}-->
   • タグ　→　<!--{if $entry_tags[$entry.id]}-->　～　<!--{/if}-->
   • 記事URL　→　<li class="link_url">　～　</li>
   • 投稿者　→　<li class="link_user">　～　</li>
   • コメント　→　<!--{if $entry.comment != 'closed'}-->　～　<!--{/if}-->
   • トラックバック　→　<!--{if $entry.trackback != 'closed'}-->　～　<!--{/if}-->
   • 編集　→　<!--{if $freo.user.authority == 'root' or $freo.user.id == $entry.user_id}-->　～　<!--{/if}-->

エントリープレビュー

admin/entry_preview.html をカスタマイズします。

• 投稿時間　→　<li class="entry_time">　～　</li>
• 投稿時間（カスタマイズ後）　→　<li class="link_time">　～　</li>
• カテゴリー　→　<!--{if $entry_associate.category}-->　～　<!--{/if}-->
• タグ　→　<!--{if $entry_tags}-->　～　<!--{/if}-->
• 記事のURL　→　<li class="link_url">　～　</li>

ページプレビュー

admin/page_preview.html をカスタマイズします。

• タグ　→　<!--{if $page_tags}-->　～　<!--{/if}-->
• ページURL　→　<li class="link_url">　～　</li>

1. header.html 32行を修正します。

   				<ul id="navi">　～　</ul>

   • トップページ　→　<li><a href="{$freo.core.http_file}">トップページ</a></li>
   • ログイン　→　<li><a href="{$freo.core.https_file}/login">ログイン</a></li>
   • ブログ一覧（トップページを変更している場合）　→　<li><a href="{$freo.core.http_file}/entry">ブログ</a></li>
   • ギャラリーページ　→　<li><a href="{$freo.core.http_file}/page/gallery">ギャラリー</a></li>
   • 小説ページ　→　<li><a href="{$freo.core.http_file}/page/novel">小説</a></li>
   • 拍手ページ　→　<li><a href="{$freo.core.http_file}/clap">拍手</a></li>
   • 任意のページ　→　<li><a href="任意のURL">○○</a></li>
2. 閲覧者にユーザー登録させないときは、メニューからログインを削除するほうがよいかもしれません。
   （その場合、管理者はページ下部の管理画面への入り口「login」からログインしてください）
3. 拍手画像などやサイト名などで、横幅やリンク色が他と違うものにしたい場合、その li要素にクラス指定をして個別指定してください。

1. view/default.html からページの最初と最後の近くにある以下の記述を削除します。

   <div id="content">

   </div>
   {include file='utility.html'}

1. page/default.html （個別テンプレートを使用している場合は page/gallery.html と page/novel.html も） をカスタマイズします。
   <!--{if $page_tags}-->　～　<!--{/if}--> を以下のように書き換えます。

   			<ul class="entry_information">
   				<li class="entry_time">{$page.datetime|date_format:'<span class="year">%Y</span><span class="month"><span>/</span>%m</span><span class="date"><span>/</span>%d</span><span class="hour">%H:%M</span>'}</li>
   				<!--{if $page_tags}-->
   				<li class="entry_tag">タグ：<!--{foreach from=$page_tags|smarty:nodefaults item='page_tag' name='loop'}-->&nbsp;<a href="{$freo.core.http_file}/page?tag={$page_tag|smarty:nodefaults|escape:'url'}">{$page_tag}</a><!--{if !$smarty.foreach.loop.last}-->,<!--{/if}--><!--{/foreach}--></li>
   				<!--{/if}-->
   			</ul>

2. ページプレビューも同様にしたいときは、admin/page_preview.html をカスタマイズします。
   <!--{if $page_tags}-->　～　<!--{/if}--> を以下のように書き換えます。

   			<ul class="entry_information">
   				<li class="entry_time">{$page.datetime|date_format:'<span class="year">%Y</span><span class="month"><span>/</span>%m</span><span class="date"><span>/</span>%d</span><span class="hour">%H:%M</span>'}</li>
   				<!--{if $page_tags}-->
   				<li class="entry_tag">タグ：<!--{foreach from=$page_tags|smarty:nodefaults item='page_tag' name='loop'}-->&nbsp;<a href="#">{$page_tag}</a><!--{if !$smarty.foreach.loop.last}-->,<!--{/if}--><!--{/foreach}--></li>
   				<!--{/if}-->
   			</ul>

2011/5/8の更新で、インフォメーション以外のファイルの表示を以下のように変更しました。

デフォルトのスキンの場合、添付ファイルやサムネイルを優先して記事に表示します。
→ freo.jp (サムネイル画像の手動登録について)
→ freo.jp (添付ファイルのイメージやサムネイルを各記事に表示しない)

デフォルトのスキンと同じような表示に戻したい場合は以下のようにカスタマイズしてください。

記事表示画面

view/default.html をカスタマイズします。

1. 27～35行 <!--{if $entry_thumbnail}-->　～　<!--{/if}--> を以下のように書き換えます。

   				<!--{if $entry.file and $entry.image}-->
   					<p><a href="{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}entry_files/{$entry.id}/{$entry.file}"><img src="{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}entry_images/{$entry.id}/{$entry.image}" alt="{$entry.memo|default:$entry.file}" title="{$entry.memo|default:$entry.file}" width="{$entry_image.width}" height="{$entry_image.height}" /></a></p>
   				<!--{elseif $entry_thumbnail}-->
   					<p><a href="{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}entry_files/{$entry.id}/{$entry.file}"><img src="{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}entry_thumbnails/{$entry.id}/{$entry.file}" alt="{$entry.memo|default:$entry.file}" title="{$entry.memo|default:$entry.file}" width="{$entry_thumbnail.width}" height="{$entry_thumbnail.height}" /></a></p>
   				<!--{elseif $entry.file and $entry_file.width and $entry_file.height}-->
   					<p><img src="{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}entry_files/{$entry.id}/{$entry.file}" alt="{$entry.memo|default:$entry.file}" title="{$entry.memo|default:$entry.file}" width="{$entry_file.width}" height="{$entry_file.height}" /></p>
   				<!--{elseif $entry.file}-->
   					<p><a href="{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}entry_files/{$entry.id}/{$entry.file}">{$entry.memo|default:$entry.file}</a></p>
   				<!--{/if}-->

ページ画面

page/default.html （個別テンプレートを使用している場合は page/gallery.html と page/novel.html も） をカスタマイズします。

1. 21～29行 <!--{if $page_thumbnail}-->　～　<!--{/if}--> を以下のように書き換えます。

   				<!--{if $page.file and $page.image}-->
   					<p><a href="{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}page_files/{$page.id}/{$page.file}"><img src="{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}page_images/{$page.id}/{$page.image}" alt="{$page.memo|default:$page.file}" title="{$page.memo|default:$page.file}" width="{$page_image.width}" height="{$page_image.height}" /></a></p>
   				<!--{elseif $page_thumbnail}-->
   					<p><a href="{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}page_files/{$page.id}/{$page.file}"><img src="{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}page_thumbnails/{$page.id}/{$page.file}" alt="{$page.memo|default:$page.file}" title="{$page.memo|default:$page.file}" width="{$page_thumbnail.width}" height="{$page_thumbnail.height}" /></a></p>
   				<!--{elseif $page.file and $page_file.width and $page_file.height}-->
   					<p><img src="{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}page_files/{$page.id}/{$page.file}" alt="{$page.memo|default:$page.file}" title="{$page.memo|default:$page.file}" width="{$page_file.width}" height="{$page_file.height}" /></p>
   				<!--{elseif $page.file}-->
   					<p><a href="{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}page_files/{$page.id}/{$page.file}">{$page.memo|default:$page.file}</a></p>
   				<!--{/if}-->

トップページ、他

default/default.html をカスタマイズします。
トップページの表示を変更している場合は entry/default.html と category/default.html をかわりにカスタマイズします。

1. 110～118行 <!--{if $entry_thumbnails[$entry.id]}-->　～　<!--{/if}--> を以下のように書き換えます。
   （ entry/default.html 、 category/default.html は35～43行 ）

   				<!--{if $entry.file and $entry.image}-->
   					<p><a href="{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}entry_files/{$entry.id}/{$entry.file}"><img src="{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}entry_images/{$entry.id}/{$entry.image}" alt="{$entry.memo|default:$entry.file}" title="{$entry.memo|default:$entry.file}" width="{$entry_images[$entry.id].width}" height="{$entry_images[$entry.id].height}" /></a></p>
   				<!--{elseif $entry_thumbnails[$entry.id]}-->
   					<p><a href="{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}entry_files/{$entry.id}/{$entry.file}"><img src="{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}entry_thumbnails/{$entry.id}/{$entry.file}" alt="{$entry.memo|default:$entry.file}" title="{$entry.memo|default:$entry.file}" width="{$entry_thumbnails[$entry.id].width}" height="{$entry_thumbnails[$entry.id].height}" /></a></p>
   				<!--{elseif $entry.file and $entry_files[$entry.id].width and $entry_files[$entry.id].height}-->
   					<p><img src="{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}entry_files/{$entry.id}/{$entry.file}" alt="{$entry.memo|default:$entry.file}" title="{$entry.memo|default:$entry.file}" width="{$entry_files[$entry.id].width}" height="{$entry_files[$entry.id].height}" /></p>
   				<!--{elseif $entry.file}-->
   					<p><a href="{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}entry_files/{$entry.id}/{$entry.file}">{$entry.memo|default:$entry.file}</a></p>
   				<!--{/if}-->

エントリープレビュー

admin/entry_preview.html をカスタマイズします。

1. 27～35行 <!--{if $entry_path.thumbnail}-->　～　<!--{/if}--> を以下のように書き換えます。

   				<!--{if $entry_path.file and $entry_path.image}-->
   					<p><a href="#"><img src="{$entry_path.image}" alt="" width="{$entry_image.width}" height="{$entry_image.height}" /></a></p>
   				<!--{elseif $entry_path.thumbnail}-->
   					<p><a href="#"><img src="{$entry_path.thumbnail}" alt="" width="{$entry_thumbnail.width}" height="{$entry_thumbnail.height}" /></a></p>
   				<!--{elseif $entry_path.file and $entry_file.width and $entry_file.height}-->
   					<p><img src="{$entry_path.file}" alt="" width="{$entry_file.width}" height="{$entry_file.height}" /></p>
   				<!--{elseif $entry_path.file}-->
   					<p><a href="#">{$entry.memo|default:$entry.file}</a></p>
   				<!--{/if}-->

ページプレビュー

admin/page_preview.html をカスタマイズします。

1. 20～28行 <!--{if $page_path.thumbnail}-->　～　<!--{/if}--> を以下のように書き換えます。

   				<!--{if $page_path.file and $page_path.image}-->
   					<p><a href="#"><img src="{$page_path.image}" alt="" width="{$page_image.width}" height="{$page_image.height}" /></a></p>
   				<!--{elseif $page_path.thumbnail}-->
   					<p><a href="#"><img src="{$page_path.thumbnail}" alt="" width="{$page_thumbnail.width}" height="{$page_thumbnail.height}" /></a></p>
   				<!--{elseif $page_path.file and $page_file.width and $page_file.height}-->
   					<p><img src="{$page_path.file}" alt="" width="{$page_file.width}" height="{$page_file.height}" /></p>
   				<!--{elseif $page_path.file}-->
   					<p><a href="#">{$page.memo|default:$page.file}</a></p>
   				<!--{/if}-->

2011/7/9

「Pretty-A2」「Pretty-A2」配布開始
HTMLテンプレート修正（freo 1.6.4 更新による header.html 追記）
デザインCSS修正（ネタバレボタン実装の指定追加と微修正）

2011/5/8

HTMLテンプレート修正（プレビューテンプレート追加、添付ファイルのイメージを記事内に表示しないよう変更、記述の整理）
デザインCSS修正（プレビューとサイドバー追記の指定追加と微修正）
サンプルのエントリー個別表示にサイドバー追記例

2011/3/6

「Box-A」1カラム配布開始
HTMLテンプレート修正（1カラム用 utility.html、検索プラグインのテンプレート追加）
デザインCSS修正（検索プラグイン指定追加）

2011/2/19

「Box-B1」「Box-B2」「Box-B3」「Box-B4」配布開始

2011/2/13

「Time-C2」配布開始

2011/2/6

「Scroll-A2」「Scroll-B1」「Scroll-B2」配布開始
スキン名変更 「Scroll1」→「Scroll-A1」
HTMLテンプレート修正（メール送信プラグインのテンプレート追加）

2011/1/29

「Box-A4」配布開始

2011/1/22

「Simple-B1」「Box-A3」配布開始
スキン名変更「Simple1、2」→「Simple-A1、B2」、「Box1、2」→「Box-A1、A2」、「Time1～3」→「Time-A1、B1、C1」

2011/1/16

「Scroll1」配布開始
HTMLテンプレート修正（サイドバー付ページテンプレートに空間確保と目次表示を追加）
デザインCSS修正（リスト用minilistクラス追加、リスト要素の入れ子のデザイン修正、ul.link に clear: both; 追加）

2011/1/11

「Simple2」配布開始
デザインCSS修正（関連エントリープラグイン使用時のデザイン変更）

2011/1/8

「Simple1」配布開始
HTMLテンプレート修正（半角スペースなど微修正）
デザインCSS修正（画像の回り込みや左右余白なしの中央寄せのクラス追加）

2011/1/4

「Time1」「Time2」「Time3」配布開始
デザインCSS修正（captionなどの指定追加、余白の修正、続きを読むリンクやメニューのデザイン変更など）

2010/12/30

「Basic1」「Line1」「Box1」「Box2」配布開始