コーディングガイド

仕様メモ

ヘッダー

  • 背景色・文字色変更可能
  • ヘッダー（#headerContents）は、デフォルトはinner01指定ありのコンテンツ幅。divのclassからinner01指定を取れば、幅100％にすることができる（div自体は削除しないこと）
  • オプションは「id="headerNaviArea"」に入れる
  • 位置固定のため、headerの高さを指定する。cssに計算式のコメントあり。#mainVisual＆トップページ以外の#contentと共通の値あり
  • 文字サイズを大きくすると、はみ出ます

ロゴ

  • 「画像の場合」「画像＋テキストの場合」「テキストの場合」の3パターンを用意。
    header_bottom.tplにコメント入りで書いてある。
  • 上下余白は10px。（5pxだと狭く感じたので10pxにしました）Mサイズ以下のグローバルナビの関係でmin-heightが50pxなので、画像の大きさなどによって調整する。
  • ロゴエリアは、Lサイズで幅40％（右にオプションが入る可能性があるため）、Mサイズ以下は幅100％（右メニューの分の70pxは空ける）となっている。
  • ロゴ画像のサイズが大きい場合、max-widthで自動的に縮小するようにしている
  • 上記の理由から、ロゴ画像には、高さは指定しない。
  • 文字色変更可
  • フォントはWebフォントの「Noto Sans Japanese」を使用。
    太さはclassを「noto100～noto900」で調整可能
  • cssの設定で、ヘッダー全体にリンクか、ロゴ部分だけリンクかを指定可能。デフォルトはロゴ部分だけ。
ロゴの文字数について
「画像＋テキストの場合」

画像幅50pxの場合、最小のSSサイズで1行11文字くらい。
何行でも入るが、そのぶんヘッダーの高さが増えるのでバランスが悪くなるかも。
画像のwidthが180px以上の場合は、SSサイズでメニューとかぶってしまうので、テキストを含めた画像にした方が良いかも。

「テキストの場合」

1行の文字数は画面幅で変わるが、最小のSSサイズで1行13文字くらい。
何行でも入るが、そのぶんヘッダーの高さが増えるのでバランスが悪くなるかも。

グローバルナビ

  • グローバルナビ（#globalNavi .navigation）は、デフォルトはinner01指定ありのコンテンツ幅。divのclassからinner01指定を取れば、幅100％にすることができる（div自体は削除しないこと）
  • 推奨最大数　文字が長い場合（14文字くらい？）：6個、文字が短い場合（8文字くらい？）：8個
  • 背景色・文字色・アクティブ・hover時の色も変更可
  • 背景色は、グラデーションも可能（css内にサンプルあり）
  • cssでリンク幅を指定（100÷グローバルナビ数）
    小数点第２位以下を切り捨て
  • Sサイズ以下でメニューを開いている場合はメニュー以外はスクロールしない。
  • アンカーリンクは「NEWS」がサンプル
  • お問い合わせのリンクは、サイトによってsslurlにする必要あり

ローカルナビ

  • 背景色・文字色 変更可
  • 個数制限なし。多くなると改行する
  • テキストの左右・中央寄せ　調整可能
  • 基本的にはアンカーリンクなので、対象の見出しにはidを指定する
  • カテゴリー内のページが2ページ以上になった場合（company/index.php、company/works.php　など）は、ローカルナビ部分を別のtplにしてtemplates/mod内に置き、インクルードする

トップページ

  • #contents内のcontentsAreaType01（snsContents、bannerContents以外）の背景色を交互に設定

メインビジュアル

  • 上下の余白、幅いっぱいの背景色　変更可
  • 使用する画像幅によって、「max-width」を変更する（cmn_layout.css）
    指定しない場合は幅いっぱいに表示される
  • 画面幅に合わせて、画像幅100%で拡大縮小表示。

NEWS

  • 背景色を指定する場合は、「!important」で指定。cssにコメントあり。
    初期は交互の背景が適用される。
  • カテゴリーアイコンは、3種類用意。catNews01～03。追加する場合は、cssを追加。
  • mod/newsContents.tplを読み込む
  • リンクあり、無しテキスト
  • さの最大値指定（Mサイズ以上はcmn_layout.css）（Sサイズ以下はcmn_layout_s.css）

