「すぐ使えるCMS」のデザインカスタマイズで、日付の表示や入力が不要な場合に削除する設定方法を説明します。
記事ページからの日付の削除方法
概要
記事ページに対応するテンプレートファイルから、日付を表すテンプレート変数を削除して下さい。
テンプレート変数「%_yyyy_%」「%_mm_%」「%_dd_%」を削除すると、それぞれ「年」「月」「日」の表示が削除されます。
Ver. 4.4 以上では「%_dayname_%」が曜日に対応します。英語版の場合は、「%_mon_%」と「%_month_%」が月名表示に対応します。
編集対象ファイル
下記のテンプレートファイルから、日付用のテンプレート変数(および周辺のコード)を削除して下さい。
- 詳細ページ templates/article/article.html
- 全一覧(目次) templates/article/article_list.txt
- 短い一覧(新着情報) templates/article/short_list.txt
編集例
例えば、詳細ページから日付情報を削除するには、下記青字(取り消し線)部分を削除します。初期設定のHTMLコードはダウンロードした製品によって異なりますので、お手元のテンプレートに含まれているコードを「%_yyyy_%」「%_mm_%」「%_dd_%」などのテンプレート変数を目印に探して下さい。
:(省略)
<body>
<div class="pure-g sugu-window">
<div class="pure-u-1 sugu-container">
<!-- ページリンク -->
<ul class="sugu-pager">
<li class="sugu-previous"><a href="%_to_prev_%" tabindex="-1">前</a></li>
<li class="sugu-next"><a href="%_to_next_%" tabindex="-1">次</a></li>
</ul>
<div class="sugu-clearfix-old-ie"></div>
<h1>%_subject_%</h1>
<p class="sugu-pull-right">%_yyyy_%/%_mm_%/%_dd_% (%_dayname_%)</p>
<div class="sugu-clearfix"></div>
<div class="pure-g sugu-article">
:(省略)
アップロード
編集後のテンプレートファイルをサーバの同じ位置に上書きアップロードして下さい。
テンプレート変更の反映
管理画面一覧の「再構築(テンプレート変更反映)」ボタンを押して下さい。
確認
ブラウザの表示を再読み込みして確認して下さい。変更が反映されない場合、ブラウザのキャッシュをクリアしてから再度読み込みをしてみて下さい。
管理画面からの日付の削除方法
日付は必須入力ですので、入力画面テンプレートから単純に削除してしまうと、記事の登録そのものができなくなります。入力欄を消したい場合は以下のように設定して下さい。
1. 入力画面から日付を削除
入力画面に表示される入力フィールドを隠しフィールドに変更します。templates/admin/2.html を以下のように変更して下さい。入力欄として表示されていた青字(取り消し線)部分を削除し、代わりに隠し項目を追加します(赤字部分)。
なお、初期設定のテンプレートは下記と異なる場合がありますので、手元のテンプレート内で同様の部分を探して編集して下さい。
: (省略)
<form class="pure-form" action="%_myname_%" method="post" enctype="multipart/form-data" id="mainform">
: (省略)(隠し項目が並んでいる)
<input type="hidden" name="tempdir" value="%_tempdir_%">
<input type="hidden" name="file_order" value="%_file_order_%">
<input name="yyyy" type="hidden" value="%_yyyy_%">
<input name="mm" type="hidden" value="%_mm_%">
<input name="dd" type="hidden" value="%_dd_%">
: (省略)
<!-- 日付 -->
<div class="pure-g sugu-control-group">
<label class="pure-u pure-u-1 pure-u-sm-1 pure-u-md-1-3 pure-u-lg-1-4 pure-u-xl-1-5 sugu-label sugu-label-right" for="yyyy">日付 <span class="sugu-required">(必須)</span></label>
<div class="pure-u pure-u-1 pure-u-sm-1 pure-u-md-2-3 pure-u-lg-3-4 pure-u-xl-3-5">
<input type="text" name="yyyy" id="yyyy" value="%_yyyy_%" maxlength="4" class="imeon sugu-input-small">年
<input type="text" name="mm" id="mm" value="%_mm_%" maxlength="2" class="noime sugu-input-mini">月
<input type="text" name="dd" id="dd" value="%_dd_%" maxlength="2" class="noime sugu-input-mini">日
<div class="pure-form-message-inline">(半角。年は西暦 4 桁。)</div>
</div>
</div>
: (省略)
2. 確認画面から日付を削除
確認画面での日付表示も不要になるので、表示を削除します。templates/admin/3.html 内で下記例に該当する部分を削除して下さい。
なお、初期設定のテンプレートは下記と異なる場合がありますので、手元のテンプレート内で同様の部分を探して編集して下さい。
<!-- 日付 -->
<div class="pure-g sugu-control-group">
<label class="pure-u pure-u-1 pure-u-sm-1 pure-u-md-1-3 pure-u-lg-1-4 pure-u-xl-1-5 sugu-label sugu-label-right">日付</label>
<div class="pure-u pure-u-1 pure-u-sm-1 pure-u-md-2-3 pure-u-lg-3-4 pure-u-xl-3-5">
<span id="sugu-t-date">%_yyyy_html_%
年
%_mm_html_%
月
%_dd_html_%
日
(%_dayname_html_%)</span>
</div>
</div>
3. 管理用一覧から日付を削除
管理画面の一覧上の日付の表示を削除するには、templates/admin/1.html と templates/admin/1.txt を変更します。変更の要点は一覧表内の日付欄を削除する事ですが、バージョンによっては、レスポンシブWeb対応のために日付が2か所(PC用とモバイル用)に書き出されている場合もあるので、「%_yyyy_%」等のテンプレート変数を目印に、ファイル内の該当ヶ所を探して下さい。
1.html 編集例
下記は Ver. 5.0 の templates/admin/1.html の編集例です。表の見出し内の日付列(青字部分)を削除して下さい。
<thead class="sugu-hidden-phone sugu-table-header">
<tr>
<th>日付</th>
<th class="sugu-keep-width">タイトル</th>
<th class="sugu-text-center">編集</th>
<th class="sugu-text-center">削除</th>
<th colspan="2" class="sugu-text-center">順番</th>
<th class="sugu-text-center sugu-nowrap">チェック</th>
</tr>
</thead>
1.txt 編集例
下記は Ver. 5.0 の templates/admin/1.txt の編集例です。青字部分を削除して下さい。
また、管理画面の一覧表がレスポンシブWeb対応している場合は、日付列が無くなる分の列数(colspan)の調整が必要です。下記赤字部分は、元の数から1引いて下さい。下記例は、既に引いてあります。
このファイルのコードも、バージョンによって異なる場合があり、レスポンシブWeb対応していない場合は、削除だけでOKです。
<tr class="sugu-hidden-phone">
<td><span class="sugu-nowrap">%_yyyy_%/%_mm_%/%_dd_%</span></td>
<td class="sugu-keep-width sugu-t-subject">%_subject_%</td>
<td class="sugu-t-edit">
<button type="submit" class="pure-button pure-button-primary sugu-button-small" onclick="set_param(%_d_%,1,2,%_n_%)">編集</button>
</td>
<td class="sugu-t-delete">
<button type="submit" class="pure-button sugu-button-danger sugu-button-small" onclick="set_param(%_d_%,2,3,%_n_%)">削除</button>
</td>
<td class="sugu-t-up">
<button type="submit" class="pure-button sugu-button-small" onclick="set_param(%_d_%,3,4,%_n_%)">上へ</button>
</td>
<td class="sugu-t-down">
<button type="submit" class="pure-button sugu-button-small" onclick="set_param(%_d_%,4,4,%_n_%)">下へ</button>
</td>
<td class="sugu-t-check"><a href="%_relative_web_dir_%%_to_article_%" target="check"
title="%_article_filename_parsed_%">チェック</a></td>
</tr>
<tr class="sugu-visible-phone">
<td colspan="6">%_subject_%
<a href="%_relative_web_dir_%%_to_article_%" target="check" class="sugu-pull-right">チェック</a></td>
</tr>
<tr class="sugu-visible-phone sugu-phone-last">
<td colspan="2"><span class="sugu-nowrap">%_mm_%/%_dd_%</span></td>
<td>
<button type="submit" class="pure-button pure-button-primary sugu-button-small" onclick="set_param(%_d_%,1,2,%_n_%)">編<span class="sugu-hidden-tiny">集</span></button>
</td>
<td>
<button type="submit" class="pure-button sugu-button-danger sugu-button-small" onclick="set_param(%_d_%,2,3,%_n_%)">削<span class="sugu-hidden-tiny">除</span></button>
</td>
<td>
<button type="submit" class="pure-button sugu-button-small" onclick="set_param(%_d_%,3,4,%_n_%)">上<span class="sugu-hidden-tiny">へ</span></button>
</td>
<td>
<button type="submit" class="pure-button sugu-button-small" onclick="set_param(%_d_%,4,4,%_n_%)">下<span class="sugu-hidden-tiny">へ</span></button>
</td>
</tr>
4.アップロード
編集したテンプレートファイルをサーバ上の同じ位置にアップロードして下さい。
5.確認
管理画面にアクセスして、日付入力が無くなったことを確認して下さい。また、一覧ページを狭いウィンドウ幅で表示して、スマホ用の表示にも問題が無い事を確認して下さい。