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

豚骨味噌 白髪ネギラーメン 味こいめ 脂あっさり (1)
哲麺 (豚骨醤油 青ネギラーメン 味こいめ 脂あっさり) から日を空けずして再び訪れました。いつもの凝り性全開です。3 回目もカウンター席でしたが、後ろ壁側の席が珍しく空席でした。気が付くとサインがた
東綾瀬公園 (2)
今年は観測史上 2 番目に桜の開花が早いとのことでした。個人的には、ここ 1 年程は実際の気候とカレンダーが 1 ヶ月近くずれ続けている気がしています。それはともかく、自宅の近所には通路と公園を兼ねた
温かいおそば (かきあげ)
ここ最近、沖縄ご飯か持参するおにぎり + おかず買い足しのパターンが続いたせいか、無性にかき揚げそばが食べたくなりました。場所柄、駅または周辺には大抵立ち食いそばがありますが、移動の前後にたまにふいっ
VAIO Fit 13A (背面)
hp dv5 has broken again and again で 5 年 3 ヶ月程愛用してきた hp dv5 の 5 回目の故障を機に、新たにノート PC を購入することにしました。初めてノー
FreeBSD Logo
VirtualBox (FreeBSD 9.1-RELEASE + xorg 7.7) の時点で、ノート PC 側は Emacs 24.3 + Mew 6.5 の環境に変更していました。ちょうど沖縄出
ESXi 5.1 ? Install or Updrade (F1 Details)
VMware ESXi 5.1 Install (ESXi Found – RAID アレイ初期化) の続きです。ハードディスク 1 本目 (#0) を初期化改めて Adaptec RAI
うみちか食堂 しょうが焼き (1)
実は 日本一美味しい豚の生姜焼き に迫りつつある うみちか食堂 の一押しメニューです。# "すば屋" なんですけどね。(笑)沖縄そば関連のメニューも食べたことがありますが、カレーそ
野菜炒め定食 (ライス 大)
現在利用しているデータセンターの前にあることはずっと気が付いていましたが、つい最近まで単なるお弁当屋さんだと思い込んでいました。ところが、お店の中に入っていく人に初めて気が付きました。何気にお店をよく
Havana カレー (ビーフ, ライス大盛り, ルー大盛り, 辛さ 5 倍)
前日土曜日は 沖縄出張 (No. 7 ? 毛玉) で戯れた後数人で飲み会がありました。退職したスタッフとも再会してのそれは賑やかな会でした。しこたま飲んだ次の日曜日。いつも通り起きて散歩して半身浴して
ネストビール ペールエール
先日プレゼントに常陸野ネストビールを数本いただきました。製造元 木内酒造 は初めて聞いた名前ですが、調べるとビール製造は 1996 年からでも清酒では 180 年近い歴史を持つ老舗です。木彫りを思わせ
Valid HTML5 Valid CSS3 Another HTML Lint