freoテンプレート No.009

freoテンプレート No.009
freoテンプレート No.009
freoテンプレート No.009
freoテンプレート No.009
最新版 2017年5月15日 - Ver 1.2.0
公開日 2016年4月13日
対応バージョン freo Ver 1.19.3
対応プラグイン エントリータグクラウド表示プラグイン Ver 1.1.0
メール送信プラグイン Ver 1.0.1
関連エントリー表示プラグイン Ver 1.3.0
ページ移動表示調整プラグイン ver.1.3.0
対応ブラウザ IE 11+, Edge, Chrome, Firefox, Safari
レスポンシブ
ライセンス GPL
概要 カテゴリ一覧やカレンダーを省いたシンプルなデザインです。

更新履歴

主な変更点

  • メニューなどの動作を変更しました。
  • ギャラリーの表示方法を変更しました。
  • 共有リンクにはてなブックマークを追加しました。
  • 関連エントリー表示プラグインに対応しました。
  • OGPに対応しました。
  • その他細かな不具合等の修正をしました。

変更されたファイル

  • fonts/Vegur-Light.woff 以外すべてアップデートしてください。

既知の不具合(っぽいもの)

  • IEやEdgeで折りたたんだメニューを開くときの動作が他のブラウザと異なる。
  • iPhone(Safari)を横向きにして検索ボックスを開くと入力フォームがずれる。

主な変更点

  • エントリータグクラウド表示プラグインに対応しました。
  • ページ移動表示調整プラグインに対応しました。
  • 圧縮したCSSファイル(css/XXX.min.css)を同梱しました。(使うときは templates/header.html を書き換えてネ。)
  • FontAwesomeファイルを同梱しました。
  • フッターに過去ログ、新着記事へのリンクを表示しました。
  • 共有ボタンのリンク(Facebook、Twitter等)を修正しました。
  • メニューを開く動作のパフォーマンスを改善しました。
  • Javascriptがオフでもメニューが開くようにしました。
  • メニューボタン、ギャラリー、検索フォーム等の動作を変更しました。
  • inputタグの表示を調整しました。
  • その他細かな不具合等の修正をしました。

変更されたファイル

すべてのファイルをアップデートしてください。

カスタマイズ

全体的な設定を簡単に変更できるよう「css/settings.css」を同梱しました。利用する場合は、templates/header.html 23行目付近のコメントアウトを外します。

このファイルでは、「フォント・フォントサイズ・背景色・カラムの横幅・ギャラリーのカラム数・ハンバーガーアイコンの太さ」の変更が可能です。

プラグインの導入は任意ですが、ページ移動表示調整プラグイン龍の棲む場所) を導入するとデモのような表示になります。

デフォルトのOGPの画像はバルーン(images/ogp.jpg)です。サイトに合わせて適当に変更してください。記事に添付画像がある場合は、その画像が表示されます。

ナビメニューのアニメーション

検索ボックスを表示する動作は、メニュー5つが(•̀ᴗ•́)و ̑̑ぐっ

パスワード認証プラグイン導入時のテンプレート編集例です。

基本のテンプレート編集例

templates/plugins/password/default.html

{include file='header.html'}
	<div id="content-single">
		<div id="minimal">
			<h2><i class="fa fa-key" aria-hidden="true"></i><span class="sr-only">パスワード認証</span></h2>
			<div class="alert message">コンテンツを閲覧するためには、パスワードを入力してください。</div>
			<!--{if $errors}-->
			<ul class="alert attention">
				<!--{foreach from=$errors|smarty:nodefaults item='error'}-->
				<li>{$error}</li>
				<!--{/foreach}-->
			</ul>
			<!--{/if}-->
			<form action="{$freo.core.http_file}/password" method="post">
				<fieldset>
					<legend>認証フォーム</legend>
					<div class="input-text"><input type="password" name="plugin[password][password]" size="30" value="{$smarty.post.plugin.password.password}"></div>
					<div class="input-text"><input type="submit" value="認証する"></div>
					<div class="rememberme"><input type="checkbox" name="plugin[password][session]" class="radio-box" id="label_session" value="keep"><label for="label_session" class="radio-button">ログイン状態を記憶する</label></div>
				</fieldset>
			</form>
		</div>
	</div>
{include file='footer.html'}

パスワード画面ではメニューを非表示

templates/header.html」 69行目、110行目付近に太字のコードを追加します。

