忍者ブログ

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

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

entry_top_w.png
×

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

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

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

PR
entry_bottom_w.png
この記事にコメントする
お名前 
タイトル 
メールアドレス 
URL 
コメント 
パスワード 
この記事へのトラックバック
この記事にトラックバックする:
plugin_top_w.png
カレンダー
11 2017/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]