ADGRAPHYコーディング規約

Tel：097-529-9230受付09:00～18:00　定休日：土日祝

業務連絡：内容補完のお願い。
①このページの「フォント」の項目が保留になっていますので、確定したら訂正お願いします。
②このページの「OGP設定方法」の項目について、コーダーさん用にマニュアルを作成したかったのですが、割愛しました、問い合わせがあった場合は社内用の黄色のマニュアルを参照してご回答ください。

規約が定める仕様

WEBサイト仕様について

本規約ではWEBサイトの基本仕様を以下の指定で制作する事と定めます。

DTD（文書型定義） HTML5
XML なし
CSS CSS3
Charset UTF-8
OS Windows、Mac
対象ブラウザ

Windsows

  • Internet Explorer/Microsoft Edge
  • Mozilla Firefox
  • Google Chrome

Mac

  • Safari
  • Mozilla Firefox
  • Google Chrome

スマートフォン

  • iPhone iOS Safari
  • Android 標準ブラウザ

タブレット

  • iPad iOS Safari
※バージョン番号の記載がないブラウザは構築時の最新バージョンを対象とします。
※タブレットでの閲覧を考慮してコーディングしていただく必要はありません。 お読みください
タブレットではPCサイトが表示されるようにブレイクポイントを設定します。
viewportの設定のみ適切に記述しておいてくださいましたら、タブレットでのCSS表示崩れは自社で対応しますので、タブレットでの閲覧を考慮してコーディングしていただく必要はありません。
ただしviewportの設定が一般的でない場合、後から設定の数値を変えるとサイト全体に影響が出てしまうので、戻りの修正をお願いする可能性が出てまいります。
こちらの記事「もう逃げない。HTMLのviewportをちゃんと理解する」に「変な挙動になるのでやるべきではないこと」の記載がございますのでコーディング前にご一読ください。
なおこの記事の最終更新日は2017年11月05日です。
掲載している情報は古くなります。常に新しい情報を求めるようにしてください。
追加対応（有償） 印刷対応
音声ブラウザ対応 ※対応の必要はありません。

スマートフォン対応

こちらの記事を参考に、デザイナーと打ち合わせの上、Viewportの設定およびその他対応を行ってください。
コーディングガイドライン｜クロノドライブ#スマートフォン対応

現段階では、PCとSPの振り分けはJavaScriptで行います。
どういった振り分け方がもっともユーザビリティにかなっているか、模索している段階です。

デザインファイル中のどの電話番号についても、タップで通話が起動するように設定してください。
<a>タグ中、href属性の電話番号には、ハイフンを入れない（alt属性には入れてよい、むしろ必須）。

国内電話
<a href="tel:0975299230">097-529-9230</a>
国際電話
<a href="tel:+81975299230">+81-97-529-9230</a>

レスポンシブ・ウェブ・デザイン対応

こちらの記事を参考に、ブレイクポイントの設定およびその他対応を行ってください。
コーディングガイドライン｜クロノドライブ#レスポンシブ・ウェブ・デザイン対応

※コーディングする順番はおまかせします。
※タブレットではPCサイトが表示されるようにブレイクポイントを設定します。
※メディアクエリを記述する箇所はおまかせします。
※要素の表示・非表示の仕方はおまかせします。

ないとは思いますが一応書きますが

ナビをドリームウィーバーのホットスポットツールでマップでソース生成して納品したかたがマジでいました。
ウィンドウサイズが変わったらリンク位置がずれるので、ボタンが押せなくなるのは当然なのですが…。
参考までに→マニュアルあり

命名規則

基本

画像ファイル及びCSS（ID及びCLASSセレクタ）の名前の付け方にルールを作らない。
ただし一般常識には準拠する。参考サイトあり←全部読まなくて、「見た目を反映したものやそれが何を表しているか不可解な名前ではなく、要素の目的や役割を反映した名前を付ける。」という文でページ内検索してそこだけ読むと面白いと思います。ルールはないので読まなくてもOK。

  1. 半角英数字のみを使用。
  2. 機種依存文字の使用禁止。
  3. アルファベットからはじめ数字からはじめてはいけない。
  4. 全角スペース、半角スペース（Space）の使用禁止。
  5. 「\」,「/」,「*」,「:」,「?」,「<」,「>」,「|」,「＄」これらの文字の使用禁止。