コンテンツ

  • 見出しを幅100%にしたい場合は、.inner01の外に出す必要がある

ページタイトル（#pageTitle）

  • 背景色・文字色 変更可
  • 背景は、グラデーション・画像・画像の上に色をのせるパターンを用意（css内にサンプルあり）
  • テキストの左右・中央寄せ　調整可能
  • 基本的に、inner01を指定する（幅1000px）
    divのclassからinner01指定を取れば、幅100％にすることができる（div自体は削除しないこと）
  • 見出しや文字色は、サイトに合わせて多少調整
  • 余白なしの幅いっぱいにコンテンツを入れたい場合は、.contentsAreaType01の下に直接書く→サンプル入れる？

CONTACT

  • 個人情報保護方針の文章中に、client_name、tel1、fax1、mail1の変数使用
  • ローカルナビはコメントアウトした
  • ボタンの色変更可（1色かグラデーション）

SNSコンテンツ

  • snsContents.tplに共通で記述する
  • 1カラムと2カラムを用意
    tplにコメント入りで書いてある。
  • 各SNSは「display: inline-block;」で横並びになる。
    横並びにしない＆2カラムの場合は、cmn_layout.cssでblockにする
  • Facebookボタンのコード取得；https://developers.facebook.com/docs/plugins/like-button?locale=ja_JP
  • Facebookは、header_bottom.tplにも記述の必要あり
    サンプルで入れているので、不要な場合は削除する
  • Twitterボタンのコード取得；https://about.twitter.com/ja/resources/buttons#tweet

バナー

  • bannerContents.tplに共通で記述する
  • 1行に3つまで画像が並ぶ。Sサイズ以下は1カラムとなる。
  • 画像幅は最大320px
  • 画像は上下左右中央揃え
  • 2つ以下の場合は、パーツサンプル「インデックスページのフォーマット」を参照する

ページトップ

  • 一定位置まで下にスクロールすると表示し、一定位置から上にスクロールすると非表示となる
  • 丸→四角にすることも可能
  • scrollcontrol.jsで、copyrightの位置に表示されるよう設定している

フッター

  • 背景色・文字色を変更可
  • フッターエリア（#footerNavi > div）は、デフォルトはinner01指定ありのコンテンツ幅。divのclassからinner01指定を取れば、幅100％にすることができる（div自体は削除しないこと）
  • フッターメニューとフッター情報び2カラムレイアウトで、幅変更可能。

フッターメニュー

  • 文字色、矢印アイコンの色を変更可
  • 矢印アイコンには、FontAwesomeを使用

フッター情報

  • 背景色・文字色を変更可
  • ロゴが透過画像ではないこともあるので、基本的に背景色を指定する。
  • ロゴ、住所、電話番号、メール、テキスト、SNSリンクを入れることができる。
  • ロゴについては、ヘッダーのロゴ参照（上下余白やmin-heightの指定はなし）
  • 電話番号は、スマホ・タブレット時に自動リンク
  • SNSリンクには、FontAwesomeを使用
  • フッターの背景色内に入り込んだようなレイアウトにしたい場合は、footer #footerNaviに上下paddingを付ける
  • お問い合わせのリンクは、サイトによってsslurlにする必要あり

その他

幅指定について

  • inner01を指定した場合は、Lサイズで最大1080px（コンテンツ1000px、余白が左右に40px）
  • inner01を指定していない場合は、画面幅に合わせて広がる（個別スタイルで、余白が左右に10pxあるものが多い）
  • アナリティクスはanalytics.tplに

使用する色/h4>
  • cmn_layout.cssの上の方に、メインカラー2色・ベースカラー・ボーダーカラーを書くようにした

やることメモ

優先順位：高

  • 下層ページも背景を交互に
  • 編集マニュアル　スタイルシートのセレクタ名も　共有のファイル等に
  • html、cssにコメントを入れるなど、分かりやすく
    https://click.backlog.jp/view/TECH-137#comment-1128368342
  • header_topのファビコン色指定のコメント入れる→済　マニュアルにも
  • モバイルフレンドリーテストの実施　

