【テンプレート】ごちそうさま

    

猫がテーマのテンプレートです。ヘッダには透過画像を使っていますので、背景の色をお好みで自由に変えることが可能です。猫のシルエットが白色なので、背景色は若干、濃いめにする方が良いと思います。CSSに簡単なコメントを入れておきました。

• 2009.06.10
  IEでの閲覧時にレイアウトが崩れてしまっていたのを修正。
• 2009.06.10
  IEでの閲覧時にコメント欄のレイアウトが崩れてしまっていたのを修正。
  プラグイン表示箇所の行間を修正。

Another HTML-lint gateway　100点

CSS Validation Service 合格

Markup Validation Service 合格

【パーツ】カテゴリーナビゲーションバー

ナビゲーションの項目は、検索エンジンにサイトリンクとして登録される可能性があるので、可能なら設置しておきたい。でも、ナビゲーションリンクはリストの管理が面倒臭い。そこで、カテゴリー項目をリストに利用した疑似的なナビゲーションバーを作ってみた。検索エンジンにサイトリンクを生成してもらうのが目的なので、これで十分かと。

HTML

<div id="ListNavi">
<ul>
<!--plugin_category-->
   <li><a href="<!--$plugin_category_link-->"><!--$plugin_category_title--></a></li>
<!--/plugin_category-->
</ul>
</div>

CSS

/**************************************************************************************
ナビゲーションバー用デザイン
**************************************************************************************/
/*ナビゲーションバー全体の設定*/
#ListNavi {
width:770px;
}
/*リスト全体の設定*/
#ListNavi ul{
list-style: none;
margin: 0;
padding: 0;
}
/*リスト個々の設定*/
#ListNavi li{
width: 152px;
height: 25px;
float: left;
margin: 0;
padding: 0;
font-size: 80%;
text-align: center;
color: #EEEEEE;
display: block;
border:outset 1px #333333;
}
/*リンクの設定*/
#ListNavi a {
text-decoration: none;
color: #EEEEEE;
display: block;
width: 100%;
padding: 5px 0;
}
/*カーソルが合っている状態のリンクの設定*/
#ListNavi a:hover {
color: #EEEEEE;
border:inset 1px #333333;
background-color:#383838;
}

幅や色は、使用しているテンプレートに合わせて設定してください。背景色とボーダーを使ってますが、画像を使ったほうが見栄えが良いと思います。

【テンプレート】シャーロック・ホームズ

シャーロック･ホームズをテーマにしたテンプレートです。２カラムの左メニューで、折りたたみ式のメニューを実装しています。横並び型休日表示カレンダーは、小粋空間様と徒然日記様のスクリプトとHTMLソースを利用させて頂きました。この場を借りて感謝いたします。

メニューの開閉の初期状態は、Plugin1,2,3は開いた状態で、Plugin4,5は閉じた状態になります。初期状態はHTMLの修正で変更できます。

Another HTML-lint gateway　99点

減点は、プラグインの開閉と横並びカレンダーにスクリプトを利用している為。

CSS Validation Service 合格

Markup Validation Service 合格