読者です 読者をやめる 読者になる 読者になる

pomeyama days

はてなブログを知るためにテスト稼動中。リアルに仕入れたネタを中心に書きます。

スポンサーリンク

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

こんばんは。

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

 

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

そこで思ったんですよ。

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

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

 

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

 

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

スラスラわかる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; }

 

コピペして「デザインCSS」に流し込んだら

「変更を保存する」を押して実際にみてください。

見事に「メニューバー」が完成しています。

 

でも、さっきのHTMLで項目増やしたり、減らしたりして貼り付けた人いませんか?

項目数をいじっていた場合、デザインがちょっとおかしくなっているはずです。

その場合は項目数に従って「CSS」をちょっといじっちゃいましょう!

 

コードの意味なんて分からなくても大丈夫です。

さっきのコードの中にあるこの一文を探してください。

 

#menubar li{

 display: table-cell;

 width:20%; ←ここの部分に注目!

 padding:0;

 background-color: #000000; }

 

「width:20%;」のところは、メニュー項目が5つの時の設定なんです。

もし、メニュー項目が6つだったら「width:16%;」に直しましょう。

「100%÷メニュー項目数」です。小数点以下は切り捨てます。

「100%÷6=16.6666667%」ですから、切り捨てで「16%」というわけです。

 

ぽめ山はいま黒基調のブログデザインにしているので、今回、特に色をいじっていませんが、カラー設定をすればカラフルでかわいいメニューバーも作れます。

 

でも、いきなりそこまで進んでもわけわからないと思うので、今日はここまでにしときましょう。

コード制作者の「ゆいとまる」さんに感謝ですね。

ありがとうございました。

pomeyama daysはamazon.co.jpを宣言しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエト宣言プログラムである、Amazonアソシエイト・プログラムの参加者です。