Web Liberty&freoカスタマイズ集

【主な変更箇所】

1. エントリーの表示をメニューリストから変更（default）
   タイトルが長くなると全部表示できないのでウ～ンな感じ(^^ゞ
   なのでタイトル全文だけでなく、投稿日時、カテゴリー、コメント数、トラックバック数も表示。
   お陰でタップしやすくなりました。
2. エントリーの上部メニューにカテゴリー、検索、過去ログの設置（default、view）
   
3. カテゴリー、タグの表示をメニューリスト化（view、page）
4. コメント、トラックバックの表示を別画面に（view、page）
5. ページ移動をメニューリストから変更
   縦並びではなく横並びの表示に変更（ページではメニューリストのまま«»をつけました）。
   
6. リンクボタンの設置
   リンク部分をタップしやすいようボタン化。
   ただし、リンク表示の画像もボタン化されるのが玉にキズ(^^ゞ
   レイアウト上じゃまだったらcssファイルで「リンクボタン」の部分を削除してください。（.content a～ は本文表示用、.admin a～ は管理画面表示用です）
   
7. フォームの変更
   タップしやすいようサイズを大きくしました。
   入力部分に、placeholderでガイドテキストを表示。
   「input type="text"」のうち以下のものを
   メールアドレス：「input type="email"」
   URL：「input type="url"」
   キーワード：「input type="search"」
   並び順：「input type="number"」
   に変更。必要によってautocapitalize="off" autocorrect="off"の追加（英字で入力するとスペルチェックとか先頭文字が大文字になる処理をしないように）。
   
8. 管理画面では作業欄は確認のみ残し、編集はタイトル名の欄にリンクを移動し、表のセルごとタップできるようにしました。うまくできてないのでなんともかもしれませんが...
   
9. メニューリスト、下のメニューなどのデザイン変更
10. おまけ：コメントのメールアドレスをエンティティ表示化に（スパム対策のため？）
    moka（えむおか）さんの記事を参考に変更しました。
    http://10prs.com/view/50（メールアドレスを数値参照で表示するの部分）

テンプレートの配布は終了しました。

freo_iphone
 ┃
 ┣ css
 ┃ ┗ iphone ━ common.css
 ┃
 ┣ images ━ list_mark.png
 ┃
 ┗ templates
     ┃
     ┗ iphones ━ utility_category.html
         ┃
         ┗ internals （以下（略））

以上をfreoを導入しているディレクトリに上書きしてください。

---

【修正履歴】

2012/6/10 23:24修正

何か一番下に隙間が開いてるようでして...
css/iphone/common.css の395行目あたりの

footer nav ul{
  margin: 10px 0px;
}

の部分を、

footer nav ul{
  margin: 10px 0px 0px;
}

に変更（赤字を追加）してください（ダウンロードファイルも修正しました）。

2012/6/12 8:17修正

templates/iphones/internals/admin/filter.html の48行目あたりの

<td><a href="{$freo.core.http_file}/admin/filter_form?id={$filter.id}"{$filter.name}</a></td>

の部分を、

<td class="admin_table"><a href="{$freo.core.http_file}/admin/filter_form?id={$filter.id}">{$filter.name}</a></td>

に、
templates/iphones/internals/admin/group.html の48行目あたりの

<td><a href="{$freo.core.http_file}/admin/group_form?id={$group.id}">{$group.name}</a></td>

の部分を、

<td class="admin_table"><a href="{$freo.core.http_file}/admin/group_form?id={$group.id}">{$group.name}</a></td>

にそれぞれ変更（赤字を追加）してください（ダウンロードファイルも修正しました）。

2012/6/23 18:30修正

コメント欄にも書きましたが templates/iphones/internals/page/default.html の17行目にある

<li><a href="{$freo.core.http_file}/page/{$plugin_page_child.id}">{$plugin_page_child.title}<!--{if $plugin_page_child.datetime|recently:7:'day'}-->&nbsp;<em class="new">New!</em><!--{/if}--></a></li>

のうち緑字を削除してください（ダウンロードファイルも修正しました）。
※freoの新着マーク表示プラグインを導入されている場合は不具合は出ませんのでそのままお使いいただいても結構です。

2012/11/30 20:34修正

フッター部分の字のにじみをなくすために css/iphones/common.css の

footer nav li>a {

の部分にある

text-shadow: 0px 1px 1px rgba(0,0,255,0.2), 0px -1px 0px rgba(255,255,255,0.7);

を削除しました。

2012/12/13 11:15修正

freo本体のver1.13.0のテンプレート修正版に対応しました。

2012/12/17 21:42修正

freo本体のver1.13.2のテンプレート修正版に対応しました。

2012/12/20 11:38修正

freo本体のver1.14.0の修正によりエントリーギャラリープラグインのテンプレートを追加し、以下のファイルを修正しました。
css/iphone/default.css の645行目あたりの個別設定の前に以下のギャラリー設定を追加しました。

/********* ギャラリー ***********************************************/

div#gallery {
  overflow: hidden;
}
div#gallery div.gallery {
  float: left;
  margin-right: 12px;
  margin-bottom: 20px;
}
div#gallery div.gallery p.picture {
  overflow: hidden;
  width: 140px;
  height: 100px;
  margin: 0;
}
div#gallery div.gallery p.picture a {
  color: #FFFFFF;
  text-decoration: none;
}
div#gallery div.gallery p.picture a img {
  min-width: 140px;
  min-height: 100px;
}
div#gallery div.gallery p.picture a span.empty {
  display: block;
  line-height: 100px;
  width: 140px;
  height: 100px;
  background-color: #AAAAAA;
  text-align: center;
}
div#gallery div.gallery p.comment {
  overflow: hidden;
  width: 140px;
  margin: 3px 0 0;
  font-size: 80%;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

div#gallery ul {
  margin: 10px 0 20px 0;
}
div#gallery ul li {
  display: inline;
}
div#gallery ul li img {
  margin: 0 2px 10px 0;
}

templates/iphones/internals/default/default.html の119行目あたりにあるコンテンツの部分を、

<h1>コンテンツ</h1>
<ul class="menu">
  <!--{foreach from=$plugin_page_menus|smarty:nodefaults item='plugin_page_menu'}-->
  <li><a href="{$freo.core.http_file}/page/{$plugin_page_menu.id}">{$plugin_page_menu.title}</a></li>
  <!--{/foreach}-->
</ul>

から、

<h1>コンテンツ</h1>
<ul class="menu">
  <!--{foreach from=$plugin_page_menus|smarty:nodefaults item='plugin_page_menu'}-->
  <li><a href="{$freo.core.http_file}/page/{$plugin_page_menu.id}">{$plugin_page_menu.title}</a></li>
  <!--{/foreach}-->
  <li><a href="{$freo.core.http_file}/entry_gallery">ギャラリー</a></li>
</ul>

に変更（赤字を追加）しました。