とんぼの徒然日記

日々の思った事を気ままに、画像も付けたり、(笑)

超簡易メニューバーを付ける


htmlとCSSだけで横並びの超簡易メニューバーを置いてみました。

①ダッシュボード>デザイン>カスタマイズ(道具アイコン)>ヘッダの「タイトル下」に以下のhtmlコードをコピペします。

 

 

<div id="menubar">
    <ul>
        <li><a href="ホームリンク先のURL">ホーム</a></li>
        <li><a href="ここにリンク先のURL">表示したい内容</a></li>
        <li><a href="ここにリンク先のURL">表示したい内容</a></li>
        <li><a href="ここにリンク先のURL">表示したい内容</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; }

 

③私は、ホームにトップページを。カテゴリの項目をメニュー項目にしてみました。