アメブロにヘッダーメニューを表示する方法の説明

3910GO-ブログカスタマイズ　＞　アメブロカスタマイズ＞　アメブロにヘッダーメニューを設置する方法

アメブロにヘッダーメニューを設置する方法

アメブロにヘッダーメニューがあると、色々と便利な部分があり導入している方も多いですが、ここではその方法について説明しています。

アメブロにヘッダーメニューを取り付ける場合、カスタマイズする部分は、『CSS編集』と『フリースペース』の2ヶ所となります。

まずは、フリースペース編集の部分ですが、フリースペースの編集部分に下記のHTMLコードを貼り付けて下さい。

フリースペースの編集は、アメブロの管理画面左メニューの『設定・管理』⇒『フリースペース編集』の順にクリックすると編集ページが開けます。

フリースペースに貼り付けるHTML

アメブロでヘッダーメニューを表示する方法については、多くの方が紹介していますが、他と同じでは芸がないので、当サイトではメニュー部分を6個にしたり、HTMLをテーブルで構成してみました。

メニューへのリンクは、各自自分のリンクしたいページへのリンクに変更して使って下さい。

また、メニューの数を増やしたり、減らしたりする場合は、

--><td><a href="#" target="_blank">メニュー○</a></td><!--

という部分の行を増やしたり減らしたりしてから、後で紹介するCSSの『一つ一つのメニュー幅』という部分を自分で調整してみて下さい。

一応、余談として、このソースの続きに別のフリースペースのHTMLを追加すると、サイドメニューにその続きを表示することが可能です。（ヘッダーメニューでフリースペースを使ってしまったからフリースペースが使えないわけではありません。）

続いて、CSS部分の編集についてですが、CSS編集の一番下に下記のCSSをコピーして貼り付けて下さい。

CSSの編集のやり方については、『CSSテンプレートでアメブロをカスタマイズする方法』で説明しています。

CSS編集に貼り付けるCSS

/***************************************
ヘッダーメニュー表示
by 3910go http://blog-customize.3910go.com/
***************************************/
/* ▼ ヘッダーメニューカスタマイズ (ここから) ▼ */
.skinContentsArea {
position: relative; /* ←メニューをヘッダー下へ移動（変更しない） */
padding-top: 60px; /* ←メニュー設置スペース高さ */
}
#topmenu{
position: absolute; /* ←メニューをヘッダー下へ移動（変更しない） */
top:0px;/* ←上から*/
left:0px;/* ←左から*/
z-index: 100;
}
#topmenu td {
line-height:54px; /* ←メニューの高さ */
text-align:center;
font-size:14px; /* ←文字の大きさ */
width:160.6px; /* ←一つ一つのメニュー幅 */
padding:0px;
}
#topmenu a { /* ←通常時のリンク */
background-color:#15bbdf;/* ←枠内の色 */
text-decoration:none;
border-color:#336699; /* ←枠線の色 */
border-width:1px; /* ←枠線の太さ */
border-style:double; /* ←枠線の種類 */
color:#FFFFFF; /* ←文字の色 */
display:block;
width:100%;
}
#topmenu a:hover { /* ←マウスオーバー時のリンク */
background-color:#ed739e; /* ←枠内の色 */
text-decoration:none;
border-color:#FF6666; /* ←枠線の色 */
border-width:1px; /* ←枠線の太さ */
border-style:double; /* ←枠線の種類 */
color:#FFFFFF; /* ←文字の色 */
width:100%;
}
#topmenu a:visited {
color:#FFFFFF;
width:100%;
}
.freespaceArea {
margin-top: 0px; /* ←フリースペース余白消し（上、変更しない） */
margin-bottom: 0px; /* ←フリースペース余白消し（下、変更しない） */
}
/*▲ ヘッダーメニューカスタマイズ (ここまで) ▲ */

これについては、少しCSSが長いので、必要な部分だけ補足説明を付けておきましたので、変更したい部分がある場合は、説明で該当箇所を探し、各自調整してみて下さい。

以上の方法で、当サイトのアメブロにヘッダーメニューを表示することが実現できています。

興味のある方は、ぜひ実践してみて下さい。

ソーシャルボタン

ここは■006：アメブロにヘッダーメニューを設置する方法

■001：CSSテンプレートでアメブロをカスタマイズする方法　 ■002：アメブロの横幅を『広げる』『狭くする』方法　 ■003：アメブロ全体の文字を変更する方法　 ■004：アメブロにオリジナルヘッダー画像を表示する方法　 ■005：アメブロのタイトルと説明を消してヘッダー画像にリンクする方法　 ■006：アメブロにヘッダーメニューを設置する方法　 ■007：アメブロのヘッダー最上部の余白（隙間）を消す方法　 ■008：アメブロ記事タイトルのデザインを変更する方法　 ■009：アメブロサイドメニューのデザインを変更する方法　

カテゴリ

HTMLリファレンス
CSSリファレンス
Movable Type（MT）カスタマイズ
アメブロカスタマイズ
GIMPで画像制作・編集
カスタマイズに使える無料ソフト・ツール集

アメブロカスタマイズ

3910GO　＞　3910GO-ブログカスタマイズ