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 点であることを確認しています。
- WordPress HTML5, CSS3 Valid (No. 1)
- WordPress HTML5, CSS3 Valid (No. 2)
- WordPress HTML5, CSS3 Valid (No. 3)
