こんにちは、パソコンワンポイントレッスン！
PCインストラクターの川上です。
このようなご質問いただきました。
『アメブロのデザインのままで、メニューバーだけ作ることってできるのでしょうか？
季節に合わせたアメブロのデザインが好きなんですが･･･^^;』
通常、メニューバーを設置するには（パソコン版）、
１．フリースペース内に項目名とリンク先のコードを書く
２．CSS編集でメニューバーのCSSコードを追加する
といったことをします。
（詳しくは、こちらの記事『ウエストみたいなヘッダーの下の帯って【メニューバーの設置方法】』をご参照ください。）
ですから、アメブロのデザインを
「CSS編集用デザイン」にしなければこれら↑の通りはできません。
（CSS設定をしてアメブロカスタマイズしたい方はこのデザインを選択してください。）
しかし、アメブロのデザインを「カスタム可能」でないデザインのままでも、
実はヘッダーメニューを設置することはできるのです！
それは･･･
フリースペース内に、次のコードを書く（コピペでもOK）だけなのです。
（フリープラグインではないのでご注意を！）
<style type="text/css">.skinContentsFrame{width:980px;margin:0 auto;position:relative;}.skinContentsArea{padding-top:60px;}.skinContentsArea2{margin-top:20px;}#navi {position:absolute;top:0px;left:0;width:980px;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:195px;line-height:3.6;float:left;overflow:hidden;white-space:nowrap;}#navi ul li.left {margin:0;padding:0;display:inline;width:196px;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:#ffffff;color:#E83D34 !important;text-decoration:none;border:1px solid #E83D34;}#navi ul li a:hover {background-color:#E83D34;color:#ffffff !important;border:1px solid #E83D34;}#navi ul li ul li {display: block;margin:0;padding:0;position:relative;border-top:1px solid #ffffff;float: none;width:195px;}#navi ul li ul li.left {display: block;margin:0;padding:0;position:relative;border-top:1px solid #ffffff;float: none;width:196px;}#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,399文字になります。）
「保存」をクリックして、ブログに戻って更新（F5キー or Command＋R）すると、
このような↓赤色のメニューバーが設置されます。
（どんな感じに動くかは、こちらのブログをご覧になってみてください^^）
上↑のコード内のカラーコード「#E83D34」（赤）を「#003399」（青）に変えたコードはこちら↓になります。
<style type="text/css">.skinContentsFrame{width:980px;margin:0 auto;position:relative;}.skinContentsArea{padding-top:60px;}.skinContentsArea2{margin-top:20px;}#navi {position:absolute;top:0px;left:0;width:980px;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:195px;line-height:3.6;float:left;overflow:hidden;white-space:nowrap;}#navi ul li.left {margin:0;padding:0;display:inline;width:196px;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:#ffffff;color:#003399 !important;text-decoration:none;border:1px solid #003399;}#navi ul li a:hover {background-color:#003399;color:#ffffff !important;border:1px solid #003399;}#navi ul li ul li {display: block;margin:0;padding:0;position:relative;border-top:1px solid #ffffff;float: none;width:195px;}#navi ul li ul li.left {display: block;margin:0;padding:0;position:relative;border-top:1px solid #ffffff;float: none;width:196px;}#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,399文字になります。）
「保存」をクリックして、ブログに戻って何度か更新（F5キー or Command＋R）すると、
このような↓青色のメニューバーが設置されます。
もちろん、この↑コードを貼り付けた後は、最後の方にあるこの↓コードの
「#」にリンク先のURLを
メニュー1等を項目名に変更してください。
<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>
もちろん、先に項目名とリンク先は決めて（作るなど）おいてくださいね^^!
なお、項目名の文字の大きさは
<style type="text/css">.skinContentsFrame{width:980px;margin:0 auto;position:relative;}.skinContentsArea{padding-top:60px;}.skinContentsArea2{margin-top:20px;}#navi {position:absolute;top:0px;left:0;width:980px;font-size:12px !important;}#navi ul {margin:0;padding:1px 0;list-style:none;}～～～
のfont-size:12px !important;の数字を変更してみてくださいね。
･･･と、
このように、フリースペース編集内にコードを置くだけでできてしまうのです。
＜注意１＞
フリースペース内では、コードは改行はせずに、1行にしてください。
（どこか改行されていたら、削除してください。）
＜注意２＞
［配置設定］で「フリースペース」を配置しておいてください。
どんな感じかは、こちらの記事をご参照くださいませ↓↓↓
サイドバーにバナーを貼り付けるには
ちなみに･･･
フリースペース内には、次のタグは書けませんのでご注意ください。
・object ・param ・server ・javascript ・form
・input ・embed ・textarea ・script ・meta
これら↑のタグ（禁止タグといいます）は、フリースペースだけでなく、記事本文やメッセージボードにも入れることができません。
しかし、フリープラグインであれば入れることができます。
（ただし、フリースペースの最大文字数が半角10,000文字に対して、フリープラグインは半角3,800文字と少ないですので、入れすぎないようにするか、ダイエットか、外部化されるとよいです。）
＜注意！＞
2016/3/14現在、アメブロには3種類のデザインがあります。
最新デザインでの設置はこちらの記事をご参照くださいませ↓
『最新デザインでメニューバーを設置するには（既存のデザインの場合）』
以上、ワンポイントレッスンでした。
LIDS澄川・ライフデザインスクール
川上 雄大