アメブロのメニュー設置法

志師塾TOP
» 　　|-ブログ » アメブロのメニュー設置法

アメブロのメニュー設置法

士業の顧客獲得に掛ける時間を半分に、受注単価を30％増に、
士業Web集客志師塾の五十嵐です。

今日は、聞かれることの多い、アメブロのメニューを設置する方法について。

このアメブロのメニュー設置だけでも、1日あたりのアクセスが
100アクセスも増えたという報告を頂いています。

ということで、さっそく方法です。

といっても、あまり凝ったものは難しいので、一番簡単な方法について。

今回の設置方法では、フリースペースと、CSSを使います。

【Step1】フリースペースにタグのテンプレートを追加

まず、フリースペースに以下のタグを追加してください。

フリースペースは、

　アメブロの、ブログ⇒サイドバー⇒フリースペースの編集

でたどり着けます。

【Step2】テンプレートをカスタマイズ

・ここで、メニュー設定した後に、リンク先のページ（飛ぶ先のページ）の
　ＵＲＬを、【#】のところに記載してください。

・「ああああああ」などはメニューボタンに表示する文字に置き換えてください。

・ボタンをクリックして、新しいウィンドウを開くのではなく、
　同じウィンドウで開きたい場合は、【target=”_blank”】を削除してください。
　※【target=”_blank”】は、新しいウィンドウを開くための記号です。

【Step3】CSSテンプレートの追加

フリースペースのタグが設定できたら、次は、CSSを編集します。

　アメブロの、ブログ⇒ブログデザイン⇒デザインの変更

から、CSSの編集をクリックしてください。

※「CSS編集用デザイン」のブログデザインでなければ
　CSS編集できません。

　CSS編集するには、
　　アメブロの、ブログ⇒ブログデザイン⇒デザインの変更
　　⇒「他のカテゴリからブログデザインを探す」のカスタム可能（右下）
　からCSS編集用デザインを選択してください。

すると、CSS編集画面に遷移します。

　（注意）
　CSS編集デザインを適用すると、既存のデザインは初期化されますので、
　くれぐれもご注意くださいね。

以下のコードを、CSSの最下部に追加します。

/*▼▼▼ 変更はＮＧ ▼▼▼*/
#frame{ position:relative; }
div#headerMenu{
position:absolute;
margin:0;
padding:0;
}
div#headerMenu ul.menu li{
display:inline;
}
div#headerMenu ul.menu{
margin:0;
padding:0;
list-style: none;
}
div#headerMenu ul.menu li a{
display:block;
float:left;
white-space:nowrap;
overflow:hidden;
text-align:center;
margin:0;
padding:0;
}
/*▲▲▲ 変更はＮＧ ▲▲▲*/
/*▼▼▼ サイズ・位置の設定 ▼▼▼*/
#overHeader{
height:240px; /* ヘッダー画像の高さ */
}
div#headerMenu{
top:200px; /* 上下位置調整 */
left:0px; /* 左右位置調整 */
width:800px; /* メニューの幅 */
}
div#headerMenu ul.menu li a{
width:160px; /* ボタンの幅 */
height:30px; /* ボタン高さ */
font-size:16px; /* ボタンの中の文字サイズ */
padding-top:14px; /* ボタン文字の縦位置調整 */
}
/*▲▲▲ サイズ・位置の設定 ▲▲▲*/
/*▼▼▼ 文字装飾・ボタンの色の設定 ▼▼▼*/
div#headerMenu ul.menu li a{ /* カーソルが乗っていない時 */
color:#FFFFFF; /* 文字色(白) */
font-weight:normal; /* 太字(なし) */
text-decoration:none; /* 下線(なし) */
background-color:#000099; /* 背景色(濃い青) */
}
div#headerMenu ul.menu li a:hover{ /* カーソルが乗った時 */
color:#0000FF; /* 文字色（青） */
font-weight:bold; /* 太字(あり) */
text-decoration:underline; /* 下線(あり) */
background-color:#EFEFEF; /* 背景色(薄いグレー) */
}
/*▲▲▲ 文字装飾・ボタンの色の設定 ▲▲▲*/