共通部分 header

追加する個所
1. CSSも担当する場合
2. CSSを担当しない場合
編集する個所
削除する箇所
OKな変更例
NGな変更例
header.html テンプレートファイルの中身

 ルートディレクトリー
└ templates
 - └ header.html--------：今回の対象ファイル

追加する個所

サイトによって固有のデザインや情報を再現するときは、適宜判断をしながらタグを追加する必要があります。代表的な例で、以下のような電話番号の追加などがあります。

HTML担当者の作業範囲	作業内容
1. CSSも担当する場合	スマホサイトのことも考慮をして、コーディング。また、過去の弊社の製作事例も見ながらコーディング。
2. CSSを担当しない場合	情報がHTML上に表示してあればOKです。

CSSも担当する場合

style.css のことなども考慮をしながらコーディングをしてください。やり方については特段してはありませんが、冗長な記述などを避けて完結なHTMLコーディングを心がけてください。

CSSを担当しない場合

以下を参考にして、電話番号や追加情報のタグを記載してください。ひとまず、情報が記載してあればOKです。あとは、CSS担当者が適宜調整します。また、CSSの背景画像などで処理されるかもしれないアイコンなどは、img srcタグを使用して、画像を表示させておいてください。

<header>
    <div class="header-container">
        <div class="logo"><a href="{$freo.core.http_url}"><img src="{$freo.core.http_url}images/common/logo.svg" alt="スタジオコンチーゴ株式会社"></a><span>WEBサイトガイドライン<br>レギュレーションサイト</span></div>
        <form action="{$freo.core.http_url}search" method="get">
            <input type="text" name="word" value="{$smarty.get.word}" placeholder="キーワード検索">
            <input type="submit" value="">
        </form>
        <div class="header-sp">
            <p class="header-sp-search">検索</p>
            <div class="hamburger">
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
    </div>
    <nav class="megamenu">
        {include file='plugins/page_all/megamenu.html'}
    </nav> 
</header>

↓以下のように追記をしてください。（39行目～46行目が追記した部分）

<header>
    <div class="header-container">
        <div class="logo"><a href="{$freo.core.http_url}"><img src="{$freo.core.http_url}images/common/logo.svg" alt="スタジオコンチーゴ株式会社"></a><span>WEBサイトガイドライン<br>レギュレーションサイト</span></div>
        <ul>
            <li><span>本社</span>〒354-0024 埼玉県富士見市鶴瀬東2-14-3</li>
            <li><span>朝霞支店</span>〒351-0025 埼玉県朝霞市三原2-16-1-413</li>
        </ul>
        <ul>
            <li><img src="/images/icons/tel.png" alt="電話"></li>
            <li>電話相談窓口 平日9:00-17:00</li>
            <li>048-472-1417
        </ul>
        <form action="{$freo.core.http_url}search" method="get">
            <input type="text" name="word" value="{$smarty.get.word}" placeholder="キーワード検索">
            <input type="submit" value="">
        </form>
        <div class="header-sp">
            <p class="header-sp-search">検索</p>
            <div class="hamburger">
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
    </div>
    <nav class="megamenu">
        {include file='plugins/page_all/megamenu.html'}
    </nav> 
</header>

編集する個所

サイトによって書き替える箇所を最低限になるようにテンプレートを整えているので、変更箇所は極めて少ない作業で済みます。

meta keywords

9行目あたりのmeta keywordsを変更してください。内部ページのmeta keywordsはページごとのオプションで変更をすることができますが、ここで変更するmeta keywordsはトップページに反映されます。

キーワード → 企業名に変更してください。

<meta name="keywords" content="{if $page_associate.option.keyword}{$page_associate.option.keyword}{elseif $entry_associate.option.keyword}{$entry_associate.option.keyword}{else}キーワード{/if}">

ロゴの横のタグライン

44行目あたりにロゴの横に入るタグラインの記述があります。必要に応じて変更してください。デザイン上、タグラインが不要な場合は削除してください。

<span>WEBサイトガイドライン<br>レギュレーションサイト</span> //不要な場合はこの行ごと削除

↓

<span>サービス名称1行目<br>サービス名称2行目</span>

ロゴのalt

44行目あたりにロゴのaltを変更してください。

<img src="{$freo.core.http_url}images/common/logo.svg" alt="スタジオコンチーゴ株式会社">

↓

<img src="{$freo.core.http_url}images/common/logo.svg" alt="企業名">

削除する箇所

以下の項目はレギュレーションサイトで使用してある記述ですが、場合によっては不要になることがあります。以下に従って判断をしながら削除してください。

code prettify

34行目あたり～36行目あたりの条件文は、code prettifyを使用する際に必要な記述です。残す指示がない場合は、削除してください。

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

date picker

37行目あたり～39行目あたりの条件文は、datepickerを使用する際に必要な記述です。残す指示がない場合は、削除してください。

<!--{if $page.id == 'javascript/datepicker'}-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.min.css">
<!--{/if}-->

検索

サイト内検索を利用しない場合は、45行目あたり～48行目あたりと、50行目あたりの以下の記述を削除してください。

<form action="{$freo.core.http_url}search" method="get">
    <input type="text" name="word" value="{$smarty.get.word}" placeholder="キーワード検索">
    <input type="submit" value="">
</form>

<p class="header-sp-search">検索</p>

OKな変更例

font awesomeで利用するフォントを変更。
ロゴ画像のalt要素を変更。
メガメニューの採用をやめたいので、<nav>部分のコーディングを抜本的に見直し。（レスポンシブでの対応が必須になります）
追加のcssを読み込む必要があるので、smart.css の後にcssファイルを読み込み。

NGな変更例

