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

岸本そば 大 + じゅーしー
今回の出張も土・日を含んでいます。数人で日曜日に北部に繰り出すこととなりました。一番の目的は北部ですでに咲いている桜を見ることです。内地の桜とは違い、かなりピンク色が濃いとは聞いていますし、2 月には
らーめん 中 (全部入り)
横浜らーめん武蔵家 (ほうれん草増) の続きです。以前場所もお店もまったく違いますが、同じ系統と思われるお店に入ると、麺の硬さ・味の濃さ・油の量の "お好み" を聞かれることがあり
城山 (2)
伊江島 (No. 1 – 上陸) の続きです。伊江港ターミナルに降り立ち、車に乗り込む頃にはすっかりお昼時でした。ランチにするか迷いつつ簡単に島を流し始めると城山 (ぐすくやま) が見えま
猫丸庵 メニュー (2)
沖縄本島 (No. 51 – コッコロコハウス) の続きです。約 1 年半前に沖縄入りした際、沖縄本島 (No. 1 – 猫丸庵 〜 根夢) で通り過ぎることはありましたが、今
Drive Network Core (WS-C3750E-48TD-E)
202.152.208.0/20 で割り当てられている PI アドレスの経路広報を、/23 または /24 毎に異なるデータセンターに切替えていく作業を継続していました。/23 または /24 毎に
築地食堂 源ちゃん メニュー (2015/05/15)
築地食堂 源ちゃん (和風おろしハンバーグと海老フライ定食) から半年近く過ぎましたが、念願だった飲み会利用の機会に恵まれました。お刺身や焼き魚の新鮮さや美味しさは、きっと期待に応えてくれる予感がしま
野菜炒め + コンビーフハッシュ (5)
銀座わしたショップ 2014/07/03 (コンビーフハッシュ) でようやく入手したコンビーフハッシュを、まずどんな料理で試すかを考えました。最初から作ったことがないちゃんぽんやチャンプルーよりは、手
伊江島 (6)
沖縄本島 (No. 4 – 瀬底大橋) の続きです。出発して 15 分弱で肉眼でもはっきりと伊江島が迫ってくるのが分かります。普通に写真を撮っている様に見えるかもしれませんが、風がものすご
radserv ope 09
radserv ope (SATA 1 -> 2TB) では 3.5inch ハードディスクで納品された機器の、ハードディスクのみの交換を行いました。今回は 2.5inch ハードディスクで納品
Valid HTML5 Valid CSS3 Another HTML Lint