HTMLファイル・ディレクトリ

仕様書より引用します。

ヘッダーなどの共通パーツはどのように処理する？

基本

Dreamweaverのテンプレートを使用した実績が多い。
他のテキストエディタで直書きされる場合は、将来的に運営後の管理で修正が必要になった場合、サイト内で一括置換できるよう、共通パーツ部分はインデントや改行含め記述を統一しておいてください。

※Dreamweaverをお持ちでなく、修正や更新の作業を依頼された方へ
Dreamweaverをお持ちでない場合でも、更新の際はDreamweaverのテンプレートまで修正をお願いします。
次回更新時に自社で修正を掛けた際に上書きをしてしまわないため。

動的なインクルード

SSIによるインクルード、phpによるインクルード、JSによるインクルード（この方法はリスクあり）、その他、動的なインクルードの使用は可とする。
ただし、現段階では、Dreamweaverのテンプレートに慣れてきたため、現場では若干、不評ではある。
規模の大きいサイトや系列でいくつもソースを使いまわす場合などは動的なほうが修正が楽に済むことも。
偶に、インクルードするヘッダーやフッターが同じようで違うようなものがいくつもあって、何のための動的構築なのか訳が分からない事案に遭遇すると、目も当てられない。
もはやトラップとしか言いようがない。
将来的には自社でも各人がMAMP（マンプ）、XAMPP（ザンプ）を導入し、動的な運営ができるよう目指す。

CMSのモジュールテンプレート

WordPressやMT等のCMSを利用する場合は、モジュールテンプレートで管理する。
本来であればTOP階層にWordPressをインストールするべきだが、現段階では必要なディレクトリ以下にインストールすることとする。
将来的にはTOP階層にインストールできるよう目指す。
あるいは時代がすすめば別のシステムが台頭してくるかもしれない。

HTML

基本

  1. HTMLタグは必ず小文字で記述する（Alt属性など値が文字列の場合は除く）。
  2. 属性値はダブルクォーテーション（"）で囲む。
  3. 終了タグは必ず記述する。
  4. エンプティ要素（img ・ br ・ meta ・ linkなど）は最後を閉じない。
  5. Alt属性は必ず記述する。適切な文言がない場合は空（alt=""）で挿入。参考サイトあり
  6. HTMLファイル内では基本的にHTMLのみのマークアップを行い、視覚表現（装飾やアニメーション）は外部ファイル化したCSS、JavaScriptで行う。
  7. HTMLは可能な限り正しく記述する。 そのために「Gateway - Another HTML-lint 5」などの検証ツールを利用し検証する。ただし得点を意識するのはTOPページのみとし、下層ページについてはスピード重視のコーディングを行うこととする。
※HTML5でXML記法の利用が出来ますが、本規約では原則として通常のHTML記法を採用します。
誤 <img />、<br />、<hr />
正 <img>、<br>、<hr>

DOCTYPE

本規約で定めるHTMLの仕様は以下の通りです。

  • DTD（文書型定義）：HTML5
  • Charset:utf-8

そのため、DOCTYPEの記述は以下のようになります。

<!DOCTYPE html>
<html lang= "ja">

HEAD

HEAD内に記述するコードは以下のように設定し、制作コンテンツに応じて追加・変更する。

コピペ用

<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
<meta charset="UTF-8">
<meta name="viewport" content="">
<title></title> 
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="stylesheet" href="">
<script></script>
<link rel="icon" href="">
<link rel="apple-touch-icon" href="" sizes="180x180">
<meta property="og:title" content="">
<meta property="og:type" content="article">
<meta property="og:image" content="">
<meta property="og:site_name"  content="">
<meta property="fb:app_id" content="">
<meta property="article:publisher" content="">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@">
<meta name="twitter:image" content="">
</head>

