アメブロのカスタマイズ・グローバルメニュー

カテゴリ
IT

アメブロ(アメーバブログ)をカスタマイズしてホームページのように見せる手法が以前からあります。

グローバルメニューとはホームページによくある全ページ共通のメインとなるメニューのことです。
一般的にブログは、カテゴリやアーカイブなどのメニューによってページを閲覧します。
アメブロはカスマイズの自由度が高いのでホームページのようにグローバルメニューを設置することが出来るのです。

グローバルメニューを設置する方法です

まず、フリースペースにいきます

アメブロカスタマイズ

アメブロカスタマイズ

アメブロカスタマイズ

アメブロカスタマイズ

入力欄に

<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;   /* マウスカーソルがボタンにのった時の背景色 */
}

これで設置完了です。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です