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

BLT サンドセット
沖縄本島 (No. 40 – 目利きの銀次 新都心店) の続きです。5 泊 6 日の最終日、ついに東京に帰る日となりました。旅の〆、最後の悪あがきに今回も那覇空港内の A&W OK
TEJ-75 + JC-120
ひさしぶりにスタジオインした時のカットです。18 – 22 歳頃まで 4 年弱ギター・ベースを触っていました。(BOOWY, COMPLEX, X のコピー)その後一度すべて手放して、20
白味噌ラーメン
普段生活している東京では 1 日 30 分程早朝に散歩をしています。"散歩" と言うと妙に笑われることもありますが、ウォーキングと言えばウォーキングです。沖縄出張は大概 2 週間の
デミグラスハンバーグと海老フライ定食
世間はクリスマスイブでチキン真っ盛りですが、この日のランチはなぜか無性にハンバーグが食べたくなりました。ザ・ハンバーグ (300g) も考えましたが、沖縄出張 (No. 24 – きょんた
石垣島ドリーム観光 (3)
石垣島 (No. 11 – 石垣御神埼灯台) の続きです。前日は石垣島をほぼ一周しましたが、翌日 05/06 は黒島を訪れることにしていました。石垣港離島ターミナルは数年前に西表島を訪れて
つけ麺 (中) + 三田流餃子
三田製麺所 (辛つけ麺) から少し時間が空きましたが、訪れる時間が取れたので気になっていた餃子に挑戦してみることにしました。普通の餃子も良いですが、お好み焼き風な餃子がとても気になっていました。普通の
Herb
アルバイトを含めても、20 年近く仕事をしてきて、一兵卒でいる期間より何らかの管理職を兼務している期間の方が大分長い中で考えていることの 1 つに、"上司をうまく利用する" という
ザ・プレミアム・モルツ <香るプレミアム> (1)
2014/05/27 発売開始の ザ・プレミアム・モルツ <香るプレミアム> は、2, 3 ヶ月以上前から宣伝等で目に触れていて実に興味がありました。元々 ザ・プレミアム・モルツ は KI
オリオンビール + お通し
facebook 沖縄ユーザーグループ が縁で沖縄好きな友達も増え、また改めてみんなで会おうと決めて、今度は 沖縄食彩 てぃ?だかんかん に集うことになりました。当初の予定から若干メンバーに変更があり
タコライス 材料 (S&B タコスシーズニング)
沖縄で最後にタコライスを食べたのが 沖縄本島 (No. 19 – タコス屋 <Tacos-ya>) で 3 ヶ月前になります。その間、東京の沖縄料理店でも 2 回程食べましたが
Valid HTML5 Valid CSS3 Another HTML Lint