解説付き

<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
TOPページならwebsite、下層ページならarticle（2箇所あります）↑

Googleアナリティクスのトラッキングコードはここに（2018/01/01現在）

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1（例）">
<title>仕様書より引用</title> 
<meta name="description" content="仕様書より引用">
<meta name="keywords" content="仕様書より引用">

hreflang（エイチレフラング）設定はここに

<link rel="stylesheet" href="「../」から始まる相対パス">
「/」始まりはテスト環境下で閲覧に支障が出るので避ける↑
CSSとJavaScriptのtype属性は省略する。
HTML5ではデフォルトの言語として解釈されるため。

Font Awesomeはここに
Java Scriptはここに

JavaScriptはできる限り外部ファイル化し、
ウェブサイトパフォーマンスの観点からHEAD内では読み込まずに</body>タグの直前で読み込ませるようにします。
ただし、 外部サービスなどの指定されたJavaScriptを利用する際に、
読み込みの方法に指定がある場合はそれに従います。
また、そのページでのみ利用するJavaScriptの場合は、HTMLファイルに直接書き込みます。

アイコン系画像はTOP階層に置き、絶対パスで呼び出します（ADGRAPHY独自基準）。↓
<link rel="icon" href="httpもしくはhttpsから始まる絶対パス（ADGRAPHY独自基準）">
<link rel="apple-touch-icon" href="httpもしくはhttpsから始まる絶対パス（Android対策）" sizes="180x180">
<meta property="og:title" content="TOPページのtitleと同じもの（ADGRAPHY独自基準）">
<meta property="og:type" content="TOPページならwebsite、下層ページならarticle">
<meta property="og:image" content="httpもしくはhttpsから始まる絶対パス（ADGRAPHY独自基準）">
<meta property="og:site_name"  content="宿名（企業名）">
<meta property="fb:app_id" content="FacebookのアプリID">
<meta property="article:publisher" content="FacebookページのURL">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@Twitterのユーザー名">
<meta name="twitter:image" content="httpもしくはhttpsから始まる絶対パス（ADGRAPHY独自基準）">
</head>

参考サイトあり：faviconやホーム画面アイコンの指定方法2017

title要素、meta要素（keywords、description）

仕様書より引用します。

CSSファイルの読み込み

CSSは全て外部ファイル化し、<link>タグでCSSファイルを読み込みます。
type属性は省略します。
CSSのインクルード部分は、@importで読み込んで管理している方も多いかと思いますが、これはHTTPリクエストがファイルの数だけ発生して、パフォーマンス的によくありませんので、使用しません。

※CSSをHTMLに直接書き込む事は原則として禁止します。

JavaScriptファイルの読み込み

JavaScriptはHEAD内には読み込まずに、</body>タグの直前に記述します。
詳しくは「JavaScript　基本ルール」をご覧ください。
ただし外部サービスのスクリプトなどを利用する場合、そのサービス独自に規程・推奨の読み込み方法がある場合はそのルールに従います。

OGP設定方法

コーダーさん用に詳しい説明を記載したマニュアルを作成したかったのですが、割愛しました。
社内用には出来上がっているものがあるので、不明点は問い合わせください。

HTML 記述ルール

インデントと改行

HTMLの記述はインデントと改行を使い構造を判断しやすいように記述します。書式の例は以下の通りです。
ご自身のやり方がおありであれば、そのように。見易ければなんでもよいです。

Tab： Tab でインデント
Rtn： 改行

<nav>Rtn
Tab<ul>Rtn
TabTab<li>・・・</li>Rtn
TabTab<li>・・・</li>Rtn
TabTab<li>・・・</li>Rtn
Tab</ul>Rtn
</nav>Rtn
<section>
※個人的にはインデントはスペースでは無く、Tabで行うほうが好みですが、Googleのコーディング規約「Google HTML/CSS Style Guide」では半角スペース2つでインデントすることを推奨しているようです。
※CMSなどによって、動的に生成される箇所については、この限りではありません。

