ヘッダーメニューを設置してみよう。［新デザイン対応］

ご訪問ありがとうございます。
ブログランキングの応援
をして頂けると励みになります。

ここをクリックしてくださいね。

昨日、背景画像も設定できたので、
今回は、ヘッダーメニューを設置してみましょう。

ただし、ここでの内容は、新デザインの［ＣＳＳ編集用デザイン］で、
ヘッダーメニューを設置する方法ですので、
間違わないでくださいね。

なお、旧デザイン用のヘッダーメニューの設置方法については、
次の記事を御覧ください。
↓↓↓
アメブロヘッダーメニューの設置について

【１】ヘッダーメニュー画像の作成

まず、無料画像編集ソフトgimpを使用して、
ヘッダーメニュー画像を作成します。

私は、次の画像を作ってみました。

この画像を任意のフォルダに保存します。

【２】フリースペースの編集

①［マイページ］→［クイックリンク］→［フリースペースの編集］の順に
クリックし、フリースペース編集画面を表示します。

②下記のCSSをコピーし、①のフリースペース編集画面に
貼り付けます。

③フリースペースを保存します。

【３】ヘッダーメニュー画像のアップロード

①［マイページ］→［クイックリンク］→［スキンCSSの編集］の順にクリックし、
CSS編集画面を表示します。

②[ブログデザインヘッダ・背景用画像の追加]の[参照]をクリックし、
上記【１】で保存したヘッダーメニュー画像を開き、
［アップロード］ボタンをクリックして、画像をアップロードします。

【４】画像のURLをメモ帳にコピー

アップロードされた画像から、画像を選択して、
下記の赤枠内の画像のURLをメモ帳にコピーします。

【５】ＣＳＳの追加

下記のCSSをコピーし、
上記【２】①のCSS編集画面の一番最後の続きに追加（貼り付け）します。

ただし、このCSSは、私用なので、数字の箇所は、各自でご自分用に
なおす必要があります。

/* ■ヘッダーメニュー■ */
.skinContentsArea {
position:relative;
padding-top:60px;
}
ul#gnavi {
position :absolute;
top :0px; /* 基点topからの距離 */
left: 0px;/* 基点leftからの距離 */
width :980px; /* ヘッダーメニューの幅 */
}
ul#gnavi li {
float :left;
}
ul#gnavi li a {
display :block;
height :50px; /* ヘッダーメニューの高さ */
width :196px; /* ヘッダーメニューの１つの幅 */
background :url(画像のURL) no-repeat;
}
ul#gnavi li a span {
display :block;
text-indent :-9999px; /* テキストの非表示*/
}
/* ヘッダーメニュー1 */
ul#gnavi li.menu1 a {
background-position:0 0;
}
ul#gnavi li.menu1 a:hover {
background-position:0 -50px;
}
/* ヘッダーメニュー2 */
ul#gnavi li.menu2 a {
background-position:-196px 0;
}
ul#gnavi li.menu2 a:hover {
background-position:-196px -50px;
}
/* ヘッダーメニュー3 */
ul#gnavi li.menu3 a {
background-position:-392px 0;
}
ul#gnavi li.menu3 a:hover {
background-position:-392px -50px;
}
/* ヘッダーメニュー4 */
ul#gnavi li.menu4 a {
background-position:-588px 0;
}
ul#gnavi li.menu4 a:hover {
background-position:-588px -50px;
}
/* ヘッダーメニュー5 */
ul#gnavi li.menu5 a {
background-position:-784px 0;
}
ul#gnavi li.menu5 a:hover {
background-position:-784px -50px;
}

【６】CSS編集画面でヘッダー画像のURLを入力します。

上記【４】でメモ帳にコピーした画像のURLを
上記【５】の画像のURLの部分と置換えます。

【７】表示の確認

ここまでできたら、下方へスクロールして、［表示を確認する］をクリックし、
ヘッダーメニュー画像がいい具合に表示されるかどうかご確認ください。

【８】CSSの保存

これで、OKなら、元のページに戻り、［保存］ボタンをクリックします。

これで、ブログは、次のようになりました。
下図の赤枠内が今回設置したヘッダーメニューです。

今回は、以上です。

最後まで読んでいただき、
ありがとうございました。

ブログランキングの
応援クリックをお忘れの方は、
ここをクリックしてくださいね。

クリックして戴けると、
とても励みになります。