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

ブログ運営について

ブログの使い方などのメモ

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


スポンサードリンク

 

赤枠部分です。

https://cdn-ak.f.st-hatena.com/images/fotolife/x/xyuitomarux/20141218/20141218144406.jpg

 

 

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

 <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; }