優先順位：中　検討が必要なものなど

  • headerMenu
  • オプションのメインビジュアル作成用パターン作成
  • ogタグ
    画像はどうするか検討
    →サイトキャプチャ
  • contentsAreaType01に上下padding付ける？
    いろんなパターンを作って、必要そうなら入れる
  • バリデータ
    20151120時点、OK
  • maincontents指定なしでも大丈夫なようにした方が良い？
    20151125時点、直してみたので、トップ作りつつ確認
  • 游ゴシック、見にくいのでやめるかも
    →游ゴシックUIが普及してからにする？
  • オプション機能

優先順位：低

  • パンくずにマイクロデータ入れる？
    https://seopack.jp/seoblog/hideblog_22/
  • メインビジュアル　幅いっぱいのも作る
  • sassにしたい
  • contentsAreaType02は想定外（時間があれば対応）
  • カラムの入れ子　2カラムの中に2カラム（時間があれば）
  • html5構成見直し。ローカルナビはaside？

サイトごとに編集する必要があるスタイル

サイト全体のコンテンツ幅

サイト全体のコンテンツ幅を設定する（cmn_layout.css）

  1. @media print{ 
  2. body{ 
  3. min-width: 960px;
  4. } 
  1. body .inner01{ 
  2. margin: 0 auto;
  3. max-width: 960px;
  4. width: 100%;
  5. } 
  6. .contentsAreaType02 #mainContents{ 
  7. width: 68.75%;/* 660px÷960px×100% */
  8. } 
  9. .contentsAreaType02 #sideContents { 
  10. width: 28.125%;/* 270px÷960px×100% */
  11. } 
  12. #infoContents .info01 { 
  13. width: 25%;/* 240px÷960px×100% */
  14. } 
  15. #infoContents .info02 { 
  16. width: 68.75%;/* 660px÷960px×100% */
  17. }

メインビジュアル

使用する画像幅によって、「max-width」を変更する（cmn_layout.css）

  1. #mainVisual .mainVisualInner{ 
  2. max-width: 1108px;
  3. }

グローバルナビ

ナビ数によって、「width」を変更する（cmn_layout.css）

  1. #globalNavi.globalNaviPt01 .navigation a { 
  2. width: 20%;/* 100÷ナビ数 */
  3. }

hoverの設定

funcs.jsで、タッチ操作時のhoverの挙動を制御（タッチ操作時にちゃんと解除されるようなjsを追加）している。
そのため、cssで「:hover」の指定と一緒に「.hover」も指定する（アンカーリンクは非対応）。

例：

  1. a:hover,
  2. a.hover { 
  3. color:#333333;
  4. text-decoration:none;
  5. }

Webフォントアイコン

アイコンの検索や詳しい実装方法は、こちらを参照
FontAwesome

例：

htmlを使用

  1. <i class="fa fa-angle-right  fa-2">

cssを使用

  1. #sideContents #localNavi .localNaviText a { 
  2. display: block;
  3. position: relative;
  4. } 
  5.  
  6. #sideContents #localNavi .localNaviText a::before { 
  7. color: #cccccc;
  8. content: "\f105";
  9. display: inline-block;
  10. font-family: FontAwesome;
  11. font-size: 1.4em;
  12. font-style: normal;
  13. font-weight: normal;
  14. line-height: 1;
  15. margin-top: -10px;
  16. position: absolute;
  17. right: 7px;
  18. top: 50%;
  19. }

ユーザーエージェントで処理をしたい時

（common/js/funcs.js）

  1. //スマホにのみ適用
  2. if(_ua.Mobile){   }
  3. //タブレットのみ適用
  4. if(_ua.Tablet){   }

画像の圧縮

TinyPNG
JPGやPNGを圧縮して軽量化

カラムレイアウトの選択

1カラム

  1. <div class="contentsAreaType01" id="contentsArea">
  2. <div class="inner01">

  3. <div id="mainContents">などを入れる

  4. </div>
  5. </div>

2カラム

  1. <div class="contentsAreaType02" id="contentsArea">
  2. <div class="inner01">

  3. <div id="mainContents">
    <aside id="sideContents">
    などを入れる

    4. 

  4. </div>
  5. </div>
sample
sample
sample
sample
sample