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>

不正なHTMLマークアップ

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

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

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

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

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

良い例

画像・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化をするときにリンク切れが起きる可能性があります。