HTMLコーディング規約

確認いただきたいこと

  • 文字コードは必ずUTF-8で制作してください。
    Shift-JISやEUC-JPで制作されたHTMLの場合、最悪文字化けや、日本語フォント指定が指定したフォントと違ってしまうなどの原因となります。
  • ホームページビルダーや一般初心者向けのオーサリングソフトや、Photoshop等の保存機能にて生成されたHTMLなど、自動生成機能で作られたHTMLは構造がまとまっておらずWordPress化することができません。
    必ずHTMLをご理解の方が手動で制作されたHTMLデータでご用意ください。
  • テーブルレイアウトのコーディングやHTML4等のレガシーなコーディングデータではご対応できない可能性があります。
    XHTMLまたはHTML5をご利用いただき、CSSベースでのコーディングにてご入稿ください。
  • XHTML、HTML5の仕様に準拠したコーディングで制作してください。
    利用できないタグ・属性を利用していたり、タグの不正なネストをしている場合など、WordPressのビジュアルエディタでコンテンツを編集した際にタグが崩れてしまうことがあります。
    HTMLデータの修正を弊社で行う場合、すべて有償での対応となりますのでご注意ください。
  • 静的なページをWordPressの固定ページ機能にて管理されたい場合には、各ページのCSSはできるだけ共通のファイルにまとめて共通のCSSセットを読み込むようにしてください。
  • WordPressこ固定ページ機能ではページ毎にCSSファイルの指定ができるような機能はないため、CSSが違う固定ページを複数用意する必要がある場合、ページ毎に「テンプレート」を作成して対応する必要があります。
    テンプレートの作成は別途費用になりますので、構造によって費用が増えてしまう可能性があります。
  • 「次のページへ」や「前のページへ」等、ページ切り換えリンクが必要な場所には、ページ切り替えリンクを含めてコーディングしたHTMLをご用意ください。
    リンクがない場合、こちらで取り付けることはいたしませんのでご注意ください。
  • HTMLの段階でレイアウト崩れがないようチェックしたうえでご入稿ください。
    特にWordPressを組み込む動的更新の箇所は、文字数のチェックや画像サイズのチェックなどをしておりませんと、WordPressから更新して文字などを流しこんだときにレイアウトが崩れたりする恐れがあります。
    HTMLやCSSの修正を弊社で行う場合、すべて有償での対応となりますのでご注意ください。

マークアップに関するお願い

HTML5で利用できない古いタグ

下記に示すようなタグはHTML4時代の遺物であり、HTML5のマークアップにはご利用いただけません。

  • <font>
  • <b>
  • <marquee>
  • <center>
  • <blink>
  • <big>

そのほかにも廃止されたタグがありますので、HTML5をご利用の場合には、正しい仕様に準拠したコーディングにてご入稿ください。
HTML5で廃止された要素と属性

不正なHTMLマークアップ

下記に示すような例はHTMLの仕様から外れるためWordPressのエディタで正しく再現出来ない場合があります。
W3Cの提供するマークアップ検証ツールなどを利用して、できるだけ仕様に準拠するようコーディングを行って下さい。

  • <p>タグはブロック要素タグを子に持てないのに、<div>タグが入っている
  • <ul>タグの直接の子要素は<li>しか使えないのに、<span>タグが入っている
  • <h3>タグの中に<h2>タグが入っている

画像・JavaScript・CSS等のアセットファイルの配置について

WordPress化されたいコンテンツの画像・JavaScript・CSSファイルは出来るだけ1つのディレクトリにまとめるようにして下さい。

良い例

画像・JavaScript・CSSの各ファイルが、ルートディレクトリ直下の決まったディレクトリに配置されています。

root

css

style.css

common.css

js

jquery.js

common.js

img

common

img-01.png

img-02.jpg

about

img-01.gif

img-02.jpg

xxxxx

img-xx.gif

img-xx.png

この形式でまとまっていればWordPress化もバッチリです!

悪い例

画像・JavaScript・CSSの各ファイルが、コンテンツのディレクトリ毎にバラバラに配置されてます。

root

common

img

img-01.gif

img-02.jpg

css

common.css

js

common.js

about

use-images

img-01.png

img-02.jpg

js

about.js

css

about.css

xxxxx

assets

images

img-xx.png

img-xx.jpg

css

xxxxx.css

js

xxxxx.js

この状態だと画像がどこにあるかバラバラでわかりづらいためWordPress化をするときにリンク切れが起きる可能性があります。