エントリー

freoのスマホ用テンプレートをカスタマイズ

jQuery MobileでカスタマイズしたiPhone版テンプレートを公開 しましたのでこちらの配布は終了させていただきます(2013/2/24)

freoのスマホ用テンプレートですが、表示がいまいちみたいなので(ないとさんm(_ _)m)、もうチョツト使い易くカスタマイズすることにしてみました(実機持ってないのに)。ところがやりだすと奥が深いのかけっこう変更箇所が増えて大変なことに...(^_^;
※詳細に動作確認してませんのでその点ご了承下さい。
プラグインのテンプレートの配布も終了しました。

※修正については こちら をご覧ください。

【主な変更箇所】

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

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

freo_iphone
 ┃
 ┣ css
 ┃ ┗ iphonecommon.css
 ┃
 ┣ imageslist_mark.png
 ┃
 ┗ templates
     ┃
     ┗ iphonesutility_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>

に変更(赤字を追加)しました。

ページ移動

関連エントリー

コメント

yato

スマホ向けに使わせていただきました。
page用のdefault.htmlを上書きしましたところ、表示が

Fatal error: Smarty error: [in iphones/internals/page/default.html line 71]: [plugin] modifier 'recently' is not implemented (core.load_plugins.php, line 118) in /home/users/1/freopass/libs/smarty/Smarty.class.php on line 1093

といったエラーがでます。
オリジナルのpage/default.html(ダウンロードしてきたばかりのもの/手を一切加えていないもの) をアップしなおすとエラーがでないで表示されるので、こちらのpage/default.html で出ているのだと思いますが…。

エラーがでないようにするためにはどうすればよろしいでしょうか?

  • 2012/06/23 16:59:00

ccc

すみませんm(__)m
page/default.htmlにNEWマークが表示されるようにしていたのを消し忘れていたみたいです。
恐れ入りますがpage/default.htmlの71行目にある

<!--{if $plugin_page_child.datetime|recently:7:'day'}-->&nbsp;<em class="new">New!</em><!--{/if}-->

を削除してください。
配布用は早急に差し替えます。
もっともそのままにしてfreoの新着マーク表示プラグイン(Smarty用)を入れていただいてもいいですが...

  • 2012/06/23 18:22:00

yato

早急のご返答ありがとうございます。
recently freo で検索をかけてみてはいたのですが、smartyのプラグインは関係ないのかなと自己判断してしまってました(汗)。

すごくありがたいテンプレートです。使わせていただきます。

  • 2012/06/23 19:45:00

mana

Twitterボタンを入れると、下に大きな空白ができます。

テンプレートに何か問題があるでしょうか?

  • 2013/01/23 02:43:00

ccc

お返事が遅くなって申し訳ありません。
templates/iphones/internals/view/default.htmlの
<div class="content">の下に

<p><a href="https://twitter.com/share" class="twitter-share-button" data-via="Twitterのアカウント名" data-lang="ja">ツイート</a>
{literal}<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>{/literal}</p>

って入れてみましたが、そんなに大きな空白じゃないみたいです。
http://cccabinet.jpn.org/freo/index.php/view/14
(↑iPhoneでご覧ください)

入れる場所によって目立つとかあるんでしょうか?

  • 2013/01/26 21:53:00

コメント登録

  • コメントを入力してください。
  • 一旦登録したコメントは、あとで編集できませんのでご注意下さい。
登録フォーム

基本的には「全体に公開」されますが、内容によっては管理人の方で公開を制限する場合がありますので、その旨ご了承下さい。

ユーティリティ

2024年03月

- - - - - 1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31 - - - - - -

キーワード検索

キーワード検索フォーム

ユーザー

  • cccのアバター

新着画像

ブログパーツ

Twitter

Twilogを見る

Feed