【IE対応】シンプルな横向きナビゲーションバーをブログに導入する方法

今回はIEでも上手く作動するナビゲーションバーをブログに導入する方法を紹介したいと思います。

最近、ナビゲーションバー(グローバルナビゲーションバーとかナビゲーションウインドウとも言うらしい)を導入しているサイトさんが多いので「いつか私も…」と思っていたのですが、先日ある記事で「ナビゲーションバーにはSEO効果がある」という記事を読み、モチベーションがアップしたので今回ナビゲーションバーを導入してみました。

参考にしたのはWebWordさんの「横型のナビゲーションバー」という記事です。この記事の最後の方に書いてあるHTMLとCSSのファイルをまずは自分のテンプレートに張り付けてみました。私はナビゲーションバーをメインエレメントの最上部に設置したいので、メインエレメントの最上部に位置する所にHTMLを貼り付けます。CSSはどこに張り付けてもOKだと思います。

HTML
--------------------------------
<div>

<ul>
<li><a href="http://www.javadrive.jp/">JavaDrive</a></li>
<li><a href="http://www.webword.jp/">WebWord</a></li>
<li><a href="http://www.dbonline.jp/">DBOnline</a></li>
<li><a href="http://www.moviehouse.jp/">MovieHouse</a></li>
</ul>

</div>
---------------------------------

CSS
--------------------------------
ul{
margin-left:0;
padding-left:0;
list-style-type:none;
width:440px;
border-top:1px solid #cccccc;
border-bottom:1px solid #cccccc;
border-left:1px solid #cccccc;
}

li{
float:left;
width:110px;
}

a{
display:block;
padding-top:10px;
padding-bottom:10px;
border-right:1px solid #cccccc;
text-align:center;
text-decoration:none;
background-color:#eeeeee;
color:#555555;
width:109px;
}

a:hover{
background-color:#aaaaaa;
}
----------------------------------

しかし、これをそのまま張り付けてもブログではサイト通りに上手く表示できませんでした。
なので、ココから少し手直しします。まずHTMLの方は、このままだとリンクの表示がブログの内の他のリンクと同じ形式になってしまうので、<div>を<div id="navbar">と名前を付けてリンクの方式(やスタイルの方式等)をナビゲーションバー限定で使えるようにします(リンクの方式はCSSに記述)。また、CSSのli{ }で表示されている float:left; はIEでは上手く作動しないので、HTMLで<TABLE>タグを使って各ブロックを横向きに表示するようにします。このfloat関連はブログカスタマイズの大敵ですね…。リンク先URLやリンクの文字もココで変更します。

CSSの方は各セクションに#navbarを追加して、各セクションがnavbarだけで作用するようにしています。
後は自分のブログに合うようにwidthの値やmargin等を各自変更するだけです。私の場合、solidを使ったレイアウトを結構省略しました。


改良HTML
---------------------------------
<div id="navbar">
<ul2>
<TABLE>
<TR><TD>
<li2><a href="http://frequ2156.blog.fc2.com/blog-category-7.html">自動車関連</a></li2></TD>
<TD><li2><a href="http://frequ2156.blog.fc2.com/blog-category-6.html">ゲーム・ハード</a></li2></TD>
<TD><li2><a href="http://frequ2156.blog.fc2.com/blog-category-14.html">携帯・スマホ関連</a></li2></TD>
<TD><li2><a href="http://frequ2156.blog.fc2.com/blog-category-10.html">コンビニ店舗数</a></li2></TD>
<TD><li2><a href="http://frequ2156.blog.fc2.com/blog-category-8.html">経済関連指標</a></li2></TD>
<TD><li2><a href="http://frequ2156.blog.fc2.com/blog-category-12.html">Highchartsの使い方</a></li2></TD>
</ul2>
</TR></TABLE>
</div>
----------------------------------------

改良CSS
--------------------------------------
#navbar ul2{
margin-left:0;
padding-left:0;
list-style-type:none;
width:760px;
float: left;
border-top:1px solid #cccccc;
border-bottom:1px solid #cccccc;
}

#navbar li2{
float: left;
width:124.4px;
}

#navbar a{
display:block;
padding-top:10px;
padding-bottom:10px;
text-align:center;
text-decoration:none;
background-color:#eeeeee;
color:#555555;
width:123.4px;
}

#navbar a:hover{
background-color:#aaaaaa;
}
------------------------------

これでナビゲーションバーが導入できるはずです。
尚、上のソースコードではHTML、CSS共にulタグとliタグがそれぞれul2、li2となっていますが、ul、liのままでもOKです。私の試行錯誤の様子が見てとれるかと思います(笑)

関連記事
  
このエントリーをはてなブックマークに追加

イーロン・マスク 破壊者か創造神か (朝日文庫)
竹内一正
朝日新聞出版
売り上げランキング: 9,596

■よく読まれている人気記事


コメントの投稿

非公開コメント


author imageAuthor:Lynx
各データの推移を見守り中。
御連絡はこちらまでお願いします。



最新記事