ホームページっぽいメニューバーが完成！はてなブログに「ナビゲーション」をつける方法をやってみた。

こんばんは。

いつもあなたのお側に、ぽめ山です。

先日、知り合いの会社に公式ホームページを作ってくれと言われた話を書きました。

そこで思ったんですよ。

ぶっちゃけ「ローコストで作るんだったらブログの方が良くない？」とね…。

同じようなことを考えている人も結構いると思います。

というわけで、まずはホームページの代名詞とも言える「メニューバー」もとい「ナビゲーションバー」の設置をしてみましょう。

スラスラわかるHTML&CSSのきほん

参考にしたのはこちらのブログ

maroom.hateblo.jp

デザイン設定の「ヘッダー」にHTMLを追加し、

「デザインCSS」に文字列を流し込むだけの簡単作業です。

まずはHTMLの追加から行きましょう。

メニューに表示される名前やリンク先を決めることができます。

ぽめ山はカテゴリ別にしましたが、はてなブログ以外のリンク先にもできるので色々と試してみてください。

では、まず追加コードを入れるためにダッシュボードへ行きましょう。

＊＊＊

「ダッシュボード」＞「デザイン」＞

「カスタマイズ」（レンチの形をしたアイコン）＞

「ヘッダ」＞「タイトル下」

＊＊＊

この「タイトル下」という欄に空白のテキストボックスがありますよね。

そこで下記のコードを流し込んでください。

先ほど紹介したリンク先のHTMLコードを元に、ぽめ山のブログでは下記のような設定にしました。

<!-- ナビゲーションバー -->
<div id="menubar">
 <ul>
 <li><a href="http://pomeyama.hatenablog.com" title="ホーム" >ホーム</a></li>
 <li><a href="http://pomeyama.hatenablog.com/archive/category/芸能" title="芸能ニュース">芸能ニュース</a></li>
 <li><a href="http://pomeyama.hatenablog.com/archive/category/ニュース" title="一般ニュース">一般ニュース</a></li>
 <li><a href="http://pomeyama.hatenablog.com/archive/category/笑い" title="笑えるニュース">笑えるニュース</a></li>
 <li><a href="http://pomeyama.hatenablog.com/archive/category/IT" title="ITニュース">ITニュース</a></li>
 </ul>
</div>

なんかイメージと違うのが出てきた…。

そう思った人も多いと思います。

多分、こんな感じで出てるはずです。

ホーム
芸能ニュース
一般ニュース
笑えるニュース
ITニュース

望んでるのは、横に長いメニューボタンなんだよ！

と憤慨されてらっしゃる方、まずは落ち着いてください。

HTMLは家を作るための建築素材なんです。

木材をただ並べてるだけでは家とは言えないですよね。

というか、ここまできたら後はもう楽です。

じゃあ、設計図となる「CSS」を今度は追加してみましょう。

＊＊＊

「ダッシュボード」＞「デザイン」＞

「カスタマイズ」（レンチの形をしたアイコン）＞

「｛｝デザインCSS」（いちばん下にある項目です）

＊＊＊

はい。ここでも出てきました。空白のテキストボックス。

「クリックしてもなんも出ないよ？」

という人は出るまで何回かクリックしてみてください。

パソコンのスペックが弱いと出るまでに時間がかかるみたいです。

はい、じゃあさっきのように今度は「CSSコード」を追加しましょう。

こちらも先ほど紹介したリンク先のコードを元に、ぽめ山のブログで設定したものをご紹介します。

<!-- メニューバー -->
#manubar{
 width:100%; }
#menubar ul{
 display:table;
 width:100%;
 margin: 0; 
 padding: 0;
 background-color: #FFFFFF; }
#menubar li{
 display: table-cell;
 width:20%;
 padding:0;
 background-color: #000000; }
#menubar li a{
 display: block;
 margin:0 auto;
 padding:5px;
 border: 1px solid #FFFFFF;
 text-decoration: none;
 color: #FFFFFF;
 text-align: center;
 font-size: 18px; }
#menubar li a:hover{
 background-color: #333333; }