アメブロでヘッダーメニュー(グローバルメニュー)を設置する方法

   

アメブロ ヘッダーメニュー

アメブロをやっている人で、「ヘッダーメニューを設置したい」と言う人は多いのではないでしょうか?しかし、アメブロの初期設定では、ヘッダーメニューを設置できません。

そこで今回は、アメブロにヘッダーメニューを無理やり設置する方法を紹介していきます。ぜひ、参考にして下さい。

スポンサーリンク

1.フリースペースにコードを追加する

まずは、マイページへ行き、「設定・管理」メニューにある「フリースペース編集」をクリックしましょう。

ame-header1

そしたら、文字を記述する欄があるので、以下のコードをコピーして貼り付けて下さい。

<div id="headerMenu"><!--
--><ul class="menu"><!--
--><li><a href="ここにURL" target="_blank">メニュー1</a></li><!--
--><li><a href="ここにURL" target="_blank">メニュー2</a></li><!--
--><li><a href="ここにURL" target="_blank">メニュー3</a></li><!--
--><li><a href="ここにURL" target="_blank">メニュー4</a></li><!--
--><li><a href="ここにURL" target="_blank">メニュー5</a></li><!--
--></ul><!--
--></div>

「ここにURL」の所は、リンクしたいページのURLに置き換えて、「メニュー1」などの所は、リンクの名前に書き換えて下さい。

リンクの数を増やしたいのであれば、「ul id="menu"」と「</ul>」の間に、「<li><a href="ここにURL" target="_blank">メニュー1</a></li><!---->」のコードを付け加えましょう。この時も、「ここにURL」と「メニュー1」の部分は自分で変えて下さい。

ame-header2

上手く編集が終わったら、忘れずに「保存」をクリックして、次の作業に移ります。

2.サイドバーにフリースペースを配置

次に、先ほどの画面に戻り、「配置設定」をクリックしましょう。

ame-header3

「フリースペース」という項目があるので、それを「使用する機能」の欄の一番上に設置します。

ame-header4

3.ヘッダーメニューのデザインを作る

その後は、「デザインの変更」をクリックして、ヘッダーメニューのデザインを決めていきます。

ame-header5

そして、「CSSの編集」をクリック。この「CSSの編集」は、「CSS編集用デザイン」というデザイン(テンプレート)の時しか表示されないので、もし、「CSS編集用デザイン」でない人は、これを機会に変えましょう。

ame-header6

「CSSの編集」をクリックしたら、画面の真ん中にローマ字だらけのコードが書かれている部分があります。その部分を下までスクロールすると、「その他、拡張があれば記述」という項目があるので、その下に以下のコードをコピーして貼り付けます。

ame-header7

/* メニューバー*/
#wrap,.skinContentsArea{
position:relative;
}
#headerMenu{
position:absolute;
margin:0;
padding:0;
margin-bottom:10px;
}
#headerMenu ul.menu{
margin:1px;
padding:0;
list-style: none;
border-bottom:3px solid #ff9600; /*リンク下の線のデザイン*/
background-color:#43B134;/*リンクの背景色*/
}
#headerMenu ul.menu li{
position: relative;
float: left;
margin: 0;
padding: 0;
text-align: center;
}
#wrap,.skinContentsArea{
padding-top:40px;
}
#headerMenu{
top:0px;
left:0px;
width:980px;
}
#headerMenu ul.menu li a{
float:left;
display: block;
width:180px;/*リンク1つの横の長さ*/
line-height:24px;
padding: 3px;
padding-top:8px;
padding-bottom:8px;
margin:0;
text-decoration: none;
text-align: center;
color:#ffffff; /*リンクの文字色*/
font-weight:700; /*リンク文字の太さ*/
font-size: 16px;   /*リンク文字の大きさ*/
}
#headerMenu ul.menu li a:hover{
background:#106F36; /*カーソルを乗せた時のリンク背景色*/
color:#ffffff; /*カーソルを乗せた時のリンク文字色*/
}

リンクの色を変えたい時などは、例えば、「background-color:#43B134;/*リンクの背景色*/」の部分の「43B134」の数字を変えれば、リンクを色を変えることができます。

また、ヘッダーメニューにたくさんリンクを表示したい場合は、コードの「width:180px;/*リンク1つの横の長さ*/」の部分の「180」と言う数字を変えて調整すればOKです。

リンクの色を変えたい時には、「HTMLカラーコード」 のサイトを参考にすると良いですよ。使い方は、とっても簡単。自分の好みの色を探して、右下に出てくるコードを使うだけです。

ame-header8

スポンサーリンク

この記事をシェアする

こちらの記事もおすすめ!

スポンサーリンク