コメントアウト

メンテナンス性の向上のため、積極的に活用する。

同一サイト内のリンク

「../」から始まる相対パスで記述する。
「/」始まりはテスト環境下で閲覧に支障が出るので避ける。

<!-- NG -->
<a href="/img/common/hd_title.png">
<a href="http://www.exsample.com/img/common/hd_title.png">

<!-- OK -->                
<a href="img/common/hd_title.png">
<a href="../img/common/hd_title.png">

外部ドメインへのリンク

httpもしくはhttpsから始まる絶対パスで記述する。
target="_blank"を設定する。

<!-- NG -->
<a href="//www.exsample.com" target="_blank">exsample.com</a>
<a href="http://www.exsample.com">exsample.com</a>

<!-- OK -->
<a href="http://www.exsample.com" target="_blank">exsample.com</a>
※プロトコルを省略した絶対パスで記述することを推奨している制作会社も多い。

メールアドレス収集ロボット対策

メールアドレスはエンティティ化する。メールアドレスをそのまま公開するよりは対策になる。
そのために「メールアドレス暗号化(メール暗号化ツール)」などのツールを利用する。

CSS

基本ルール

CSSの記述は以下を基本ルールとします。

  1. CSSの定義は原則として外部CSSに記述してCLASS及びIDで呼び出す。
  2. HTMLに直接記述する事は原則として禁止する。
  3. Charsetの記述はHTMLと同じ「UTF-8」を設定する。
  4. 値が「0」なら単位を省略する。
  5. line-height に単位はつけない。
  6. 画面の装飾は基本的にCSSでのみ行い、HTMLでは行わない。
  7. 自作の汎用クラスは基本的に使用しない。

セレクタの取り扱い

  1. IDにスタイルをあててもよいとする。
    一般的にはIDにCSSを書かないほうがよいと言われています。参考サイトあり
  2. CSSはHTMLエレメントに指定してもクラスのみに記述してもよいとする。
    厳密には、微々たる差異ではあるものの、ウェブサイトパフォーマンスを突き詰めていくなら、クラスのみに記述したほうがよいと言われています。参考サイトあり
  3. ユニバーサルセレクター（*）はレンダリングを遅くしてしまうので避ける。

汎用クラス・汎用CSS

下記のような汎用クラスを多く使用したデザイン定義は、インラインスタイルばかり使用してデザインを定義している状態と同様です。

ありがちな汎用クラス
.p-0 !important /* padding : 0; のクラス */
.mb10 !important /* margin-bottom : 10px; のクラス */

自作汎用クラスを使用しはじめると、HTML が汎用クラスだらけになり、HTML の可読性が下がります。
汎用クラスはなるべく定義しないようにします。

汎用クラスを使いたがる人
汎用クラスを急に使い出す人がいたらその人は疲れてきた可能性があります。
疲れた人には休暇をとってもらいましょう。

記述ルール

インデントと改行

見易ければなんでもよいです。
筆者の個人的な好みとしてはむしろ、インデントもスペースも入れずに、改行だけしながら詰めて書くほうが、ソースがスッキリして好きです。

※HTML同様に個人的にはインデントはスペースでは無く、Tabで行うほうが好みですが、Googleのコーディング規約「Google HTML/CSS Style Guide」では半角スペース2つでインデントすることを推奨しているようです。

プロパティの指定順

ルールを作らない。

ショートハンドプロパティ

可能な限りショートハンドでプロパティを書く。

/* NG */
border-top-style: none;
font-family: palatino, georgia, serif;
font-size: 100%;
line-height: 1.6;
padding-bottom: 2em;
padding-left: 1em;
padding-right: 1em;
padding-top: 0;

/* OK */
border-top: 0;
font: 100%/1.6 palatino, georgia, serif;
padding: 0 1em 2em;

