freoカスタマイズ集

【2017/06/10修正】ボタンのクラス名を phone-button から mobile-button に変更しました。

freoがVer.1.18.0からiPhone用テンプレートを辞めて簡易なレスポンシブデザインに変更となりましたが、デフォルトテンプレートを使用した場合、スマートフォンからリストのリンクがタッチしづらいので、その時だけリストボタンにするようにアレンジしてみました。
※以下はデフォルトのテンプレートの場合ですので、適宜調整して下さい。

1. templates/utility.html を次のように変更します。
   基本的にはボタン化したい ul と dl の部分に class="mobile-button" を追加します（class名は適宜でOKです）。
   ※サイドバー以外にもページの目次や関連エントリーの表示のような部分でも使えます。
   
   リスト ul の場合は、

   <div class="utility">
     <h3>リンク</h3>
     <div class="content">
       <ul>
         <li><a href="{$freo.core.http_file}/entry_gallery">ギャラリー</a></li>

   とある部分を、

   <div class="utility">
     <h3>リンク</h3>
     <div class="content">
       <ul class="mobile-button">
         <li><a href="{$freo.core.http_file}/entry_gallery">ギャラリー</a></li>

   に変更（赤字を追加）します。
   
   過去ログに適用する場合は、カウント数字がリンクの外側にあるので、次のように修正します。

   <div class="utility">
     <h3>過去ログ</h3>
     <div class="content">
       <ul>
         <!--{foreach from=$plugin_entry_archives|smarty:nodefaults item='plugin_entry_archive'}-->
         <li><a href="{$freo.core.http_file}/entry?date={$plugin_entry_archive.year}{$plugin_entry_archive.month}">{$plugin_entry_archive.year}年{$plugin_entry_archive.month}月</a>({$plugin_entry_archive.count})</li>

   とある部分を、

   <div class="utility">
     <h3>過去ログ</h3>
     <div class="content">
       <ul class="mobile-button">
         <!--{foreach from=$plugin_entry_archives|smarty:nodefaults item='plugin_entry_archive'}-->
         <li><a href="{$freo.core.http_file}/entry?date={$plugin_entry_archive.year}{$plugin_entry_archive.month}">{$plugin_entry_archive.year}年{$plugin_entry_archive.month}月<span class="counts">{$plugin_entry_archive.count}</span></a></li>

   に変更（緑字を削除して赤字を追加）します。
   
   新着エントリーなど dl の場合は、

   <div class="utility">
     <h3>新着エントリー</h3>
     <div class="content">
       <dl>
         <!--{foreach from=$plugin_entry_recentries|smarty:nodefaults item='plugin_entry_recently'}-->

   とある部分を、

   <div class="utility">
     <h3>新着エントリー</h3>
     <div class="content">
       <dl class="mobile-button">
         <!--{foreach from=$plugin_entry_recentries|smarty:nodefaults item='plugin_entry_recently'}-->

   に変更（赤字を追加）します。
2. カテゴリーに適用する場合は、templates/utility_category.html の

   <!--{foreach from=$freo.refer.categories|smarty:nodefaults item='refer_category'}-->
     <!--{if $refer_category.pid == $pid and $refer_category.display == 'publish'}-->
     <!--{php}if (!$flag) :{/php}--><ul><!--{php}endif;{/php}-->
     <li>
       <a href="{$freo.core.http_file}/category/{$refer_category.id}">{$refer_category.name}</a>({$plugin_category_counts[$refer_category.id]|default:0})

   の部分を、

   <!--{foreach from=$freo.refer.categories|smarty:nodefaults item='refer_category'}-->
     <!--{if $refer_category.pid == $pid and $refer_category.display == 'publish'}-->
     <!--{php}if (!$flag) :{/php}--><ul class="mobile-button"><!--{php}endif;{/php}-->
     <li>
       <a href="{$freo.core.http_file}/category/{$refer_category.id}">{$refer_category.name}<span class="counts">{$plugin_category_counts[$refer_category.id]|default:0}</span></a>

   に変更（緑字を削除して赤字を追加）します。
3. css/default.css を次のように変更します。
   個別指定の部分に

   .counts {
     display: inline-block;
     color: #FFFFFF;
     background-color: #AAAAAA;
     padding: 0 5px;
     margin-left: 2px;
     border-radius: 5px;
   }
   ul.mobile-button li ul {
     margin: 0 0 0 1em;
     padding: 2px 0;
   }

   を追加します。
   
   同じくレスポンシブの部分の最後の } の手前に、

      div#utility {
       float: none;
       width: 100%;
       margin: 0;
     }
   ※この部分に追加
   }

   以下を追加します。

      ul.mobile-button {
       padding-left: 0;
       margin: 0 0 10px;
       list-style: none;
     }
     ul.mobile-button:before,
     ul.mobile-button:after {
       display: table;
       content: " ";
     }
     ul.mobile-button:after {
       clear: both;
     }
     ul.mobile-button li {
       position: relative;
       display: block;
       float: none;
       margin-bottom: -2px;
     }
     ul.mobile-button li:first-child a {
       border-top-right-radius: 5px;
       border-top-left-radius: 5px;
     }
     ul.mobile-button li:last-child a {
       margin-bottom: 0;
       border-bottom-right-radius: 5px;
       border-bottom-left-radius: 5px;
     }
     ul.mobile-button li a {
       position: relative;
       display: block;
       border: 1px solid #CCCCCC;
       background-color: #F9F9F9;
       padding: 10px 15px;
       text-decoration: none;
     }
     ul.mobile-button li a:hover,
     ul.mobile-button li a:focus {
       text-decoration: none;
       background-color: #DDDDDD;
     }
     ul.mobile-button li ul.mobile-button li {
       margin-top: -3px;
     }
     dl.mobile-button dt a {
       border: 1px solid #CCCCCC;
       border-radius: 5px;
       background-color: #F9F9F9;
       position: relative;
       display: block;
       padding: 10px 15px;
       text-decoration: none;
     }
     dl.mobile-button dt a:hover,
     dl.mobile-button dt a:focus {
       text-decoration: none;
       background-color: #DDDDDD;
     }
     dl.mobile-button dd {
       margin-left: 5px;
       margin-bottom: 5px;
     }

   【2013/5/21 11:10追記】リンクがないリストを考慮して修正しました。→リンクボタンにならないので元に戻しましたm(__)m

   すると、PCで見た時とスマートフォンで見た時の違いは（左がPC、右がスマートフォン320pxの場合）以下のようになります。
   ul 部分
   
   dl 部分
   
   カテゴリー部分
   

   【2013/5/21 追記】カウント数字部分を右に寄せたい場合は、3.のレスポンシブの追加部分に

      ul.mobile-button li .counts {
       float: right;
     }

   を追加して下さい。
4. タグクラウドの場合は、3.のレスポンシブの追加部分に

      ul.tagcloud li a {
       padding: 10px;
       line-height: 1.4;
     }

   を追加すると、以下のようになります。