はてなブログにhtmlとCSSだけで横並びの超簡易メニューバーを追加

赤枠部分です。

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

 <div id="menubar">
<ul>
<li><a href="ここにリンク先のURL">メニューバーに表示させたい内容</a></li>

<li><a href="ここにリンク先URのL" >メニューバーに表示させたい内容</a></li>

<li><a href="ここにリンク先のURL">メニューバーに表示させたい内容</a></li>

<li><a href="ここにリンク先のURL">メニューバーに表示させたい内容</a></li>
</ul>
</div>

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

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

ダッシュボード＞デザイン＞カスタマイズ（道具アイコン）＞｛｝デザイン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; }