ブログタイトルの下にメニューバーを作る①
こんばんは～Samyです ＾ ＾
ブログタイトルの下にメニューバーを作る
こんな感じ▼
メニューバー作製は、
☆HTMLとCSS
☆JavaScript
☆画像を貼るタイプ。。。
やり方がいろいろありますが、
今回はシンプルにHTMLとCSSで作る方法です。
①
お店などのメニューをブログ記事としてＵＰする。
②テンプレート編集画面で下記のコードを記述
（コピペして色やサイズを好みに調整してください）
ＣＳＳ▼
/*メニュー設定*/
#menu ul{
margin: 10 10 10 10;
padding: 10 10 10 10;
list-style: none;
}
#menu li{
display: inline;
padding: 0;
margin: 0;
float: left;
}
#menu li a{
display: block;
border: 2px solid #87ceeb;
background-color: #add8e6;
padding: 3px;
text-decoration: none;
font-weight:bold;
color: #4682b4;
width: 130px;
height:40px;
margin: 2px;
text-align: center;
font-size: 15px;
}
#menu li a:hover{
background-color: #87ceeb;
color: #fff;
}
ＨＴＭＬ▼
☆<title>～</title>下に記述します
☆#部分に表示したいブログ記事のリンクを入れます
☆○○○部分にメニュー名を入れます
<div id="menu">
<ul>
<li><a href="#">○○○</a></li>
<li><a href="#">○○○</a></li>
<li><a href="#">○○○</a></li>
<li><a href="#">○○○</a></li>
</ul>
</div>
※ＨＴＭＬコードは、
TOP、個別記事、アーカイブの<title>～</title>下にも記述するのをお忘れなく～。
関連記事