【保存版】アメブロのヘッダー＆メニューバーを自分でカスタマイズする方法

アメブロカスタマイズがオススメの職種

• パーソナルスタイリスト
• ヘアメイク
• アパレル関係
• フラワースタイリスト
• フードコーディネーター
• アクセサリー販売
• デザイナー(web、グラフィク、ファッション、絵本作家等)
• 結婚相談所
• 起業塾などのセミナー講師
• スピリチュアル系

旧CSSの特徴
→サイドバーに表示されるプロフィール写真が四角い。

• より凝ったアメブロデザインができる。
• メッセージを送るボタンがある。

新CSSの特徴
→ヘッダーの画像が大きい。

• サイドバーに表示されるプロフィール写真が丸い。
• TOPページの記事の表示方法を3つのパターンから選択可能。(標準型、リスト型、タイル型)

• 旧CSS：横980px × 縦300〜400px
• 新CSS：横1,120px× 縦400〜600px

※縦幅は自分で自由に決める事ができます。

• アメブロの基本設定のブログタイトル：検索エンジンを意識したキーワードでつける必要がある。
• ヘッダーに画像として入れるタイトル：検索エンジンは意識しなくても大丈夫。

旧CSS編集デザインでのアメブロのヘッダーとメニューバーの設置についてはnoteで書いています。

①デザインの設定

【アメブロ】マイページ→ブログ管理→デザインの設定 

■カテゴリから探すの中から”カスタム可能”を選びましょう。
「カスタム可能」デザイン一覧の中から、CSS編集用デザインを選んでください。

（※新CSSのデザインはこちらの3つになります。）

オススメは真ん中のタイプになります。

②カラム選択

■CSS編集用デザインを選んだら次はカラム選択です。

（※おすすめは2カラム右メニューです。）

適用するボタンを押して次へ。

③ヘッダーの設置

■CSSの編集
CSSの編集をクリックして進んでください。

■画像をアップロード
こちらにヘッダー画像をアップロードします。

■アップロードが完了すると・・・
アップロードが完了すると画像が表示されます。

④CSSの編集

このコードをコピペします

/* ▼▼▼ここからヘッダー画像の設定▼▼▼*/
/* ヘッダー画像を設置する */
.skin-bgHeader {
background: no-repeat scroll center top;
background-image: url(ヘッダー画像のURL);
} /* ヘッダーの高さを設定する */
.skin-bgHeader a {
height: 400px;
} /* ブログタイトルと説明文を消す */
.skin-headerTitle { display: none; }/*
▲▲▲ここまでヘッダー画像の設定▲▲▲*/

①上記コードをコピー。
　↓
②CSSの編集画面の1番下までスクロールして、最後に貼り付ける。
　↓
③STEP3でアップした“ヘッダー画像のパス”をコピーする。
　↓
④②で貼り付けたコードの中の“ヘッダー画像のURL”というところに”ヘッダー画像のパス”を貼り付ける。

　↓
⑤表示を確認するをクリックしてプレビュー画面を開き、きちんと設置ができているか確認。
(きちんと表示できていたらプレビュー画面は閉じでOKです。)
　↓
⑥緑色の保存ボタンをクリックする。
　↓
⑦ご自分のブログを開いてきちんと反映されているか確認。

※正しく設置が完了していても、キャッシュが残っていると古いものが表示されます。

櫻井圭子

古いものが表示された場合はキャッシュの削除をして更新ボタンを押して再度確認してくださいね。

• 初めましての方向けに、あなたを知ってもらうページ(プロフィール等)
• 仕事内容詳細について
• 現在ご提供中のメニュー一覧
• 今までの実績
• お問い合わせorお申し込みフォーム

①メニューバーのタグを挿入
フリースペースにHTMLタグを挿入しましょう。

設定・管理→フリースペース編集

■下記のタグをコピーしてフリースペースに貼り付けてください。

