共通部分 header

 ルートディレクトリー
└ 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 で読み込むため)。
  • {include file='plugins/page_all/megamenu.html'}の部分を消して、手打ちをしてコーディング。