昼からカブちゃんのお世話。

その後、掃除機かけて、洗面台掃除して、風呂掃除して、半日が過ぎた。

さて、今日はnucleusのブログページのシェイプアップを図ろうと思う。

いや、ちょっと前にも、ページ内アンカーのための空のa要素を取っ払ったり、clear:both目的の空のdiv要素を取っ払ったりと、見てすぐ無駄だと分かるものは排除したのだが、サイドバーのdl要素をいちいち同じクラス属性を持つdiv要素で囲ってあるのも「なんだかなあ」と思いながら作業をしていた。

ふとしたことでnucleusについて色々と検索したところ、やっぱり同じことを考えている人がたくさんいるんだねえ。

はなこさんに言ったら、また速攻で「きもっ」って返されそうだが。

だって、気持ち悪いんだもん。

といことで作業開始。

まず、<div id="wrapper">を覆う<div id="mainwrapper">を取っ払う。
いらねえもん、こんなdiv要素。

んで、各アイテムのタイトルとなるh2要素(当サイトでは他のページとの絡み上、h3としているが)を囲む、こんちこれまた意味不明な<div class="contenttitle">。

こんなもん、すべて親要素<div class="content">の中にあるんだから、h2要素に直接.content h2としてスタイルシートを記述すればいいじゃねえか。

あと、<br /><br />の連続。

プラグイン“SimpleParagraphs”を入れた意味なし。続く<a>要素を<p>要素で囲うことで対処。

<small>。大っきらいな物理的フォントタグ。いなくなってしまえっ。

テンプレート“default/index”の“アイテムの本体”

<div class="contentitem">
  <div class="contentitem1">
  <small class="contentitemcategory">カテゴリー: <a href="<%categorylink%>" title="カテゴリー: <%Category%>"><%Category%></a></small>
  </div>
  <div class="contentitem2">
  <small class="contentitempostedby">投稿者: <a href="<%authorlink%>" title="投稿者: <%author%>"><%author%></a></small>
  </div>
  <%comments%>
  <%edit%>
</div>

これを、以下のように変更。

<dl class="contentitem">
  <dt class="contentitemcategory">カテゴリー</dt>
  <dd><a href="<%categorylink%>" title="カテゴリー: <%Category%>"><%Category%></a></dd>
  <dt class="contentitempostedby">投稿者</dt>
  <dd><a href="<%authorlink%>" title="投稿者: <%author%>"><%author%></a></dd>
  <%comments%>
  <%edit%>
</div>

同じようにテンプレート“default/index”の“アイテムを編集するためのリンク”

<div class="contentitem4">
  <small class="contentitemedit"><a href="<%editlink%>" title="投稿を編集" onclick="<%editpopupcode%>" >投稿を編集</a></small>
</div>

これを、以下のように変更。

  <dt class="contentitemedit">編集</dt>
  <dd><a href="<%editlink%>" title="投稿を編集" onclick="<%editpopupcode%>" >投稿を編集</a></dd>

さらにテンプレート“default/index”の“コメントが無い時”

<div class="contentitem3">
  <small class="contentitemcomments"><a href="<%itemlink%>#c" rel="bookmark" title="&#39;<%itemtitle(attribute)%>&#39; にコメントをつける">コメントを書く</a></small>
</div>

これを、以下のように変更。

  <dt class="contentitemcomments">コメント</dt>
  <dd><a href="<%itemlink%>#c" rel="bookmark" title="&#39;<%itemtitle(attribute)%>&#39; にコメントをつける">コメントを書く</a></dd>

“コメントが多すぎる時”

<div class="contentitem3">
  <small class="contentitemcomments"><a href="<%itemlink%>#c" rel="bookmark" title="&#39;<%itemtitle(attribute)%>&#39; にコメントを書く">コメント数 <%commentcount%></a></small>
</div>

これを、以下のように変更。

  <dt class="contentitemcomments">コメント</dt>
  <dd><a href="<%itemlink%>#c" rel="bookmark" title="&#39;<%itemtitle(attribute)%>&#39; にコメントを書く">コメント数 <%commentcount%></a></dd>

要は<small>で囲まれた<div>の羅列を定義リスト<dl>に置換する。

この作業を、“default/item”、“default/searchlist”でも同じように繰り返す。
あとはスタイルシートの“Item info”部分

.contentitemcategory
{
  background: url(images/bgcategory.gif) center left no-repeat;
  font-size: 12px;
  line-height: 12px;
  padding: 0 10px 0 14px;
}
.contentitempostedby
{
  background: url(images/bgpostedby.gif) center left no-repeat;
  font-size: 12px;
  line-height: 12px;
  padding: 0 10px 0 12px;
}
.contentitemcomments
{
  background: url(images/bgcomment.gif) center left no-repeat;
  font-size: 12px;
  line-height: 12px;
  padding: 0 10px 0 13px;
}
.contentitemedit
{
  background: url(images/bgedit.gif) center left no-repeat;
  font-size: 12px;
  line-height: 12px;
  padding: 0 10px 0 11px;
}
.contentitem
{
  padding: 3px 0 0 0;
  margin: 0 0 16px 0;
}
.contentitem1
{
  display: inline;
}
.contentitem2
{
  display: inline;
  background: url(images/dotv.gif) left repeat-y;
  padding: 0 0 0 10px;
}
.contentitem3
{
  display: inline;
  background: url(images/dotv.gif) left repeat-y;
  padding: 0 0 0 10px;
}
.contentitem4
{
  display: inline;
  padding: 0 0 0 10px;
  background: url(images/dotv.gif) left repeat-y;
}

を、

.contentitem
{
  margin: 0px;
  padding-top: 5px;
  height: 30px;	
}
.contentitem dt,.contentitem dd
{
  margin: 0px;
  padding-top: 5px;
  display: inline;
  font-size: 12px;
  background-repeat: no-repeat;	
}
.contentitem dt
{
  padding-left: 10px;
  padding-right: 0px;
  background-position: 0px 9px;
}
.contentitem dd
{
  padding-left: 5px;
  padding-right: 10px;
  background-image: url(images/colon.gif);
  background-position: 0px 9px;
}
dt.contentitemcategory
{
  background-image: url(images/bgcategory.gif);
}
dt.contentitempostedby
{
  background-image: url(images/bgpostedby.gif);
}
dt.contentitemcomments
{
  background-image: url(images/bgcomment.gif);
}
dt.contentitemedit
{
  background-image: url(images/bgedit.gif);
}
dt.contentitempostedby,dt.contentitemcomments,dt.contentitemedit
{
  padding-left: 20px;
  background-position: 10px 9px;
  border-left-width: 1px;
  border-left-style: dotted;
  border-left-color: #999999;
}

とすれば、ほぼデフォルトと同じようなデザインに仕上がる。

これで(まだ改善の余地はあるが)htmlソースはかなりスッキリしたはずだ。

今日は満足。だから寝る。