※改行しないでこのままコピペしてくださいね。

<div class="nav-menubar"><nav><ul class="nav-menu"><li><a href="リンク先のURL" target=""><span>プロフィール</span></a></li><li><a href="リンク先のURL" target="""><span>ブログ集客講座とは？</span></a></li><li><a href="リンク先のURL" target="""><span>講座一覧</span></a></li><li><a href="リンク先のURL" target="""><span>生徒さんの成果</span></a></li><li><a href="リンク先のURL" target="""><span>お問い合わせ</span></a></li></ul></nav></div>

フリースペース編集にHTMLタグを入れた後のイメージはこちら

こちらのコピペのタグは説明用のサンプルとして作っているものとなります。

実際に自分のブログに設置する場合は下記2点の作業が必要となります。

②CSSの編集

■デザインの設定→下にスクロールしてCSS編集

こちらのコードをコピペしてください。

/* ▼▼▼ここからメニューバーの設定▼▼▼*/
/* メニューバー基本 */
.nav-menubar {
position: absolute;
margin: 0;
padding: 0;
}
.skin-blogSubA, .skin-blogSubB {
position: relative;
}
.skin-columnB .skin-blogSubA .nav-menubar,
.skin-columnC .skin-blogSubA .nav-menubar,
.skin-columnE .skin-blogSubA .nav-menubar,
.skin-columnD .skin-blogSubB .nav-menubar {
left: auto;
right: 0;
}
.skin-columnA .skin-blogSubA .nav-menubar,
.skin-columnD .skin-blogSubA .nav-menubar,
.skin-columnC .skin-blogSubB .nav-menubar {
left: 0;
right: auto;
}
.skin-columnE .skin-blogSubB .nav-menubar {
left: auto;
right: -360px;
}
.nav-menu {
margin: 0;
padding: 0;
}
.nav-menu:after {
display: block;
clear: both;
content: "_";
height: 0;
visibility: hidden;
}

.nav-menu li {
display: block;
float: left;
margin: 0;
padding: 0;
text-align: center;
}
.nav-menu li a {
display: block;
text-decoration: none;
}
.nav-menu {
width: 1120px; /* メニューバーの横幅 */
background: #ff1493; /* メニューバーの背景色 */
font-weight:bold;  /*太字 */
}
.nav-menu li a {
width: 222px; /* メニューバー1つの横幅 */
line-height: 60px; /* メニューバーの高さ */
margin:0;  /*メニューの隙間*/
border:1px solid #ffffff;/*線の太さ 種類 色を指定[1px 直線 ]*/
color: #ffffff; /* 文字の色 [白]*/
}
.skin-bgHeader {
padding-bottom: 67px; /* メニューバーの表示場所確保 */
}
.nav-menubar {
top: -180px; /* メニューバーの上下位置調整 */
}

/* メニューバーのデザイン（マウスオーバー時） */
.nav-menu li a:hover{ /*カーソルが乗った時という意味*/
  color:#ffffff;     /*文字色(白)*/
  font-weight:bold;  /*太字 */
  text-decoration:underline;/*下線(あり)*/
  background-color:#ff69b4; /*背景色(薄いピンク)*/
}
/* ▲▲▲ここまでメニューバーの設定▲▲▲*/

①上記コードをコピー。
　↓
②CSSの1番最後に貼り付ける。
　↓
③表示を確認するをクリックしてプレビュー画面を開き、きちんと設置ができているか確認。
(きちんと表示できていたらプレビュー画面は閉じでOKです。)
　↓
④緑色の保存ボタンをクリックする。
　↓
⑤自分のブログを開いてきちんと反映されているか確認。

※正しく設置が完了していても、キャッシュが残っていると古いものが表示されます。(かなりの高確率で!)

古いものが表示された場合はキャッシュの削除をして更新ボタンを押して再度確認してくださいね。  

お好きな色を探すのはこちらのサイトがオススメです。
原色大辞典