アメブロ(アメーバブログ)をカスタマイズしてホームページのように見せる手法が以前からあります。
グローバルメニューとはホームページによくある全ページ共通のメインとなるメニューのことです。
一般的にブログは、カテゴリやアーカイブなどのメニューによってページを閲覧します。
アメブロはカスマイズの自由度が高いのでホームページのようにグローバルメニューを設置することが出来るのです。
グローバルメニューを設置する方法です
まず、フリースペースにいきます
入力欄に
<div id="header_nav"> <!-- --><ul><!-- --><li id="nav01"><a href="リンク先のURL">クリックする文字</a></li><!-- --><li id="nav02"><a href="リンク先のURL">クリックする文字</a></li><!-- --><li id="nav03"><a href="リンク先のURL">クリックする文字</a></li><!-- --><li id="nav04"><a href="リンク先のURL">クリックする文字</a></li><!-- --><li id="nav05"><a href="リンク先のURL">クリックする文字</a></li><!-- --></ul><!-- --></div>
そしてCSS編集画面へ
#wrap, .skinContentsArea { position: relative; padding-top: 60px; /* メニュー設置用スペース */ } #header_nav { position: absolute; top: 0px; /* 上下位置調整 */ left: 0px; /* 左右位置調整 */ width: 980px; /* メニュー全体の幅 */ height: 50px; margin: 0; padding: 0; } #header_nav ul.menu { background: #000; /* ボタンの背景色 */ list-style: none; margin: 0; padding: 0; } #header_nav ul.menu li { display:inline; } #header_nav ul.menu li a { display: block; width: 196px; /* ボタンの幅 */ color: #FFF; /* 文字の色 */ font-size: 14px; /* ボタンの文字サイズ */ line-height: 50px; /* ボタンの高さ */ text-align: center; white-space: nowrap; margin: 0; padding: 0; float: left; overflow: hidden; } #header_nav ul.menu li#nav01 a:hover { background: #666; /* マウスカーソルがボタンにのった時の背景色 */ }
これで設置完了です。