共通部分 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'}の部分を消して、手打ちをしてコーディング。