コメントアウト

メンテナンス性の向上のため、積極的に活用する。
特に宿泊予約システム「ダイレクトイン」を使用する場合は専用のヘッダー・フッターの制作もあるので、境目がわからないと困ってしまうからになります。
予約システム「Direct In」（ダイレクトイン）予約画面イメージ
このサイト内の関連リンク→「仕様書について…宿泊予約システムの各種URL」

・大見出しの例
/* ---------------------------------------------------------
header
----------------------------------------------------------*/
・小見出しの例
/* グローバルナビ */

↑例なので、同じものでなくてよいですよ！

リセットCSS

現段階では、どのリセットCSSをを使用するかは各人の判断に任せることとする。
将来的には統一していきたい。

プリプロセッサ・タスクランナー（Sass、LESSなど / Gulp、WebPack、Gruntなど）

プリプロセッサおよびタスクランナーの使用は可とする。
ただし、現段階では、旧式の方法に慣れてきたため、現場では若干、不評ではある。

設計パターン（BEM、SMACSSなど）

BEMやSMACSSなどの設計パターンの使用は可とする。
ただし、これについては筆者もよく理解できていないので、実装前に相談をしていただきたい。

視覚表現（装飾やアニメーション）

装飾

角丸・グラデーション・透過・ドロップシャドウなどのエフェクトは画像ではなくCSS3を利用する。
各種ジェネレーターを利用するとよい。

アニメーション

ローディングアニメーション・スライダー・ハンバーガーメニューなどのアニメーションはCSS TransitionとCSS Animationを利用する。

CSS Sprite

画像を1枚の同じ画像として書き出し、CSSで必要な箇所だけを表示させる。
ナビゲーションなどによく使用する。
1枚の画像を読み込むだけでよいのでHTTPリクエストを減らすことができる。
可能な場合は積極的に利用する。

フォント

基本フォントは、＜保留＞と指定。
明朝体は＜保留＞と指定。
コピーライトなど英数フォントは、＜保留＞と指定。
文字サイズは＜保留（px）＞を基本に＜保留（%、px、em、rem、vw）＞指定。
行間は、基本的にデザインファイルに準ずるが、Webページの特性を考慮した上である程度調整。

＜保留＞font: italic bold .8em/1.2 Arial, sans-serif;＜保留＞
※一般的にサイズ単位はPCの場合はpx、スマートフォンの場合はremを用いるケースが多い。
こちらの記事の解説が非常にわかりやすいです。
コーディングガイドライン｜クロノドライブ（「フォント周りの単位指定について」でページ内検索して解説をお読みください。）

JavaScript

基本ルール

JavaScriptは動的な表現が必要な際と、外部APIなどを利用した際に使用します。
JavaScriptはできる限り外部ファイル化し、ウェブサイトパフォーマンスの観点からHEAD内では読み込まずに</body>タグの直前で読み込ませるようにします。
ただし、 外部サービスなどの指定されたJavaScriptを利用する際に、読み込みの方法に指定がある場合はそれに従います。
また、そのページでのみ利用するJavaScriptの場合は、HTMLファイルに直接書き込みます。

<script type="text/javascript" src="/common/js/jquery.js"></script>
<script type="text/javascript" src="/common/js/rollover.js"></script>
</body>
</html>

参考サイトあり：なぜhead要素内で外部JavaScriptファイルを読み込むのが良くないのか？

実装ルール

JavaScriptを利用する場合は、ユーザビリティ・アクセシビリティに配慮し、JavaScriptの利用できない環境下でも伝わる情報にあまり差が出ないように構築します。
また、JavaScriptの利用できない環境では実装できない機能の場合は、<noscript>タグを利用するなどして代替テキスト（コンテンツ）を用意します。

<div id="btn_language">
<!–– 本来であればここにJavaScriptによってコンテンツが導入されます。 -->
<noscript><p>JavaScriptの設定を有効にしてください。</p></noscript>
</div>

