忍者ブログ

テンプレート@忍者ブログ

忍者ブログのSEOに配慮したシンプルなテンプレートを作成しています。

entry_top_w.png
×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

entry_bottom_w.png
entry_top_w.png

cat_g_b_ss.jpg  cat_b_o_ss.jpg  cat_p_b_ss.jpg

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

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

Another HTML-lint gateway 100点

cat_score_ss.jpg

CSS Validation Service 合格

Valid CSS!

Markup Validation Service 合格

Valid XHTML 1.0 Transitional

PR
entry_bottom_w.png
entry_top_w.png

navi_ss.jpg

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

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;
}

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

entry_bottom_w.png
entry_top_w.png

Holmes_ss.jpg

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

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

Another HTML-lint gateway 99点

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

Holmes_score_ss.jpg

CSS Validation Service 合格

Valid CSS!

Markup Validation Service 合格

Valid XHTML 1.0 Transitional

entry_bottom_w.png
次のページ >>
[1]  [2]  [3]  [4
plugin_top_w.png
カレンダー
11 2016/12 01
S M T W T F S
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
plugin_bottom_w.png
plugin_top_w.png
アクセスカウンター

[PR] プリザーブドフラワー 特定健診
plugin_bottom_w.png
plugin_top_w.png
忍者アクセス解析
plugin_bottom_w.png
plugin_top_w.png
Google Analytics
Google Analytics
plugin_bottom_w.png
Copyright テンプレート@忍者ブログ by axia610 All Rights Reserved.
Template by テンプレート@忍者ブログ
忍者ブログ [PR]