エントリー

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 部分
    ファイル 75-1.jpg
    dl 部分
    ファイル 75-2.jpg
    カテゴリー部分
    ファイル 75-3.jpg

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

       ul.mobile-button li .counts {
        float: right;
      }
    を追加して下さい。
  4. タグクラウドの場合は、3.のレスポンシブの追加部分に
       ul.tagcloud li a {
        padding: 10px;
        line-height: 1.4;
      }
    を追加すると、以下のようになります。
    ファイル 75-4.jpg

ページ移動

関連エントリー

コメント

  • コメントはまだありません。

コメント登録

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

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

ユーティリティ

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