jQueryについて

現段階では、どのjQueryを使用するかは各人の判断に任せることとする。
将来的には統一していきたい。

遅延読み込みライブラリ

スマートフォンサイトではウェブサイトパフォーマンスの観点から「img」のみ遅延読み込みを実装することとする。
lazyloadよりも軽いライブラリが増えているので比較検討して選択する（参考記事：LP高速化のために5つの画像の遅延読み込みライブラリを比較した）。
遅延読み込みを実装した箇所は検索エンジンに認識されなくなるため、使用するのは「img」のみにとどめ、navなどの重要箇所を非表示にしてしまわないように気を付ける。

ディレクトリ構成

WEBサイトのディレクトリ構成

CSSとimgをディレクトリ別のファイルに分けて格納する。

  • exsample.com
    • index.html
    • img
      • common
      • top_01.jpg
      • top_02.jpg
      • top_03.jpg
    • css
      • style.csscommon.cssとtop.cssに分けてもよい
    • about
      • img
        • about_01.jpg
        • about_02.jpg
        • about_03.jpg
      • css
        • about.css
      • index.html
    • contact
      • img
        • contact_01.jpg
        • contact_02.jpg
        • contact_03.jpg
      • css
        • contact.css
      • index.html

URL正規化

基本ルール - 本項目は必ず準拠してください

仕様は以下の通りです。
ただし現行サイトががwwwなしのURLで検索エンジンに認識されている場合はそちらに準拠する。
また、TOPページに戻るリンクのみindex.htmlを使用してよい。
理由はTOP階層のみURL末尾がindex.htmlありの場合にindex.htmlなしのURLにリダイレクトするよう.htaccessで設定するため。
テスト環境でも制約なくサイトの巡回ができるようにするためです。

  1. wwwありで統一
  2. ドメインのみURL末尾は/（スラッシュ）なしで統一
  3. 下層ページのURL末尾は/（スラッシュ）ありで統一一
  4. 下層ページのURL末尾は「index.html」なしで統一

rel="canonical"（カノニカル）設定

現段階ではrel="canonical"を設定しない。
正しくないが、静的に構築しているうちは手作業でのアノテーション設定はリスクの方が大きいと判断した。
将来的には、動的な構築が導入でき次第、必ず設定したい。参考サイトあり

WordPress

WordPress本体のバージョンおよび各プラグインのバージョン

特に指定がない場合、WordPress本体および各プラグインは最新の安定版を使用します。

インストールディレクトリ

例えばお知らせ、ブログ、お客様の声、とあったとしたら、3つのディレクトリにそれぞれWordPressをインストールするのではなく、1つのディレクトリに1つだけWordPressをインストールし、カテゴリで管理するようにしてください。
かつ、URLは参考サイトを参照の上、以下の通りとなるように設定してください。

WordPressと静的ファイルを共存させて部分CMS化する
https://www.exsample.com/news/
https://www.exsample.com/blog/
https://www.exsample.com/voice/

避けていただきたいURL設計
https://www.exsample.com/wordpress/blog/
https://www.exsample.com/wp/blog/
http://www.example.com/wp/category/news/
http://www.example.com/category/news/

本来であればサイト全体をWordPress化することがのぞましいところではございますが、諸事情ございまして、現段階では、このようにお願いいたします。

登録メールアドレス

特に指定がない場合、「info@adgraphy.jp」を管理者用アドレスとして登録してください。
自分の個人用アドレスで登録したり、実在しないでたらめなアドレスで登録はしないでください。

複数ユーザを作成しなければいけない場合、同一のアドレスを複数のユーザで使うことはできないため、
「example01@example.com」「example02@example.com」…というように「example.com」ドメインのアドレスを入力してください。

※「example.com」ドメインはマニュアル等で例示するために予約されているドメインであり、実際に登録したり使用することはできません。
そのため、でたらめなアドレスを入力するよりもセキュリティリスクを抑えることができます。
参考：http://ja.wikipedia.org/wiki/Example.com

