内部ページレギュレーション

クライアントごとのレギュレーションページに作成手順を説明します。まずは、なぜレギュレーションページを作るのかを理解するために、以下の動画をご確認ください。

SQLファイルのインポート

freo.page.sql
freo.options.sql
freo.option_sets.sql

社内ファイルダウンロード

regulation.htmlを複製してアップロード

L:\htdocs\s-contigo.website\templates\page\regulation.html をコピー
制作中のサイトの同じディレクトリー内にファイルを複製
ファイルをサーバーにアップロード

robots.txtの編集

robots.txt に Disallow:/regulation を追記

サイトマップの除外設定

.com/admin/config?exec=update&type=plugin&file=sitemap にアクセスして、生成除外ページに regulation を追加

pageテンプレートファイルを編集

/templates/internals/page/default.html の26行目辺りを編集して、レギュレーションページの下層ページでも、該当ファイルを読み込むようにする。

<!--{if $page.restriction == 'password' and !$smarty.session.security.page[$page.id] and $freo.user.authority != 'root' and $freo.user.authority != 'author'}-->
<form action="{$freo.core.http_file}/view/{if $page.code}{$page.code}{else}{$page.id}{/if}" method="post" class="pwd">
    <input type="text" name="page[password]" size="30" value="" placeholder="パスワード"><input type="submit" value="認証する">
</form>
<!--{elseif file_exists("templates/page/$include_file")}-->

↓

<!--{if mb_strpos($page.id, 'regulation') === 0}-->
{include file=page/regulation.html}
<!--{elseif $page.restriction == 'password' and !$smarty.session.security.page[$page.id] and $freo.user.authority != 'root' and $freo.user.authority != 'author'}-->
<form action="{$freo.core.http_file}/view/{if $page.code}{$page.code}{else}{$page.id}{/if}" method="post" class="pwd">
    <input type="text" name="page[password]" size="30" value="" placeholder="パスワード"><input type="submit" value="認証する">
</form>

header.htmlを編集

code-prettifyを有効にするため、/templates/header.html の</head>の直前に以下を追加

<!--{if mb_strpos($page.id, 'regulation') === 0}-->
<link rel="stylesheet" href="{$freo.core.http_url}css/code-prettify.css">
<!--{/if}-->

footer.htmlを編集

code-prettifyを有効にするため、/templates/footer.html を以下のように編集する。

</body>
</html>

↓

<!--{if mb_strpos($page.id, 'regulation') === 0}-->
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=sons-of-obsidian"></script>
<script src="{$freo.core.http_url}js/lang-css.js"></script>
<!--{/if}-->
</body>
</html>

cssファイルの編集

共通デザインとして使用するため、以下の4つのファイルを編集してください。

 .com ルートディレクトリー
└ css
　 ├ 1 style.css--------：WEB 1,280px以上
　 ├ 2 pc.css-----------：WEB 1,279px以下、1,025以上
　 ├ 3 tablet.css-------：WEB 1,024以下、601px以上
　 └ 4 smart.css--------：WEB 600px以下

誤ったH2に適用するCSSの編集例

レギュレーションページのHTMLは編集しないでください。例えば、以下のようなHTMLがあったときに、以下のように変更をすることはNGです。該当サイトのベースとなるデザインなので、上記の4つのCSSファイルに既に記載してある内容を書き替えてください。

誤ったHTMLの編集例

HTMLにclassを付与して変更するのはNGです。これは、サイト全体ではなく、レギュレーションページに限ったルールです。

<h2>サブタイトル</h2>
↓
<h2 class="subtitle">サブタイトル</h2>

誤ったCSSの編集例

既に記載をしてあるCSSを上書きする記載方法はNGです。

h2 {
	font-size: 3.0rem;
	padding: 0 0 10px;
	margin: 0 0 3.0rem;
	position: relative;
	border-bottom: 3px solid #eee;
}
↓
h2.subtitle {
	font-size: 4.0rem;
	color:#b84211;
	padding: 0 0 10px;
	margin: 0 0 3.0rem;
	background:#eee;
}

正しいH2に適用するCSSの編集例

レギュレーションページのHTMLは編集せずに、該当するCSS部分だけを編集してください。

正しいHTMLの編集例

<h2>サブタイトル</h2>
↓class名などは付与せずにそのまま
<h2>サブタイトル</h2>

正しいCSSの編集例

既に記載をしてあるCSSを書き直してください。（ここで書くCSSがサイト全体の基本スタイルとなります。）

h2 {
	font-size: 3.0rem;
	padding: 0 0 10px;
	margin: 0 0 3.0rem;
	position: relative;
	border-bottom: 3px solid #eee;
}
↓
h2 {
	font-size: 4.0rem;
	color:#b84211;
	padding: 0 0 10px;
	margin: 0 0 3.0rem;
	background:#eee;
}

内部ページ レギュレーション