<!--{if $smarty.request.freo.mode != 'password'}-->
	<div id="nav">
		~略~
	</div>
<!--{/if}-->
</div>

<!--{if $smarty.request.freo.mode != 'entry_gallery'}-->
<div id="container">

パスワード画面では一部メニューを非表示

templates/header.html」 84~96行目付近に太字のコードを追加します。

<ul id="menu-main" class="inline">
<!--{if $smarty.request.freo.mode != 'password'}-->
	<li class="menu-link<!--{if $smarty.request.freo.mode == 'entry_gallery'}--> current<!--{/if}-->"><a href="{$freo.core.https_file}/entry_gallery">ギャラリー</a></li>
	<li class="menu-link<!--{if $smarty.request.freo.mode == 'page'}--> current<!--{/if}-->"><a href="{$freo.core.https_file}/page">ページ</a></li>
	<!--{if $freo.user.authority != 'root' and $freo.user.authority != 'author' and ($freo.config.entry.filter or $freo.config.page.filter or $freo.config.media.filter)}-->
	<li class="menu-link<!--{if $smarty.request.freo.mode == 'filter'}--> current<!--{/if}-->"><a href="{$freo.core.https_file}/filter">フィルター</a></li>
	<!--{/if}-->
	<!--{if $freo.plugin.contact}-->
	<li class="menu-link<!--{if $smarty.request.freo.mode == 'contact'}--> current<!--{/if}-->"><a href="{$freo.core.https_file}/contact">メール</a></li>
	<!--{/if}-->
	<li class="menu-link<!--{if $freo.user.authority == 'root' or $freo.user.authority == 'guest'}--> signed-in-user<!--{/if}--><!--{if $smarty.request.freo.mode == 'login'}--> current<!--{elseif $smarty.request.freo.mode == 'user'}--> current-user<!--{/if}-->"><a href="{$freo.core.https_file}/login"><!--{if $freo.user.authority == 'root'}--><span class="user-online"><i class="fa fa-id-card" aria-hidden="true"></i> 管理者</span><!--{elseif $freo.user.authority == 'guest'}--><span class="user-online"><i class="fa fa-id-card" aria-hidden="true"></i> ゲスト</span><!--{else}-->ログイン<!--{/if}--></a></li>
<!--{else}-->
	<li class="menu-link"><a href="XXXX">表示するリンク</a></li>
<!--{/if}-->
	<li id="menu-close"><a href="#" id="menu-close-link-2"><span class="menu-button-label">メニューを閉じる</span></a><label for="menu-toggle-st" id="menu-close-button" aria-hidden="true"><span class="close-button-left"></span><span class="close-button-right"></span></label></li>
</ul>
<!--{if $smarty.request.freo.mode != 'password'}-->
<div id="show-searchbox"><a id="show-searchbox-button" href="{$freo.core.http_file}/entry?search=on"><i class="fa fa-search" aria-hidden="true"></i><span class="sr-only">記事を検索する</span></a></div>
<!--{/if}-->

freoでサイト全体を管理するを参考にしたテンプレート編集例です。

  1. templates/internals/default」ディレクトリをコピーし「entry」にリネームします。
  2. templates/internals/default/default.html」 92行目~215行目を削除し、太字のコードを追加します。
       <div class="entry">
        <div class="content">
         <h2>最近のエントリー</h2>
         <ul>
          <!--{foreach from=$entries|smarty:nodefaults item='entry'}-->
          <li><span class="alphanumeric">{$entry.datetime|date_format:'%Y/%m/%d %H:%M'}</span> ... <a href="{$freo.core.http_file}/view/{if $entry.code}{$entry.code}{else}{$entry.id}{/if}">{$entry.title}</a></li>
          <!--{/foreach}-->
         </ul>
         <ul>
          <li><a href="{$freo.core.http_file}/entry">エントリー一覧</a></li>
         </ul>
        </div>
       </div>
    <!-- 最近のエントリーが不要であれば以下のdivのみ追加します。 -->
      </div>
     </div>
    {include file='footer.html'}
  3. エントリー一覧にインフォメーションを表示しない場合は、「templates/internals/entry/default.html」 21行目~91行目を削除します。
  4. メニューにエントリー一覧のリンクを追加するには、「templates/header.html」の84行目付近に以下のコードを追加します。
    <li class="menu-link<!--{if $smarty.request.freo.mode == 'entry'}--> current<!--{/if}-->"><a href="{$freo.core.https_file}/entry">エントリー</a></li>