※でたらめなアドレスを入力した場合、仮にそのアドレスを悪意ある第三者が取得してしまうと情報が流出してしまう恐れがあります。
そのため、存在しないと思われるアドレスを安易に入力してはいけません。

IDとパスワード

ID
管理者アカウントの場合、「adgraphy」のようにドメインや案件名で使用している単語を使用してください。
「admin」というアカウントは容易に連想されるアカウント名であるため、セキュリティリスクが高まります。

編集者アカウントなどは「adgraphy-editor」のように「-editor」という接尾辞をつける、ユーザの個人名を使用するなど重複しないように設定してください。
パスワード
パスワード生成用のアドオンやWebサービスを使用し、10文字以上のパスワードを設定してください。
このとき、必ず記号（#、&など）を含めるようにしてください。

wp-config.phpの必須設定

認証用ユニークキー
認証用ユニークキーは、Cookieに格納される情報のセキュリティを強化するために設定する秘密鍵です。
設定は必須なので、以下アドレスにアクセスしてランダム生成されたユニークキーを設定してください。
https://api.wordpress.org/secret-key/1.1/salt/ ※これについては筆者もよく理解できていないので、実装前に相談をしたい（よければご教示願いたい）。
データベーステーブルの接頭辞
デフォルトでは「wp_」となっていますが、このままだと同じ接頭辞の設定で別のWPをインストールした場合、DBが上書きされてしまう可能性があります。
そのため、上記のIDの箇所で設定したように案件名やドメイン名で使用している単語を使用し、ユニークなものを設定してください。 ※ここまでしなくてよいです（参考までに引用しましたが）。

テーマの命名規則

テーマフォルダ名はデフォルトでは「theme_name」という名前になっているので、
IDと同様、案件名やドメインに紐付いた単語を使用してください。

トップページの扱いについて

トップページの扱いについては、2パターンの対応方法があります。

既存のトップページをそのまま使用する場合
サイトルート直下にある「index.html」もしくは「index.php」に、WordPressフォルダ内にある「wp-blog-header.php」をインクルードして表示する方法です。
既にコーディングが行われているサイトにWordPressを構築する場合や、WordPressの固定ページ機能と静的なHTMLデータを混在させてサイトを構築する場合はこちらの方法で対応します。
テーマ内に組み込み、front-page.phpを使用して表示する場合
サイトルート直下にある「index.html」もしくは「index.php」を、WordPressフォルダ直下にある「index.php」と差し替え、元々のトップページのデータをテーマフォルダ内の「front-page.php」に組み込んでトップページを表示する方法です。
全てのページをWordPressの固定ページで管理し、他に静的なHTMLデータが存在しない場合は、こちらの方法で対応します。
※各人のやり方があると思いますので、実装前に相談をしたい。 お読みください
現状はblogというディレクトリにWordPressをインストールし、blogというディレクトリのindex.phpをWordPressのTOPページとしている案件が多いです。
ただ、本当にこれでよいのか悩みます。ご意見をお伺いできましたら幸いです。 備考としては以下の通りです。
・伝段階では、諸事情あってTOP階層にWordPressをインストールできない。
・TOP階層の「index.html」を「index.php」に置き換えると、Dreamweaverの管理下では修正がしにくくなる。

functions.phpの必須項目

プラグイン・WordPress自動更新
下の参考サイトにサンプルがございます。
WordPressのfunctions.phpに書いておくと捗ること

インストール必須のプラグイン

WP Multibyte Patch
日本語を使用する場合は必須です。必ず有効化してください。
WP-DBManager
DBをバックアップするプラグインです。定期的にDBのダンプファイルを出力し、サーバ上に保存したり指定のメールアドレスに送ります。
サーバの設定上使用できない場合を除いて必ず有効化してください。

インストール推奨のプラグイン

必ず使用するものではありませんが、要件に応じて使用することが推奨されるプラグインです。
使用しないものはサーバ上から削除してください。