canonical の表記に変数を、固定値に変更。
トップページのdescriptionを変更したいので、変数を固定値に変更。
スタイルシートのファイル名 style.css を別のものに変更。
<nav class="megamenu">のクラス名を変更。
<div id="wrapper">を削除したり、ID名を変更。
追加の.jsファイルを読み込む（基本はfooter.html で読み込むため）。

header.html テンプレートファイルの中身

以下が2021年10月31日時点の /templates/header.html ファイルの記載内容です。テンプレートファイルは都度更新されるので、最新のものを利用するようにしてください。このファイルを編集する際は、構成を大幅に変更することなく、デザインの変更はスタイルシート（CSS）で行ってください。

<!DOCTYPE html>
<html lang="ja" prefix="og: http://ogp.me/ns#">
<head>
<meta charset="utf-8">
<title>{if $page_associate.option.title}{$page_associate.option.title}{elseif $entry_associate.option.title}{$entry_associate.option.title}{elseif $entry.title}{$entry.title}{elseif $page.title}{$page.title}{elseif $plugin_form.id}{$plugin_form.name}{else}{$freo.config.basis.title}{/if}</title>
<link rel="canonical" href="{$freo.core.http_url}{if $smarty.request.freo.mode == 'default'}{elseif $entry.title}view/{$entry.id}{elseif $page.title}{$page.id}{/if}">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,user-scalable=yes">
<meta name="description" content="{if $page_associate.option.description}{$page_associate.option.description}{elseif $entry_associate.option.description}{$entry_associate.option.description}{elseif $entry_text.excerpt}{$entry_text.excerpt|smarty:nodefaults|strip_tags|mb_truncate:120:'...'|escape}{elseif $page_text.excerpt}{$page_text.excerpt|smarty:nodefaults|strip_tags|mb_truncate:120:'...'|escape}{else}{$freo.config.basis.description}{/if}">
<meta name="keywords" content="{if $page_associate.option.keyword}{$page_associate.option.keyword}{elseif $entry_associate.option.keyword}{$entry_associate.option.keyword}{else}キーワード{/if}">
<link rel="icon" href="{$freo.core.http_url}images/common/favicon.ico">
<meta property="og:url" content="{$freo.core.http_url}{if $smarty.request.freo.mode == 'default'}{elseif $entry.title}view/{$entry.id}{elseif $page.title}{$page.id}{/if}">
<meta property="og:type" content="{if $smarty.request.freo.mode == 'default'}website{else}article{/if}">
<meta property="og:title" content="{if $page_associate.option.title}{$page_associate.option.title}{elseif $entry_associate.option.title}{$entry_associate.option.title}{elseif $entry.title}{$entry.title}{elseif $page.title}{$page.title}{elseif $plugin_form.id}{$plugin_form.name}{else}{$freo.config.basis.title}{/if}">
<meta property="og:description" content=" {if $page_associate.option.description}{$page_associate.option.description}{elseif $entry_associate.option.description}{$entry_associate.option.description}{elseif $entry_text.excerpt}{$entry_text.excerpt|smarty:nodefaults|strip_tags|mb_truncate:90:'...'|escape}{elseif $page_text.excerpt}{$page_text.excerpt|smarty:nodefaults|strip_tags|mb_truncate:90:'...'|escape}{else}{$freo.config.basis.description}{/if}">
<meta property="og:site_name" content="{$freo.config.basis.title}">
<meta property="og:image" content="{if $page.id and $page.file}{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}page_files/{$page.id}/{$page.file}{elseif $entry.id}{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}entry_files/{$entry.id}/{$entry.file}{else}{$freo.core.http_url}images/header/ogp.jpg{/if}">
<meta name="twitter:card" content="summary">
<link rel="alternate" href="{$freo.core.http_file}/feed" type="application/rss+xml" title="RSS">
<link rel="stylesheet" href="{$freo.core.http_url}css/reset.css">
<link rel="stylesheet" href="{$freo.core.http_url}css/style.css">
<link rel="stylesheet" href="{$freo.core.http_url}css/pc.css">
<link rel="stylesheet" href="{$freo.core.http_url}css/tablet.css">
<link rel="stylesheet" href="{$freo.core.http_url}css/smart.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap" rel="stylesheet">
<script src="{$freo.core.http_url}js/jquery.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
<link rel="stylesheet" href="{$freo.core.http_url}css/colorbox.css">
<link rel="stylesheet" href="https://unpkg.com/scroll-hint@1.1.10/css/scroll-hint.css">
<!--{if $plugin_form.id}-->
<link rel="stylesheet" href="{$freo.core.http_url}css/jquery.subwindow.css">
<link rel="stylesheet" href="{$freo.core.http_url}css/validationEngine.jquery.css">
<!--{/if}-->
<!--{if mb_strpos($page.id, regulation) === 0 or mb_strpos($page.id, javascript) === 0 or mb_strpos($page.id, coding) === 0}-->
<link rel="stylesheet" href="{$freo.core.http_url}css/code-prettify.css">
<!--{/if}-->
<!--{if $page.id == 'javascript/datepicker'}-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.min.css">
<!--{/if}-->
</head>
<body>
<header>
    <div class="header-container">
        <p><a href="{$freo.core.http_url}"><img src="{$freo.core.http_url}images/common/logo.svg" alt="スタジオコンチーゴ株式会社"></a><span>WEBサイトガイドライン<br>レギュレーションサイト</span></p>
        <form action="{$freo.core.http_url}search" method="get">
            <input type="text" name="word" value="{$smarty.get.word}" placeholder="キーワード検索">
            <input type="submit" value="">
        </form>
        <div class="header-sp">
            <p class="header-sp-search">検索</p>
            <div class="hamburger">
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
    </div>
    <nav class="megamenu">
        {include file='plugins/page_all/megamenu.html'}
    </nav>    
</header>
<div id="wrapper">