はてなブログに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; }