Home » Program » WordPress HTML5, CSS3 Valid (No. 1) (Tag: , , )

WordPress をインストール後、記事の投稿や必要なプラグインを追加した後、どうしても気になり始めました。HTML ソースの汚さが。

Drive Network のホームページ・オンラインサインアップ等もすべて一定のポリシーに基づいてコーディングしています。

インデント

他のブログやオンラインショップを見ても、タブによるインデントや階層構造がまるで分かりにくいデタラメに見えるインデントをよく見掛けます。

表目には分かりませんが、デバッグする際にしにくくないのか不思議です。プログラムから出力している HTML ソースも多数含まれるのでしょうが、

<body class="single single-post postid-48 single-format-standard gecko">
        <div id="outer">
        <div id="header">
                <div id="logo">
                                                <a href="http://wg.drive.ne.jp/rose/"><img src="http://wg.drive.ne.jp/rpse/wp-content/uploads/2012/04/logo.png" alt="New Wind" /></a>
                                        </div>
            <div id="serv">
                <div id="search"><form method="get" id="searchform" action="http://wg.drive.ne.jp/rose/">
    <input type="text" onfocus="if(this.value=='Search here') this.value='';" onblur="if(this.value=='') this.value='Search here';" value="Search here" name="s" id="s" />

</form>
</div>

<body class="single single-post postid-48 single-format-standard gecko">

<div id="outer">
  <div id="header">
    <div id="logo">
      <a href="http://wg.drive.ne.jp/rose/"><img src="http://wg.drive.ne.jp/rpse/wp-content/uploads/2012/04/logo.png" alt="New Wind" /></a>
    </div>

    <div id="serv">
      <div id="search">
        <form method="get" id="searchform" action="http://wg.drive.ne.jp/rose/">
        <input type="text" onfocus="if (this.value == 'Search here') this.value='';" onblur="if (this.value == '') this.value='Search here';" value="Search here" name="s" id="s" />
        </form>
      </div>

ではどちらが視認性が良いか一目瞭然ですね。

WordPress では wp-content/themes/Evander/ 等選択したテーマの下に php, js, css ファイルが多数ありますが、これらを修正しただけでは完全には修正出来ず、wp-includes/*.php もいくつか修正しました。

  • HTML ではインデントを半角スペース 2 つ単位
  • CSS, JavaScript はインデントを半角スペース 4 つ単位

CSS プロパティ並び順

.blogname {
    margin: 25px 0 0 40px;
    float: left;
    width: 400px;
    height: 70px;
    text-align: left;
}

.blogname h1 {
    padding: 10px 0 0px 0;
    font-size: 34px;
    font-weight: normal;
}

これは修正後の並び順です。タグやクラス毎にプロパティの並び順が適当だと HTML ソース同様視認性も悪いし、制作時やデバッグで苦労する気がします。

    margin:
    padding:
    color:
    background:

    display:
    position:
    z-index:
    overflow:

    float:
    clear:
    width:
    height:
    border:

    list-style:

    font-size:
    font-weight:
    text-decoration:
    white-space:

    text-align:
    vertical-align:
    line-height:
  • 並び順を決めてすべてのタグやクラス内で統一 (上記は現在の主なプロパティの並び順)

他には余分な空行を空けない等文書作成であれば普通と考えられる体裁で作成することを当然としています。

なお、HTML5, CSS3 Valid のために ad hoc なことも少々しましたが、それは次回に。各ページのフッタ上に Valid HTML5, Valid CSS3, Another HTML Lint のリンクがありますが、全ページで 100 点であることを確認しています。

Random Select

チキンカレー
欧風カレー ボンディ と出会って、御茶ノ水・神田神保町界隈では有名なエチオピアも通い出しました。欧風カレー ボンディ (ビーフカレー)欧風カレー ボンディ ("豪快" スペアリブ
特製つけ麺 (中盛 300g)
道の塩 (特製塩らーめん) で、期せずして 道の塩 にめぐり合った 1 週間後に 道 を訪れました。ディズニーランドのアトラクション同様の覚悟で、11:30 の開店に 10:00 に訪れると、すでに
Lavender
緑内障 (No. 1) の続きです。進行防止が治療法 ?事前に調べた限りでは、欠損した視野は戻ることがなく、処方される目薬で視野欠損の進行を食い止めることしか出来ないとありました。担当の医師に聞いてみ
Lavender
緑内障 (No. 4) の続きです。9 ヶ月近く様子見前回 2013/03/08 に診察を受けてからしばらく放置していました。点眼せずとも視野の狭窄も進まず眼圧も正常値だったこともあります。一応他の医
よくばりそば + じゅうしぃ
奥武島 (No. 1 – 中本鮮魚店) の続きです。沖縄本島 (No. 7 – 宮良そば) からほぼ半年ぶりに訪れました。前回訪れた後にサラダバーが始まったことはキャッチしてい
radserv ope 04
これは、radserv X (T8100) のハードディスクの換装作業のショットです。納品時は 1TB x 2 でしたが、2TB x 2 に換装しています。では、手術風に。正中切開します。 
中華せいろ (上)
オフィスのある御茶ノ水・神田エリアは、カレーやラーメンの激戦区ですが、銀座にも私用で月に 2, 3 回は必ず訪れています。ランチ時であれば大抵 いさば (日本一美味しいサバの塩焼き) に入ってしまいま
FreeBSD Logo
FreeBSD kernel compile でも紹介した通り、常に kernel 再構築によりカスタムカーネルで稼動させています。私はカスタムカーネルの名称を `hostname -s` にする習慣
魯肉飯 (ランチセット, 大盛り)
一茶一会 (印度チキンカレー) から日を空けずして再び訪れました。気になっていた魯肉飯 (豚の角煮) にチャレンジしてみたかったからです。前回訪れた週末の看板には、印度チキンカレーの横に "
Drive Network Philosophy
WordPress 4.1 (users テーブル user_pass カラム) で使用する暗号化されたパスワードを作成するため、ソースファイルを参考にスクリプト化しました。ソースファイルを展開したデ
Valid HTML5 Valid CSS3 Another HTML Lint