● アメブロでメニューバーを入れる方法
こんにちは、石川聡です。
今回は、アメブロのメニューバーを入れる方法をお伝えします。
たとえば、ほかの人のブログでヘッダー画像の下にある横長のバーを見かけますよね。下の図のようなメニューバーです。
このメニューバーを入れるだけで、あなたのブログがグンとプロっぽく見えてくる魔法のツールですよね。
その設置の方法を、一つずつ順を追ってお話しします。あなたにも入れられますから大上手ですよ。
では、いちばん基本となるベーシックなメニューバーを入れてみましょう。
下の図にあるように、ふだんはオレンジ色をしています。マウスを上にのせると色が変るタイプのものです。
まず、下のＵＲＬをクリックして、「デザインの変更」ページにいきましょう。
デザインの変更
そのページにある、適用中のデザイン、CSS編集用デザインの「ＣＳＳの編集」というリンクをクリックします。
どこにあるかは、下の図を見て参考にしてください。
すると、「ブログデザインのＣＳＳの編集」というページが開きます。下の図のようにタテに長いページです。
マウスで下にスクロールしていきましょう。すると、「現在使用中のブログデザインＣＳＳ」というのがあります。
その下に、なにやら記号がたくさん書かれた蘭が見えますよね。この蘭のいちばん下に、追記するのです。
一つずつ作業のやり方をお話ししますので、安心してください。
では、下の四角い枠で囲まれたものをすべてコピーします。マウスの動かし方やコピーのやり方は、枠の下に図で説明してあります。
上の枠で囲まれたものを、すべて選んでコピーします。パソコンの操作が苦手なかたは、これからの解説と、下の図を見ながらやってみましょう。
まず、枠の左上のすみに、マウスでクリックします。下の図では、「Ａ」となっているところですね。
そのまま、左ボタンを押しながら枠のいちばん右下まで選びます。記述が長いので３、途中で選んだところが途切れないようにしましょう。
キーボードの「shift」キーを押しながら「Ａ」から「Ｂ」の範囲を選ぶと、やりやすいでしょう。
いちばん左上の、
/* ヘッダー下にメニューバー
という左すみから、いちばん右下の
文字装飾・背景の情報 ▲ */
の右すみまでをシッカリ選びます。
下の図のように、枠の中すべてを青く反転させてください。
つぎに、青く反転しているところの上、反転しているところならどこでも良いので、そこでマウスの右ボタンをクリックします。
すると、小さな窓が開きます。その中から、「コピー」を選んでください。
キーボードの「shift」キーがどこか分からないかたは、下の図を見て探してくださいね。
そうしたら、「ブログデザインのＣＳＳの編集」というアメブロの画面を表示させます。
そして、「現在使用中のブログデザインＣＳＳ」のところで、(4)その他、拡張 というところまで移動します。
この蘭は、タテにとっても長いので、マウスを使って下にスクロールさせます。
いちばん下までいくと、(4)その他、拡張 が見えますので、そのいちばん下に先ほどコピーした記述を貼り付けます。
下の図を参考にしてください。
マウスのカーソルは、下の図でピンク色の矢印のところに入れます。かならず、ここに入れて下さいね。
そこで、マウスの右ボタンを押します。すると、小さな窓が開きますので、その中から「貼り付け」を選びます。
すると、下の図のようにとっても長い記述が貼り付けられました。
/* ヘッダー下にメニューバー（グローバルナビゲーション）を設置する */
からはじまって、
/* ▲ ボタンの色・文字装飾・背景の情報 ▲ */
までが入っているか、確認しましょう。もし、どこかで記述が切れてしまうと、失敗です。もう一度やり直しましょう。
長い記述が入っていたら、「保存」ボタンを押して、保存します。保存しないと、せっかく入れたメニューバーが入りません。
では、つぎにフリースペースのところに入れる記述の説明をしていきましょう。こちらも、順を追ってお話しします。
まず、下の枠で囲まれた記述をすべて選んでください。
やり方は、下の図を参考にしましょう。先ほどと同じように、枠の左上から右下のすみまで、すべてを選びます。
選ぶと青く反転します。その青く反転しているところで、マウスの右ボタンを押すと、小さな窓が開きます。
その窓の中から、「コピー」を選びましょう。これで、この記述がコピーされます。
そうしたら、「フリースペース編集」のページを開きます。
フリースペース編集
上のＵＲＬをクリックすると、フリースペース編集のページが開きます。
下の図のように、水色の枠の中、いちばん左上にマウスでクリックします。そこで、マウスの右ボタンを押すと、小さな窓が開きます。
窓の中から、「貼り付け」を選んでください。
すると、下の図のように、記述が入ります。すべてが入っているかを確認しましょう。
<div id="headerMenu"><!--
から、
--></div>
まで入っていればＯＫです。途中で切れていないか確認します。
ただ、このままでは、「メニュー１」「メニュー２」と表されるだけです。あなたのブログの記事タイトルや、メニュー記事のタイトルにしなければなりません。
下の図では、太い赤枠で文字を変えています。「お肌が５歳若返る方法」「ピチピチお肌を取り戻す」などです。
メニューの文字を消して、あなたのお店ブログで使いたい名前にしましょう。
注意！このときに、記号を消さないように気をつけてくださいね。たとえば、><という記号を消してしまうと、ブログで表示されません。
書き換えましたら、ページの下にある「保存」ボタンを押して保存します。
では、ブログで確認してみましょう。ブログを見て見ると、メニューバーが入り、文字も変っていることが分かります。
まだ続きます。メニューバーの「お肌が５歳若返る方法」を押したら、「お肌が５歳若返る方法」のページを開けるようにするためです。
まだ、リンクをつけていませんので、これからリンクのつけ方をお話しします。
まず、あらかじめ書いてある「お肌が５歳若返る方法」のページを開きます。そこで、ブラウザの上に表示されているＵＲＬをクリックして、すべて選びます。
ＵＲＬはすべて選ばないといけません。青く反転させてから、マウスの右ボタンをクリックします。
小さな窓が開きますので、その中から「コピー」を選びましょう。下の図を見ながら勧めてくださいね。
つぎに、「フリースペース編集」のページを開きます。そこで、「お肌が５歳若返る方法」の行を見てください。
--><li><a href="#" target="_self">お肌が５歳若返る方法</a></li><!--
とありますね。この、# のところに、先ほどコピーしたＵＲＬを入れるのです。まず、# を消します。# だけを消してくださいね。
そうしたら、" と " の間にマウスでクリックし、カーソルを持っていきます。その状態で、マウスの右クリックをします。
小さな窓が開きますので、「貼り付け」を選びましょう。
すると、つぎのようになります。
--><li><a href="http://ameblo.jp/kaishirinri/entry-12068869390.html" target="_self">お肌が５歳若返る方法</a></li><!--
となります。ただし、貼り付けたところが間違っていないか注意します。よくあるのが、こんな間違いです。
--><li><a href=http://ameblo.jp/kaishirinri/entry-12068869390.html"" target="_self">お肌が５歳若返る方法</a></li><!--
と、"" の外に、ＵＲＬが入ってしまうこと。そのときには、もう一度やり直しましょう。
正解は、下の図です。
ほかのところも、同じように記事のページのＵＲＬをコピーして、フリースペース編集のページ内に入れていきます。
作業が終わったら、ブログでどのようになったのかを確認してみましょう。
メニューバーをクリックしたら、お目当てのページが開きます。はい、成功ですね。
また、「文字色を変えたい」とか「文字の太さを変えたい」、あるいは「オレンジ色ではなく、ピンク色や赤など他の色にしたい」という方もいますよね。
その場合、どこを変えればいいのかをカンタンに書いておきますので、参考にしてください。
下の図に、文字の色、文字の太さ、下線のありなし、背景の色について説明してあります。赤で書いているところがそうです。
文字の色は、# と英数字６桁で書かれています。白は、#ffffffです。黒は、#000000です。
文字の太さも変えることができます。普通のもじは、normalで書かれています。太くしたいときには、これをboldにすれば太くなります。
こちらに、メニューバーのサンプルをのせておきました。色違いや角を丸くしたりすることもできます。
枠の線を変えて、二重線にすると、違った印象にもなりますよね。それに、背景画像を用意しておけば、よりデザインされたブログに見せることもできます。
メニューバーの参考見本
また、背景の色を変えたいときには、色見本のサイトが参考になります。
たとえば、このようなサイトがありますよ。このサイトなら、色味組み合わせの見本を見ながらあなた好みの色がつくれますよ。
一つずつ図を使ったので長くなりましたが、すでにお店やお仕事の商品やサービスがある人。ブログにそれらの記事が書いてある方は、こうしたメニューバーを追加することもオススメですね。
メニューバーの入れ方やリンクのつけ方もマスターできますよ。
初心者の方のための、お店やお仕事ブログづくりを基礎からお手伝い。アメブログのプロフィール写真のアップの方法。
記事への画像の入れ方。リンクのつけ方、問合せ申し込みフォームの入れ方、デザイン、カスタマイズをサポートします。
こんにちは、石川聡です。
今回は、アメブロのメニューバーを入れる方法をお伝えします。
たとえば、ほかの人のブログでヘッダー画像の下にある横長のバーを見かけますよね。下の図のようなメニューバーです。
このメニューバーを入れるだけで、あなたのブログがグンとプロっぽく見えてくる魔法のツールですよね。
その設置の方法を、一つずつ順を追ってお話しします。あなたにも入れられますから大上手ですよ。
では、いちばん基本となるベーシックなメニューバーを入れてみましょう。
下の図にあるように、ふだんはオレンジ色をしています。マウスを上にのせると色が変るタイプのものです。
まず、下のＵＲＬをクリックして、「デザインの変更」ページにいきましょう。
デザインの変更
そのページにある、適用中のデザイン、CSS編集用デザインの「ＣＳＳの編集」というリンクをクリックします。
どこにあるかは、下の図を見て参考にしてください。
すると、「ブログデザインのＣＳＳの編集」というページが開きます。下の図のようにタテに長いページです。
マウスで下にスクロールしていきましょう。すると、「現在使用中のブログデザインＣＳＳ」というのがあります。
その下に、なにやら記号がたくさん書かれた蘭が見えますよね。この蘭のいちばん下に、追記するのです。
一つずつ作業のやり方をお話ししますので、安心してください。
では、下の四角い枠で囲まれたものをすべてコピーします。マウスの動かし方やコピーのやり方は、枠の下に図で説明してあります。
/* ヘッダー下にメニューバー（グローバルナビゲーション）を設置する */
/* ■ 変更しません（メニューバーの基本位置設定） ■ */
.skinContentsArea{
position:relative;
}
#headerMenu{
position:absolute;
margin:0;
padding:0;
}
#headerMenu ul.menu{
margin:0;
padding:0;
list-style: none;
}
#headerMenu ul.menu li{
display:inline;
}
#headerMenu ul.menu li a{
display:block;
float:left;
margin:0;
padding:0;
white-space:nowrap;
overflow:hidden;
text-align:center;
}
/* ▲ 変更しません ▲ */
/* ■ ボタンのサイズ・位置情報 ■ */
.skinContentsArea{
padding-top:40px; /* ボタン設置用スペース */
}
#headerMenu{
top:0px; /* 上下位置調整 */
left:0px; /* 左右位置調整 */
width:980px; /* メニュー全体の幅 */
}
#headerMenu ul.menu li a{
width:196px; /* ボタンの幅 */
line-height:40px; /* ボタンの高さ */
font-size:14px; /* ボタンの文字サイズ */
}
/* ▲ ボタンのサイズ・位置情報 ▲ */
/* ■ ボタンの色・文字装飾・背景の情報 ■ */
#headerMenu ul.menu li a{ /* 通常時 */
color:#ffffff; /* 文字色(白) */
font-weight:normal; /* 太字(なし) */
text-decoration:none; /* 下線(なし) */
background-color:#FFA103; /* 背景色(オレンジ色) */
background-image:url(); /* 背景画像 */
background-repeat:repeat; /* 背景画像繰り返し */
}
#headerMenu ul.menu li a:hover{ /* マウスがボタン上に乗った時 */
color:#ffffff; /* 文字色(白) */
font-weight:normal; /* 太字(なし) */
text-decoration:underline; /* 下線(あり) */
background-color:#FFD084; /* 背景色(薄いオレンジ色) */
background-image:url(); /* 背景画像 */
background-repeat:repeat; /* 背景画像繰り返し */
}
/* ▲ ボタンの色・文字装飾・背景の情報 ▲ */
/* ■ 変更しません（メニューバーの基本位置設定） ■ */
.skinContentsArea{
position:relative;
}
#headerMenu{
position:absolute;
margin:0;
padding:0;
}
#headerMenu ul.menu{
margin:0;
padding:0;
list-style: none;
}
#headerMenu ul.menu li{
display:inline;
}
#headerMenu ul.menu li a{
display:block;
float:left;
margin:0;
padding:0;
white-space:nowrap;
overflow:hidden;
text-align:center;
}
/* ▲ 変更しません ▲ */
/* ■ ボタンのサイズ・位置情報 ■ */
.skinContentsArea{
padding-top:40px; /* ボタン設置用スペース */
}
#headerMenu{
top:0px; /* 上下位置調整 */
left:0px; /* 左右位置調整 */
width:980px; /* メニュー全体の幅 */
}
#headerMenu ul.menu li a{
width:196px; /* ボタンの幅 */
line-height:40px; /* ボタンの高さ */
font-size:14px; /* ボタンの文字サイズ */
}
/* ▲ ボタンのサイズ・位置情報 ▲ */
/* ■ ボタンの色・文字装飾・背景の情報 ■ */
#headerMenu ul.menu li a{ /* 通常時 */
color:#ffffff; /* 文字色(白) */
font-weight:normal; /* 太字(なし) */
text-decoration:none; /* 下線(なし) */
background-color:#FFA103; /* 背景色(オレンジ色) */
background-image:url(); /* 背景画像 */
background-repeat:repeat; /* 背景画像繰り返し */
}
#headerMenu ul.menu li a:hover{ /* マウスがボタン上に乗った時 */
color:#ffffff; /* 文字色(白) */
font-weight:normal; /* 太字(なし) */
text-decoration:underline; /* 下線(あり) */
background-color:#FFD084; /* 背景色(薄いオレンジ色) */
background-image:url(); /* 背景画像 */
background-repeat:repeat; /* 背景画像繰り返し */
}
/* ▲ ボタンの色・文字装飾・背景の情報 ▲ */
上の枠で囲まれたものを、すべて選んでコピーします。パソコンの操作が苦手なかたは、これからの解説と、下の図を見ながらやってみましょう。
まず、枠の左上のすみに、マウスでクリックします。下の図では、「Ａ」となっているところですね。
そのまま、左ボタンを押しながら枠のいちばん右下まで選びます。記述が長いので３、途中で選んだところが途切れないようにしましょう。
キーボードの「shift」キーを押しながら「Ａ」から「Ｂ」の範囲を選ぶと、やりやすいでしょう。
いちばん左上の、
/* ヘッダー下にメニューバー
という左すみから、いちばん右下の
文字装飾・背景の情報 ▲ */
の右すみまでをシッカリ選びます。
下の図のように、枠の中すべてを青く反転させてください。
つぎに、青く反転しているところの上、反転しているところならどこでも良いので、そこでマウスの右ボタンをクリックします。
すると、小さな窓が開きます。その中から、「コピー」を選んでください。
キーボードの「shift」キーがどこか分からないかたは、下の図を見て探してくださいね。
そうしたら、「ブログデザインのＣＳＳの編集」というアメブロの画面を表示させます。
そして、「現在使用中のブログデザインＣＳＳ」のところで、(4)その他、拡張 というところまで移動します。
この蘭は、タテにとっても長いので、マウスを使って下にスクロールさせます。
いちばん下までいくと、(4)その他、拡張 が見えますので、そのいちばん下に先ほどコピーした記述を貼り付けます。
下の図を参考にしてください。
マウスのカーソルは、下の図でピンク色の矢印のところに入れます。かならず、ここに入れて下さいね。
そこで、マウスの右ボタンを押します。すると、小さな窓が開きますので、その中から「貼り付け」を選びます。
すると、下の図のようにとっても長い記述が貼り付けられました。
/* ヘッダー下にメニューバー（グローバルナビゲーション）を設置する */
からはじまって、
/* ▲ ボタンの色・文字装飾・背景の情報 ▲ */
までが入っているか、確認しましょう。もし、どこかで記述が切れてしまうと、失敗です。もう一度やり直しましょう。
長い記述が入っていたら、「保存」ボタンを押して、保存します。保存しないと、せっかく入れたメニューバーが入りません。
では、つぎにフリースペースのところに入れる記述の説明をしていきましょう。こちらも、順を追ってお話しします。
まず、下の枠で囲まれた記述をすべて選んでください。
<div id="headerMenu"><!--
--><ul class="menu"><!--
--><li><a href="#" target="_self">メニュー１</a></li><!--
--><li><a href="#" target="_self">メニュー２</a></li><!--
--><li><a href="#" target="_self">メニュー３</a></li><!--
--><li><a href="#" target="_self">メニュー４</a></li><!--
--><li><a href="#" target="_self">メニュー５</a></li><!--
--></ul><!--
--></div>
--><ul class="menu"><!--
--><li><a href="#" target="_self">メニュー１</a></li><!--
--><li><a href="#" target="_self">メニュー２</a></li><!--
--><li><a href="#" target="_self">メニュー３</a></li><!--
--><li><a href="#" target="_self">メニュー４</a></li><!--
--><li><a href="#" target="_self">メニュー５</a></li><!--
--></ul><!--
--></div>
やり方は、下の図を参考にしましょう。先ほどと同じように、枠の左上から右下のすみまで、すべてを選びます。
選ぶと青く反転します。その青く反転しているところで、マウスの右ボタンを押すと、小さな窓が開きます。
その窓の中から、「コピー」を選びましょう。これで、この記述がコピーされます。
そうしたら、「フリースペース編集」のページを開きます。
フリースペース編集
上のＵＲＬをクリックすると、フリースペース編集のページが開きます。
下の図のように、水色の枠の中、いちばん左上にマウスでクリックします。そこで、マウスの右ボタンを押すと、小さな窓が開きます。
窓の中から、「貼り付け」を選んでください。
すると、下の図のように、記述が入ります。すべてが入っているかを確認しましょう。
<div id="headerMenu"><!--
から、
--></div>
まで入っていればＯＫです。途中で切れていないか確認します。
ただ、このままでは、「メニュー１」「メニュー２」と表されるだけです。あなたのブログの記事タイトルや、メニュー記事のタイトルにしなければなりません。
下の図では、太い赤枠で文字を変えています。「お肌が５歳若返る方法」「ピチピチお肌を取り戻す」などです。
メニューの文字を消して、あなたのお店ブログで使いたい名前にしましょう。
注意！このときに、記号を消さないように気をつけてくださいね。たとえば、><という記号を消してしまうと、ブログで表示されません。
書き換えましたら、ページの下にある「保存」ボタンを押して保存します。
では、ブログで確認してみましょう。ブログを見て見ると、メニューバーが入り、文字も変っていることが分かります。
まだ続きます。メニューバーの「お肌が５歳若返る方法」を押したら、「お肌が５歳若返る方法」のページを開けるようにするためです。
まだ、リンクをつけていませんので、これからリンクのつけ方をお話しします。
まず、あらかじめ書いてある「お肌が５歳若返る方法」のページを開きます。そこで、ブラウザの上に表示されているＵＲＬをクリックして、すべて選びます。
ＵＲＬはすべて選ばないといけません。青く反転させてから、マウスの右ボタンをクリックします。
小さな窓が開きますので、その中から「コピー」を選びましょう。下の図を見ながら勧めてくださいね。
つぎに、「フリースペース編集」のページを開きます。そこで、「お肌が５歳若返る方法」の行を見てください。
--><li><a href="#" target="_self">お肌が５歳若返る方法</a></li><!--
とありますね。この、# のところに、先ほどコピーしたＵＲＬを入れるのです。まず、# を消します。# だけを消してくださいね。
そうしたら、" と " の間にマウスでクリックし、カーソルを持っていきます。その状態で、マウスの右クリックをします。
小さな窓が開きますので、「貼り付け」を選びましょう。
すると、つぎのようになります。
--><li><a href="http://ameblo.jp/kaishirinri/entry-12068869390.html" target="_self">お肌が５歳若返る方法</a></li><!--
となります。ただし、貼り付けたところが間違っていないか注意します。よくあるのが、こんな間違いです。
--><li><a href=http://ameblo.jp/kaishirinri/entry-12068869390.html"" target="_self">お肌が５歳若返る方法</a></li><!--
と、"" の外に、ＵＲＬが入ってしまうこと。そのときには、もう一度やり直しましょう。
正解は、下の図です。
ほかのところも、同じように記事のページのＵＲＬをコピーして、フリースペース編集のページ内に入れていきます。
作業が終わったら、ブログでどのようになったのかを確認してみましょう。
メニューバーをクリックしたら、お目当てのページが開きます。はい、成功ですね。
また、「文字色を変えたい」とか「文字の太さを変えたい」、あるいは「オレンジ色ではなく、ピンク色や赤など他の色にしたい」という方もいますよね。
その場合、どこを変えればいいのかをカンタンに書いておきますので、参考にしてください。
下の図に、文字の色、文字の太さ、下線のありなし、背景の色について説明してあります。赤で書いているところがそうです。
文字の色は、# と英数字６桁で書かれています。白は、#ffffffです。黒は、#000000です。
文字の太さも変えることができます。普通のもじは、normalで書かれています。太くしたいときには、これをboldにすれば太くなります。
こちらに、メニューバーのサンプルをのせておきました。色違いや角を丸くしたりすることもできます。
枠の線を変えて、二重線にすると、違った印象にもなりますよね。それに、背景画像を用意しておけば、よりデザインされたブログに見せることもできます。
メニューバーの参考見本
また、背景の色を変えたいときには、色見本のサイトが参考になります。
たとえば、このようなサイトがありますよ。このサイトなら、色味組み合わせの見本を見ながらあなた好みの色がつくれますよ。
一つずつ図を使ったので長くなりましたが、すでにお店やお仕事の商品やサービスがある人。ブログにそれらの記事が書いてある方は、こうしたメニューバーを追加することもオススメですね。
メニューバーの入れ方やリンクのつけ方もマスターできますよ。
お仕事ブログのつくり方と基礎からサポート
営業時間：９時から２３時
定休日：不定休
山梨県甲府市千塚３－８－５
090-9310-1160
アメブロのはじめ方
お仕事ブログのつくり方と基礎からサポート
お客さまの声
お問い合わせ
メール satoshi.vw@gmail.com
電話 090-9310-1160
営業時間：９時から２３時
定休日：不定休
山梨県甲府市千塚３－８－５
090-9310-1160
アメブロのはじめ方
お仕事ブログのつくり方と基礎からサポート
お客さまの声
お問い合わせ
メール satoshi.vw@gmail.com
電話 090-9310-1160
初心者の方のための、お店やお仕事ブログづくりを基礎からお手伝い。アメブログのプロフィール写真のアップの方法。
記事への画像の入れ方。リンクのつけ方、問合せ申し込みフォームの入れ方、デザイン、カスタマイズをサポートします。