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

おかずセレクト (2013/03/19)
ミニストップ (ベルギーチョコソフト) の続きです。自宅の近辺には見掛けませんが、オフィス周辺には歩いて 1 分程度の距離に 2 件 もあります。神田錦町 1 丁目店は少なくとも 10 年以上はあり、
うみちか食堂 しょうが焼き (1)
実は 日本一美味しい豚の生姜焼き に迫りつつある うみちか食堂 の一押しメニューです。# "すば屋" なんですけどね。(笑)沖縄そば関連のメニューも食べたことがありますが、カレーそ
玉友 甕仕込 13 年古酒 (2)
沖縄本島 (No. 6 – 打ち上げ) でお世話になったメンバー宅で、前日に誕生日プレゼントをいただいていました。この後には別のメンバーから 松藤 限定古酒 43 度 もプレゼントしていた
かつぎや担々麺 + 辛さ 5 (激辛)
かつぎや (かつぎや担々麺 辛さ 4) は 09/04 (木) にデビューしましたが、週明け月曜日に早速再訪しました。今度は辛さ 5 (激辛) に挑戦です。入口左手に券売機があります。ひっそり下の方に
黒島 (3)
黒島 (No. 1 – 石垣港離島ターミナル 〜 竹富島) の続きです。中央に小浜島、左手に西表島が見えて来ました。また後ろを振り返ると、尾行が続いています。追い上げそうでしたが、もう 1
一度は食べていただきたい燻製チーズ (3)
自宅でお酒を飲む時のおつまみにチーズは良く食べますし、ストックしている時もあります。最寄りのスーパーやコンビニエンスストアで色々な製品を見かける中、なとりの 一度は食べていただきたい シリーズはひと味
瀬底ビーチ (4)
瀬底島 (No. 1 – 172 号線散策) の続きです。前日程の雨ではありませんが小雨がパラつくこともあるこの日に、折角ですから瀬底ビーチをのぞいてみることにしました。悪天候のため営業は
枝豆, 黄金チキン, フレンチフライ
セブンイレブン (おつまみセット) を投稿した 1 年半前は、セブンイレブンの枝豆が他のコンビニと比べてダントツと感じていましたが、ある時から食感が変わりました。やや固くて塩もあまり馴染んでいない感じ
すし銚子丸 船橋店
千葉県船橋市に 15 年住んだ後、足立区綾瀬に 8 年程住んでいますが、そのどちらにも自宅近所に すし銚子丸 (千葉・東京・埼玉・神奈川のお寿司屋さん) があります。船橋の時は後半 5 年くらいで初め
Herb
セールスメモ (No. 1) の続きです。以前社内で開催されたセールス・プロモーションに関する勉強会の内容を整理してみました。事例 -> 拡販リスティング広告以前に SEO 対策が必要。インター
Valid HTML5 Valid CSS3 Another HTML Lint