はてなブログに簡易メニューバーを追加

「どうも見づらいのう(´-ω-`)」ということで、またもやブログのデザインを変えました。

これで納得しているわけではないので、また変えるかもしれません。

javascript使えばもっと色々出来るんですが、あまり詳しくないし重たくなるので多用は避けたいところ。

htmlとCSSだけの横並びメニューバー

javascriptは避けることにして、htmlとCSSだけで横並びの超簡易メニューバーを置いてみました。

↓の赤枠部分です。

スクロール時の表示位置固定は、個人的に嫌いなのでしてません。

固定したい場合はCSS（position:fixed）で可能です（テスト済みです）。

html

ダッシュボード＞デザイン＞カスタマイズ（道具アイコン）＞ヘッダの「タイトル下」に以下のコードを追加

※2015/11/20：コード訂正しました。

<div id="menubar">
    <ul>
        <li><a href="ここにリンク先のURLを記入して下さい" title="ここにマウスオーバーで表示したい内容を記入して下さい。改行は&#13;&#10;で出来ます。" target="_blank">ここにメニューバーに表示させたい内容を記入して下さい</a></li>
        <li><a href="ここにリンク先のURLを記入して下さい" title="ここにマウスオーバーで表示したい内容を記入して下さい。改行は&#13;&#10;で出来ます。" target="_blank">ここにメニューバーに表示させたい内容を記入して下さい</a></li>
        <li><a href="ここにリンク先のURLを記入して下さい" title="ここにマウスオーバーで表示したい内容を記入して下さい。改行は&#13;&#10;で出来ます。" target="_blank">ここにメニューバーに表示させたい内容を記入して下さい</a></li>
        <li><a href="ここにリンク先のURLを記入して下さい" title="ここにマウスオーバーで表示したい内容を記入して下さい。改行は&#13;&#10;で出来ます。" target="_blank">ここにメニューバーに表示させたい内容を記入して下さい</a></li>
    </ul>
</div>

リンクタグ＜ａ＞にtitle属性を指定すると、マウスオーバーでリンクの説明が表示されます。説明文は「＆＃１３；＆＃１０；」で改行できます。

また、 「target="_blank"」は新しいタブ（または新しいウィンドウ）で開くために入れてあるものなので、同一タブ（または同一ウィンドウ）で開くようにしたい場合は削除して下さい。

CSS

ダッシュボード＞デザイン＞カスタマイズ（道具アイコン）＞｛｝デザインCSSに以下のコードを追加

#menubar{
    width:100%; }
#menubar ul{
    display:table;
    width:100%;
    margin: 0; 
    padding: 0;
    background-color: #FFFFFF; }
#menubar li{
    display: table-cell;
    width:25%;
    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; }

正直「ないよりはマシ」レベルですが、

• サイドバーにリンクを置くだけだと目立たない

• かと言ってブログパーツを置くのはデザイン的にもファイルサイズ的にもよろしくない

ので、まぁこれでいっかなー(・３・)～♪とまずますお気に入りです。

2015/11/20追記

メニューバーのHTMLタグについて、記事の内容のままコピペで貼り付けていらっしゃる方をちらほらお見かけしました。

リンク先のURLやリンク部分（タイトル）については、必ずご自分で指定したい内容に変更してお使い下さい。

サンプルに載せていたタグは私の各アカウントへのリンクになっていたので、人様のブログに私のアカウントへのリンクが載っている状態になっていまして…(´ω`;)

サンプルコードは直しておきましたので、既にお使いになられている方も一度ご確認頂ければ幸いです。

また、メニューバーに載せるコンテンツを増やしたい場合は、HTMLタグに「＜li＞～＜／li＞」を追加し、CSSの「#menubar li」の「width:25%;」を変更して下さい。

＜li＞の幅（width）は、全体の幅＝100%を4で割って25%にしているので、例えば5つに増やすなら100÷5で20%、6つなら100÷6で16%、となります。小数点以下は切り捨てて下さい。

2016/7/27追記

CSS1行目のclass名が間違っていましたので、訂正しました。

（雑記に次ぐ雑記さん、ありがとうございました！）

2016/12/20追記

コメント頂きましたメニューバーを2行にする方法ですが、htmlとCSSのid名をclass名に変更してご利用下さい。

html

<div class="menubar"> <!-- 1行目 -->
    <ul>
        <li><a href="ここにリンク先のURLを記入して下さい" title="1-1" target="_blank">1-1</a></li>
        <li><a href="ここにリンク先のURLを記入して下さい" title="1-2" target="_blank">1-2</a></li>
        <li><a href="ここにリンク先のURLを記入して下さい" title="1-3" target="_blank">1-3</a></li>
        <li><a href="ここにリンク先のURLを記入して下さい" title="1-4" target="_blank">1-3</a></li>
    </ul>
</div>
<div class="menubar">　<!-- 2行目 -->
    <ul>
        <li><a href="ここにリンク先のURLを記入して下さい" title="2-1" target="_blank">2-1</a></li>
        <li><a href="ここにリンク先のURLを記入して下さい" title="2-2" target="_blank">2-2</a></li>
        <li><a href="ここにリンク先のURLを記入して下さい" title="2-3" target="_blank">2-3</a></li>
        <li><a href="ここにリンク先のURLを記入して下さい" title="2-4" target="_blank">2-3</a></li>
    </ul>
</div>

CSS

.menubar{
    width:100%; }
.menubar ul{
    display:table;
    width:100%;
    margin: 0; /* ←上下の間隔を開けたい時はここを適宜調整して下さい */
    padding: 0;
    background-color: #FFFFFF; }
.menubar li{
    display: table-cell;
    width:25%;
    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; }

こんな感じになります。↓