こんにちは、パソコンインストラクターの川上雄大です。
アメブロにはデザインが
旧デザイン、新デザインとあるのですが、
最近、さらに新しいデザイン（このデザインを最新デザインと呼びますね^^;）
プロフィールが丸くなって、全体の幅がもっと広がった（1120px）のに変わっています。
旧デザイン→800px
新デザイン→980px
最新デザイン→1120px
となっています。
いやいやみなさん混乱しておりますm(__)m
私の過去記事『「カスタム可能」でないデザインでメニューバーを設置するには』
にも、このようなご質問をいただいております。
ブログを拝見すると･･･
確かにずれてる･･･（汗）
あ、このデザインは最新デザインですね^^;
だって、プロフィール画像が丸いですもの。
最新デザインはこういったデザインですね↓
その場合は、フリースペース編集内に次のコードをコピペすると、
<style type="text/css">.skin-blogBodyInner{position:relative;padding-top:60px;}div#subA{position:static;}#navi{position:absolute;top:0;left:0;width:1120px;font-size:12px !important;}#navi ul{margin:0;padding:1px 0;list-style: none;}#navi ul li{margin:0;padding:0 0 0 1px;display:inline;width: 223px;line-height: 3.6;float: left;overflow: hidden;white-space:nowrap;}#navi ul li.left{margin:0;padding:0;display:inline;width:224px;line-height:3.6;float:left;overflow:hidden;white-space:nowrap;}#navi ul li a{display:block;text-align:center;font-weight: bold;background-color:#ffb6c1;color:#ffffff !important;text-decoration:none;border:1px solid #ffffff;}#navi ul li a:hover{background-color: #ffffff;color: #7B746B !important;border: 1px solid #ffb6c1;}#navi ul li ul li{display:block;margin: 0;padding: 0;position:relative;border-top:1px solid #ffffff;float:none;width:223px;}#navi ul li ul li.left{display:block;margin:0;padding:0;position:relative;border-top:1px solid #ffffff;float:none;width:224px;}#navi ul li ul {display:none;}#navi ul li:hover ul{margin: 0;padding: 0;display:block;position:absolute;z-index:100;}</style><div id="navi"><ul><li class="left"><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>
こんな感じで、メニューバーができるかな、と思います～～↓
ちなみにピンクの色を変えたい方は、
#ffb6c1
ここの色のところを変えてくださいませ！
<style type="text/css">.skin-blogBodyInner{position:relative;padding-top:60px;}div#subA{position:static;}#navi{position:absolute;top:0;left:0;width:1120px;font-size:12px !important;}#navi ul{margin:0;padding:1px 0;list-style: none;}#navi ul li{margin:0;padding:0 0 0 1px;display:inline;width: 223px;line-height: 3.6;float: left;overflow: hidden;white-space:nowrap;}#navi ul li.left{margin:0;padding:0;display:inline;width:224px;line-height:3.6;float:left;overflow:hidden;white-space:nowrap;}#navi ul li a{display:block;text-align:center;font-weight: bold;background-color:#ffb6c1;color:#ffffff !important;text-decoration:none;border:1px solid #ffffff;}#navi ul li a:hover{background-color: #ffffff;color: #7B746B !important;border: 1px solid #ffb6c1;}#navi ul li ul li{display:block;margin: 0;padding: 0;position:relative;border-top:1px solid #ffffff;float:none;width:223px;}#navi ul li ul li.left{display:block;margin:0;padding:0;position:relative;border-top:1px solid #ffffff;float:none;width:224px;}#navi ul li ul {display:none;}#navi ul li:hover ul{margin: 0;padding: 0;display:block;position:absolute;z-index:100;}</style><div id="navi"><ul><li class="left"><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>
あとは、「メニュー1」とかの文字を変えて、「＃」のところに、リンク先を指定してくださいね。
そして、「保存」を押して、自分のブログで更新（F5キーかcommand+R）してくださいませ！
幸運を祈りますm(__)m
あ、言い忘れていました^^;
ここで書いているメニューバーの設置タグは、
最新デザインの、
2カラム左サイドバー
2カラム右サイドバー
3カラム右ワイドサイドバー（フリースペース右サイドバー設置の場合）
で使用できるパターンのタグになります。
＜追記＞
あ！できたって！
良かったです～～～^^！！
以上、最新デザインのメニューバーでした。
LIDS札幌・ライフデザインスクール
川上 雄大
