こんにちは、パソコンインストラクターの川上雄大です。
以前（2013年11月28日(木) ）、
『アメブロ 記事中にメニューリンクを囲みたい【記事のメニューバー】』
という記事を書きましたが・・・
この記事内のメニューバーが
飽きてきた（笑）という方のために、
記事内のメニューバーも、ヘッダー画像下のメニューバーと同じようなのを記事にしてみました。
下記のHTMLタグ（英語でずらずらと書かれている固まり）を、
「HTML表示」欄で、コピペしてお使いくださいませ^^!
3カラムの方には、こちら↓
（画像で表示しています↑）
(実際の表示です↑）
<style type="text/css">#navi3{width:auto;font-size:10px;}#navi3 ul{margin:0;padding:1px 0;list-style: none;}#navi3 ul li{margin:0;padding:0 0 0 1px;display:inline;width: 80px;line-height: 2;float: left;overflow: hidden;white-space:nowrap;}#navi3 ul li a{display:block;text-align:center;font-weight: bold;background-color:#ffb6c1;color:#ffffff;text-decoration:none;border:1px solid #ffffff;}#navi3 ul li a:hover{background-color: #ffffff;color: #7B746B;border: 1px solid #ffb6c1;}</style><div id="navi3"><ul><li><a href="#">メニュー1</a></li><li><a href="#">メニュー2</a></li><li><a href="#">メニュー3</a></li><li><a href="#">メニュー4</a></li><li><a href="#">メニュー5</a></li></ul></div>
＃のところは、リンク先のURLに入れ替えてください。
メニュー１、メニュー２、メニュー３、メニュー４、メニュー５のところは、項目名に入れ替えてください。
2カラムの方にはこちら↓
（画像での表示です↑）
（実際の表示です↑）
<style type="text/css">#navi2{width:auto;font-size:11px;}#navi2 ul{margin:0;padding:1px 0;list-style: none;}#navi2 ul li{margin:0;padding:0 0 0 1px;display:inline;width: 120px;line-height: 3;float: left;overflow: hidden;white-space:nowrap;}#navi2 ul li a{display:block;text-align:center;font-weight: bold;background-color:#ffb6c1;color:#ffffff;text-decoration:none;border:1px solid #ffffff;}#navi2 ul li a:hover{background-color: #ffffff;color: #7B746B;border: 1px solid #ffb6c1;}</style><div id="navi2"><ul><li><a href="#">メニュー1</a></li><li><a href="#">メニュー2</a></li><li><a href="#">メニュー3</a></li><li><a href="#">メニュー4</a></li><li><a href="#">メニュー5</a></li></ul></div>
背景のピンク色を修正するには、
<style type="text/css">#navi2{width:auto;font-size:11px;}#navi2 ul{margin:0;padding:1px 0;list-style: none;}#navi2 ul li{margin:0;padding:0 0 0 1px;display:inline;width: 120px;line-height: 3;float: left;overflow: hidden;white-space:nowrap;}#navi2 ul li a{display:block;text-align:center;font-weight: bold;background-color:#ffb6c1;color:#ffffff;text-decoration:none;border:1px solid #ffffff;}#navi2 ul li a:hover{background-color: #ffffff;color: #7B746B;border: 1px solid #ffb6c1;}</style><div id="navi2"><ul><li><a href="#">メニュー1</a></li><li><a href="#">メニュー2</a></li><li><a href="#">メニュー3</a></li><li><a href="#">メニュー4</a></li><li><a href="#">メニュー5</a></li></ul></div>
background-color:#ffb6c1;
のカラーコードを変更してくださいませ。
そして、文字の色を変更したい時は、
<style type="text/css">#navi2{width:auto;font-size:11px;}#navi2 ul{margin:0;padding:1px 0;list-style: none;}#navi2 ul li{margin:0;padding:0 0 0 1px;display:inline;width: 120px;line-height: 3;float: left;overflow: hidden;white-space:nowrap;}#navi2 ul li a{display:block;text-align:center;font-weight: bold;background-color:#ffb6c1;color:#ffffff;text-decoration:none;border:1px solid #ffffff;}#navi2 ul li a:hover{background-color: #ffffff;color: #7B746B;border: 1px solid #ffb6c1;}</style><div id="navi2"><ul><li><a href="#">メニュー1</a></li><li><a href="#">メニュー2</a></li><li><a href="#">メニュー3</a></li><li><a href="#">メニュー4</a></li><li><a href="#">メニュー5</a></li></ul></div>
文字の色（白色）
color:#ffffff
のカラーコードを変更してくださいませ。
以上、記事内のメニューバーでした。
LIDS札幌・ライフデザインスクール
川上 雄大