Admin Menu Editor
管理画面上のメニューの項目名を変更したり、権限に応じて表示・非表示を切り替えることができるプラグインです。
そういった必要がある場合に有効化してください。
Category Order and Taxonomy Terms Order
カテゴリやタクソノミーを並べ替えるためのプラグインです。デフォルトではカテゴリやタクソノミーの順を自由に変更できないため、このプラグインを使用します。
カテゴリやタクソノミーの機能を使用する場合は有効化してください。
Custom Post Type Permalinks
パーマリンクの設定を拡張し、カスタム投稿のパーマリンクを自由に設定するためのプラグインです。デフォルトではカスタム投稿のパーマリンクはは自動で設定されてしまうため、このプラグインを使用します。
カスタム投稿の機能を使用する場合は有効化してください。
PS Disable Auto Formatting
エディタの自動整形を無効化するためのプラグインです。デフォルトのエディタはタグの自動補完や自動整形を行うため、固定ページの作成の際などに意図しないタグが挿入されることがあります。それを防止するためのプラグインです。
エディタの機能を使用する場合は有効化してください。
WP No Category Base
デフォルトではカテゴリーページのパーマリンクに「http://www.example.com/category/news/」というように「/category」という文字列を挟んでしまうため、このプラグインを使用してその部分を除去します。
カテゴリの機能を使用する場合は有効化してください。

投稿データの取得について

投稿データを取得する場合は、query_posts()関数を使用してループを設定します。
また、query_posts()の投稿取得条件は文字列ではなく、配列によって指定します。 

<?php
$args = array(
'post_type' => 'post',
'showposts' => -1,
'post_status' => 'publish'
);
query_posts($args);
if(have_posts()): while(have_posts()): the_post();
?>
～　ループの内容　～
<?php endwhile; endif; ?>
※各人のやり方があると思いますので、実装前に相談をしたい。

.htaccessについて

.htaccessのパーミッションについて
WordPressではパーマリンクの設定を変更したときなど、一定のタイミングで.htaccessが書き換わりますが、その場合、

# BEGIN WordPress
～.htaccessの内容～
# END WordPress
上記のように「# BEGIN WordPress」から「# END WordPress」までの中身が初期化されてしまいます。
例えばリダイレクトの設定など、後から追記した部分が書き換えられてしまう可能性があるため、パーマリンクの設定が完了した後は.htaccessのパーミッションを「444（読み込みのみ可能）」に変更します。
※これについては筆者もよく理解できていないので、実装前に相談をしたい（よければご教示願いたい）。

ディレクトリのパーミッションについて

ファイルのアップロードフォルダ
標準ではファイルのアップロードフォルダは「/wp/wp-content/uploads/」になりますが、ファイルをアップロードするためにはパーミッションの変更が必要なため、このフォルダのパーミッションを「777（読み込み・書き込み・実行可能）」に設定します。
※これについては筆者もよく理解できていないので、実装前に相談をしたい（よければご教示願いたい）。

404エラーについて

TOP階層の404.htmlにリダイレクトされるようにしてください。

お見積りについて

条件によってお支払いすべき報酬が増減する場合は、受諾前に担当者と打ち合わせを行ってください。
条件の例としては以下の通りです。

例1・本番環境に構築する
例2・テスト環境に構築し、移管までを請け負う
例3・テスト環境に構築し、WordPressの引っ越し作業はしない

報酬について

今後はドメインの移管・サーバーの移管までお願いをしていきます。
条件によってお支払いすべき報酬が増減する場合は、受諾前に担当者と打ち合わせを行ってください。
条件の例としては以下の通りです。

例1・本番環境に構築する（新規サーバー）
例2・テスト環境に構築し、移管までを請け負う
例3・テスト環境に構築するのみ、移管はしない

レスポンシブ対応のお知らせ

このサイトはレスポンシブに対応しておりますので、移動中やベッドの中でもスマートフォンで快適にお読みいただけます。

↑ PAGE TOP