ユーティリティ

2017年12月

- - - - - 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

エントリー

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

ページ移動

関連エントリー

コメント

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

コメント登録

  • コメントを入力してください。
  • 一旦登録したコメントは、あとで編集できませんのでご注意下さい。
登録フォーム
名前
メールアドレス
URL
コメント(コメント本文の装飾について
閲覧制限
※基本的には「全体に公開」されますが、内容によっては管理人の方で公開を制限する場合がございますので、その旨ご了承下さい。
freoをカタカナ3文字で入力してください(スパム対策)