こんにちは。ブランディングプロデューサーの櫻井圭子です。

起業してアメブロを始めると気になってくるのがヘッダーなどのデザイン面ですよね。
中身が重要と分かってはいても、どうしても外見も整えたくなるものです。
プロのデザイナーさんにお願いするには起業初期の段階では費用面でちょっときつい。
自分でヘッダーやメニューバーをカスタマイズしてアメブロをかわいくできる方法が知りたい!!
そう思ったことはありませんか?自分でおしゃれなデザインにできたら嬉しいですよね?
本日は【保存版】アメブロのヘッダー＆メニューバーを自分でカスタマイズする方法というテーマでお届けします。

自分でアメブロのカスタマイズをする方法!ヘッダーとメニューバー編

この記事の目次

1 アメブロカスタマイズの基本を理解しましょう
2 視覚効果で集客することがおすすめな職種
- 2.1 ヘッダーをオリジナルにカスタマイズした方が良い職種一覧
3 旧CSS編集デザインと新CSS編集デザインの違い
- 3.1 旧CSSと新CSSの違いは？
4 アメブロのヘッダーを自分でカスタマイズする方法
5 【実践】アメブロのヘッダーを設置
6 新CSS編集用デザインの設置方法
7 旧CSS編集用デザインの設置方法
8 メニューバーの設置に挑戦!
- 8.1 アメブロの中の道案内役
- 8.2 おすすめのリンク先
9 【実践】メニューバーを設置
10 新CSS編集用デザインでのメニューバーのカスタマイズ方法
11 旧CSS編集用デザインの設置方法
12 自分でアメブロをカスタマイズする方法のまとめ

アメブロカスタマイズの基本を理解しましょう

まずはアメブロの基本の説明をさせていただきますね。
ヘッダーやメニューバーのデザインをカスタマイズして反映されるのはパソコンから見た時だけになります。
スマホからはデザインが表示されません。
たまにスマホからでもヘッダー画像が表示されている人がいますが、それはAmebaオフィシャルブロガーの人です。
よく芸能人や有名人のアメブロで見かけますよね。
たまにオフィシャルブロガーでなくてもスマホでもヘッダーが表示されている方がいます。
裏技的な方法となりますが、自分がレンタルしているサーバーに画像やCSSを保存してデザインを表示するという方法が実はあるんです。
ただ、それはあまりにもリスクが大きく、なおかつ面倒で手間のかかる方法ですのでおすすめしません!!

視覚効果で集客することがおすすめな職種

アメブロカスタマイズをしたからといって必ず集客できる訳ではないということを理解してください。
ただ、職種によって必須となる方がいます。

ヘッダーをオリジナルにカスタマイズした方が良い職種一覧

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

この職種の共通点はおわかりになりましたか？
まずは、お客様のターゲットが女性である。
女性は感覚的な面があります。そして綺麗でかわいいものが大好きです。女性をターゲットとする職種においてはアメブロカスタマイズは必須となります。

次に、写真＞文字の仕事内容である。
これらの職種は長い文章で説明するよりも写真で一目で見せた方が分かりやすい職種です。特に、女性は文字を読むのが苦手ということを理解しておきましょう。
人はほとんどの物事を視覚情報から判断します。その中でも上記の職種はパッと一目でセンスを伝える事が大事な職種となります。
アメブロカスタマイズをする事で、「より自分を魅力的に見せることができる」良いブランディング方法となります。

旧CSS編集デザインと新CSS編集デザインの違い

アメブロをカスタマイズする時、まずはマイページでカスタム可能なテンプレートを選んでいただくのですが、その時選ぶテンプレートでカスタマイズ方法が違います。

・旧CSS編集デザイン
・新CSS編集デザイン

この2つです。

旧CSSと新CSSの違いは？

◆旧CSS
・サイドバーに表示されるプロフィール写真が四角い。
・より凝ったアメブロデザインができる。
・メッセージを送るボタンがある。

◆新CSS
・ヘッダーの画像が大きい。
・サイドバーに表示されるプロフィール写真が丸い。
・TOPページの記事の表示方法を3つのパターンから選択可能。(標準型、リスト型、タイル型)
・メッセージを送るボタンがない!!(これがマイナスポイント)

新CSSのアメブロデザインの問題として、TOPページにメッセージを送るボタンがないということがあります。
メッセージを送るには、プロフィール文の下の続きを見るをクリックして、その人のプロフィール画面を一度開く必要があるのです。この一手間面倒じゃないですか?
webの世界では1クリックするごとに離脱率(読者さんがあなたのアメブロからサヨナラしてしまう率)が上がります。その為、クリックの数はなるべく少ない方がいいのです。

旧CSS編集デザインと新CSS編集デザインのどちらがいいのかの結論です。
それぞれ良いところと、悪いところがあります。
よりデザインに凝りたい方は旧CSS編集デザインで。
ヘッダーを大きくしたい方は新CSSデザインで。

よくお客様にご質問されるのが、「今後アメブロの仕様変更で旧CSS編集デザインは廃止になるんじゃないですか?」とお聞きされます。

確かに今後は旧→新に徐々に移行し完全に旧デザインの方がなくなってしまう可能性は否定できませんね。
それはアメブロのデザイン面だけに限らず、仕様全体に言えます。ある日突然変わりますからね。笑
無料で使えるフリーブログはそこがイタイところです。私もそうですが、アメブロカスタマイズを仕事としているデザイナーさんは仕様変更の度にビクビクヒヤヒヤしています。笑

【結論】
旧デザインも新デザインもどちらもカスタマイズできるようになりましょう!!

アメブロのヘッダーを自分でカスタマイズする方法

では、早速アメブロの看板となるヘッダーを作っていきましょう!!

アメブロのヘッダーの役割

ヘッダーはあなたのアメブロの顔となる部分です。最も重要です!
実際のお店に例えると看板の役割となります。お店の看板には何が必要でしょうか?

・・・・・。

はい。正解発表です!!
アメブロのヘッダーに入れるものは、”あなたがどのような人で、何のサービス(仕事内容)を提供しているか”が一目で分かることが必要ですよね!!

まずはサイズを決めましょう

アメブロのヘッダーのサイズは横幅は旧デザインは980px、新デザインは1,120pxと決められています。
自分で自由に変更できるのは縦幅です。
芸能人のブログを見ているとドーンと大きなサイズのものが多いと感じたことはありませんか?
カッコイイからそれをそのまま真似してもいいと思いますか?

結論を申しますと、それではいけません。

アメブロも含めてwebページでは一目見た時(ファーストビュー)にどれだけ多くの情報量を与えられるかが重要となります。
ですので、ヘッダーの縦幅を大きくしすぎると一度に読者さんに与えられる情報量が少なくなってしまうのでおすすめできないのです。
おすすめの縦幅サイズは旧デザインは300px、新デザインは400pxです。

【アメブロのヘッダーのおすすめサイズ】
旧デザイン→980px(横)×300px(縦)
新デザイン→1,120px(横)×400px(縦)

ヘッダーに入れるタイトルと写真は？

「基本設定でつけるブログタイトルと、ヘッダーの中に画像として入れるタイトルは同じにした方がいいですか?」という質問をよくいただきます。

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

です!

ですので、全く同じにしなくても大丈夫ですよ!
検索エンジンには引っかからないご自分のキャッチコピーなどを入れて、仕事に対する想いや情熱を読者さんに伝える方法としても、ヘッダー画像をカスタマイズするのは良いブランディング方法です。

全く同じにしなくても大丈夫ですが、読者さんはあなたのブログをキーワードで検索してやってくる場合が多いです。その時、検索エンジン上で表示されたタイトルと、クリックしてリンクした先のアメブロのヘッダーのタイトルがあまりにも違っていたら違和感を感じてしまいます。そのあたりもきちんと頭に入れておきましょうね!

ヘッダーの中に入れる文字の情報としておすすめなものは、

・仕事内容が分かるブログタイトル
・人と会うお仕事の方は地域名
・サロンや店舗などで電話がある人は電話番号
・肩書きと名前
・キャッチコピー

です!!あくまで、一目で分かりやすいが基本となります。
ごちゃごちゃ入れすぎるとヘッダーの意味がなくなってしまいますので注意してくださいね。

写真はお仕事をイメージできる写真を入れるのがおすすめです。
お顔を出せる方は出した方がお客様からの信頼が高まります。
自分が1番綺麗に写っているからといって、ウェディング系のお仕事ではないのに、結婚式の写真やお見合い写真を使ったりしないでくださいね。笑
イメージが大事になりますので、証明写真のような堅すぎる写真もおすすめできません。

【実践】アメブロのヘッダーを設置

いよいよ設置しましょう!!
旧デザイン、新デザインそれぞれ解説させていただきますね。

新CSS編集用デザインの設置方法

なんとなく作ってみました。サクッと作ったわりには我ながら結構かわいいと思います。笑
ブログの英才教育を受けれる講座があったらお子様の将来はかなり有望かと思います。笑

①デザインの設定

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

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

※新CSSのデザインはこちらの3つになります。
お好きなものを選んでくださいね。オススメは真ん中のタイプになります。

②カラム選択

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

※おすすめは2カラム右メニューです。適用するボタンを押して次へ。

③ヘッダーの設置

CSS編集用デザインを選んだらいよいよヘッダーを設置する方法を説明しますね。

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

※間違えて、一度戻ってしまった方は、デザインの設定画面に戻りCSSの編集をクリックしましょう。

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

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

④CSSの編集

■そのまま下にスクロールしてCSSの編集画面へ。

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

/* ▼▼▼ここからヘッダー画像の設定▼▼▼*/

/* ヘッダー画像を設置する */

.skin-bgHeader {

background: no-repeat scroll center top;

background-image: url(ヘッダー画像のURL);

}

/* ヘッダーの高さを設定する */

.skin-bgHeader a {

height: 400px;

}

/* ブログタイトルと説明文を消す */

.skin-headerTitle {

display: none;

}/* ▲▲▲ここまでヘッダー画像の設定▲▲▲*/

①上記コードをコピー。

②CSSの1番最後に貼り付ける。

③先ほどアップしたヘッダー画像のパスをコピーする。

④②で貼り付けたコードの中の”ヘッダー画像のURL”というところに貼り付ける。

⑤表示を確認するをクリックして、プレビュー画面を開き、きちんと設置ができているか確認。
(きちんと表示できていたらプレビュー画面は閉じでOKです。)

⑥緑色の保存ボタンをクリックする。

⑦ご自分のブログを開いてきちんと反映されているか確認。
※正しく設置が完了していても、キャッシュが残っていると古いものが表示されます。(かなりの高確率で!)
古いものが表示された場合はキャッシュの削除をして更新ボタンを押して再度確認してくださいね。

この後は旧CSS編集用デザインのヘッダーの設置方法となりますので、新CSS編集用デザインの方はメニューバーの説明に進んでくださいね。

旧CSS編集用デザインの設置方法

さてさて、続いては旧デザインでの設置の方法をご紹介します。
基本的にはやることは同じですが、新CSS編集用デザインとは使っているタグとCSSが違います!!

今回は出版コンサルタントの星乃舞華さん(仮名)のアメブロをカスタマイズする例で説明させていただきますね!

①デザインの設定

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

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

※上にある3つのCSS編集用デザインは、新CSSとなります。

②カラム選択

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

※おすすめは新デザインと同じく2カラム右メニューです。適用するボタンを押して次へ。

③ヘッダーの設置

CSS編集用デザインを選んだらいよいよヘッダーを設置する方法を説明しますね。

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

※間違えて一度戻ってしまった方は、デザインの設定画面に戻りCSSの編集をクリックしましょう。

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

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

④CSSの編集

■そのまま下にスクロールしてCSSの編集画面へ。

※CSSコードと呼ばれる英数字がズラーっと並んでいます。

■CSSの記述の中で、/* (3-2) ブログヘッダーから始まるブログヘッダーの記述を見つけてください。

/* (3-2) ブログヘッダー
--------------------------------------------*/
/* skinHeaderArea ブログヘッダー980pxエリア */
.skinHeaderArea{
background-image: url(ヘッダー画像のURL);
background-repeat: no-repeat;
background-position: center bottom;
width: 980px;
height: 300px;
}/* ←ブログヘッダーに背景画像を敷きたいとき */
/* ブログタイトルとブログ説明文を消す */
#header h1,.skinTitleArea{ /* ブログタイトルを消す */
display:none;
}
#header h2,.skinDescriptionArea{ /* ブログ説明文を消す */
display:none;
}
/* ヘッダー画像をブログトップへのリンクにする */
.skinHeaderArea2,.skinBlogHeadingGroupArea{
padding:0;
}
#header h1,.skinTitleArea{
display:block;
padding:0;
text-indent:-9999px;
}
#header h1 a,.skinTitle{
display:block;
height:300px;
}

/* (3-2) ブログヘッダー

--------------------------------------------*/

/* skinHeaderArea ブログヘッダー980pxエリア */

.skinHeaderArea{

background-image: url(ヘッダー画像のURL);

background-repeat: no-repeat;

background-position: center bottom;

width: 980px;

height: 300px;

}/* ←ブログヘッダーに背景画像を敷きたいとき */

/* ブログタイトルとブログ説明文を消す */

#header h1,.skinTitleArea{ /* ブログタイトルを消す */

display:none;

}

#header h2,.skinDescriptionArea{ /* ブログ説明文を消す */

display:none;

}

/* ヘッダー画像をブログトップへのリンクにする */

.skinHeaderArea2,.skinBlogHeadingGroupArea{

padding:0;

}

#header h1,.skinTitleArea{

display:block;

padding:0;

text-indent:-9999px;

}

#header h1 a,.skinTitle{

display:block;

height:300px;

}

①上記コードをコピー。

②(3-2)の部分を、上記CSSのコードをコピぺして上書きしてください。

③先ほどアップしたヘッダー画像のパスをコピーする。

④②で貼り付けたコードの中の”ヘッダー画像のURL”というところに貼り付ける。

⑤表示を確認するをクリックして、プレビュー画面を開き、きちんと設置ができているか確認。
(きちんと表示できていたらプレビュー画面は閉じでOKです。)

⑥緑色の保存ボタンをクリックする。

メニューバーの設置に挑戦!

ヘッダーが完了したら次はメニューバーを設置しましょう!!
メニューバーとはヘッダーの下に表示されている横長のリンクボタンのことです。
今回の完成イメージはこちらです!!

【新CSS編集用デザインver】

【旧CSS編集用デザインver】

(↑この赤枠で囲んだ部分がメニューバーとなります。)

アメブロの中の道案内役

メニューバーをつけるとアメブロがホームページのようになってカッコいい!!
確かにこれがあるだけでプロっぽく見えてカッコいいです！
でも、ただカッコいいだけじゃないんですよ。メニューバーはあなたのアメブロの中の道案内の役割をしてくれます。
初めて訪れた人のブログってどこに何があるのか分からず勝手が悪いですよね。読者さんが迷わないように、きちんと誘導してあげましょう。

【実践】メニューバーを設置

では早速メニューバーの設置に挑戦してみましょう。
新CSS編集用デザインと旧CSS編集用デザインの両方で説明させていただきます。

新CSS編集用デザインでのメニューバーのカスタマイズ方法

①フリースペースの確保【新旧共通】

まずはフリースペースをアメブロのサイドバーに表示しましょう。
設定・管理→配置設定。

配置設定からフリースペースを使用する機能の方にドラッグしてくださいね。

②メニューバーのタグを挿入

次にフリースペースに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>

<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点の作業が必要となります。
・プロフィールなどのメニューバーの項目名をご自分のブログ用に変更。
・リンク先のURL1〜5の箇所を、リンクさせたいurlに変更。

③CSSの編集

続いて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; /*背景色(薄いピンク)*/
}
/* ▲▲▲ここまでメニューバーの設定▲▲▲*/

/* ▼▼▼ここからメニューバーの設定▼▼▼*/

/* メニューバー基本 */

.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番最後に貼り付ける。

⑥緑色の保存ボタンをクリックする。

旧CSS編集用デザインの設置方法

さてさて、続いては旧デザインでの設置の方法をご紹介します。
基本的にはやることは同じです。ただ貼り付けるHTMLタグやCSSが違いますのできちんとそれぞれに合っているものをコピペしてくださいね!!

①フリースペースの確保【新旧共通】

まずはフリースペースをアメブロのサイドバーに表示しましょう。
設定・管理→配置設定。

配置設定からフリースペースを使用する機能の方にドラッグしてくださいね。

②メニューバーのタグを挿入

次にフリースペースにHTMLタグを挿入しましょう。
設定・管理→フリースペース編集。

こちらのタグをコピーしてください。

<div id="menubar"><ul class="menu"><li><a href="リンクURL">プロフィール</a></li><li><a href="リンクURL">出版コンサルタントとは</a></li><li><a href="リンクURL">メニュー</a></li><li><a href="リンクURL">実績一覧</a></li><li><a href="リンクURL">お問い合わせ</a></li></ul></div>

1	<div id="menubar"><ul class="menu"><li><a href="リンクURL">プロフィール</a></li><li><a href="リンクURL">出版コンサルタントとは</a></li><li><a href="リンクURL">メニュー</a></li><li><a href="リンクURL">実績一覧</a></li><li><a href="リンクURL">お問い合わせ</a></li></ul></div>

※プレビューでサイドメニューにこのように表示されてたらOKです!

③CSSの編集

続いてCSS編集画面へ戻ります。

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

一番下までスクロールしてください。
/* その他、拡張があれば記述 */の下にこちらをコピペしてください。

/* ▼▼▼ここからメニューバーの設置▼▼▼ */
/* メニュー設置用スペース */
.skinContentsArea{
  padding-top:70px;
  position:relative;
}
/* メニューバーエリア */
#menubar{
  width:980px;     /* メニュー全体の幅 */
  position:absolute;
  margin:0;
  padding:0;
  top:0px;         /* 上下位置調整 */
  left:0px;        /* 左右位置調整 */
}
/* メニューリストのグループ */
#menubar ul.menu{
  margin:0;
  padding:0;
  list-style: none;
}
/* メニューリスト */
#menubar ul.menu li{
  display:block;
  float:left;
  margin:0;
  padding:0;
  text-align:center;
  width:194px;     /*ボタンの幅*/
  line-height:50px; /*ボタンの高さ*/
margin:0;  /*メニューの隙間*/
  border:1px solid #ffffff;/*線の太さ 種類 色を指定[1px 直線 ]*/
  background-color:#001e43;/*背景色[紺色]（通常時）*/
}
/* メニューバーのデザイン（通常） */
#menubar ul.menu li a{  /*通常時*/
  display:block;
  font-size:14px; /*ボタンの文字サイズ*/
  color:#ffffff;  /*文字色(白)*/
  font-weight:bold; /*太字*/
  text-decoration:none;/*下線(なし)*/
}

/* メニューバーのデザイン（マウスオーバー時） */
#menubar ul.menu li a:hover{ /*マウスオーバー時*/
  color:#ffffff;    /*文字色(白)*/
  font-weight:bold; /*太字*/
  text-decoration:underline;/*下線(あり)*/
  background-color:#e3adc1; /*背景色(薄いピンク)*/
}
/* ▲▲▲ここまでメニューバーの設置▲▲▲ */

/* ▼▼▼ここからメニューバーの設置▼▼▼ */

/* メニュー設置用スペース */

.skinContentsArea{

padding-top:70px;

position:relative;

}

/* メニューバーエリア */

#menubar{

width:980px; /* メニュー全体の幅 */

position:absolute;

margin:0;

padding:0;

top:0px; /* 上下位置調整 */

left:0px; /* 左右位置調整 */

}

/* メニューリストのグループ */

#menubar ul.menu{

margin:0;

padding:0;

list-style: none;

}

/* メニューリスト */

#menubar ul.menu li{

display:block;

float:left;

margin:0;

padding:0;

text-align:center;

width:194px; /*ボタンの幅*/

line-height:50px; /*ボタンの高さ*/

margin:0; /*メニューの隙間*/

border:1px solid #ffffff;/*線の太さ種類色を指定[1px 直線 ]*/

background-color:#001e43;/*背景色[紺色]（通常時）*/

}

/* メニューバーのデザイン（通常） */

#menubar ul.menu li a{ /*通常時*/

display:block;

font-size:14px; /*ボタンの文字サイズ*/

color:#ffffff; /*文字色(白)*/

font-weight:bold; /*太字*/

text-decoration:none;/*下線(なし)*/

}

/* メニューバーのデザイン（マウスオーバー時） */

#menubar ul.menu li a:hover{ /*マウスオーバー時*/

color:#ffffff; /*文字色(白)*/

font-weight:bold; /*太字*/

text-decoration:underline;/*下線(あり)*/

background-color:#e3adc1; /*背景色(薄いピンク)*/

}

/* ▲▲▲ここまでメニューバーの設置▲▲▲ */

①上記コードをコピー。

②CSSの1番最後に貼り付ける。

⑥緑色の保存ボタンをクリックする。

【応用】メニューバーの色を自分好みに変更してデザインを完成させよう

こちらのサンプルでは、通常時が紺色、マウスをあてた時に薄いピンク色に変化して下線(アンダーライン)が出るようにしています。
ご自分のブログに合ったお好みの色に変更してくださいね。

■通常時のメニューバーの色の変更はこの部分

■マウスをあてた時に変化する色の変更はこの部分

#ffffffや#e3adc1などが色を指定するコードになります。
変更する方法は、#より後ろの英数字を変更します。
その時、#を消さないように中止してくださいね。
お好きな色を探すのはこちらのサイトがオススメです。
原色大辞典

CSSを理解してもっと自分の好みのデザインにアメブロカスタマイズ

色を変更することができた方は、線の太さや種類も変更してみましょう!!

例えばこんな感じで、よりボタンっぽいデザインはどうでしょうか?

このメニューバーは先ほどコピペしたCSSのここの部分を変更しています。

線の種類や太さを変更して自分好みのデザインにしてみてくださいね。

【CSSコードの意味】
border：線の太さ、種類、色を指定
・線の種類
→solid…直線／double…二重線／dashed…破線／dotted…水玉線

今回の応用編では旧CSS編集用デザインについてご説明させていただきましたが、新CSS編集用デザインのカスタマイズの応用編も随時追加させていただきたいと思います!!

自分でアメブロをカスタマイズする方法のまとめ

◆CSSやHTMLタグは1文字でも消してしまったり、余計なスペースが入っていると正しく表示されません。
◆間違えて消してしまわないように、編集をする前にバックアップを取っておきましょう。
◆アメブロカスタマイズの基本はヘッダーとメニューバーを設置する方法から覚えましょう。

というわけで、本日は【保存版】アメブロのヘッダー＆メニューバーを自分でカスタマイズする方法というテーマでお届けさせていただきました。

本日も最後までお読みいただき、ありがとうございました。

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

自分でアメブロのカスタマイズをする方法!ヘッダーとメニューバー編

アメブロカスタマイズの基本を理解しましょう

視覚効果で集客することがおすすめな職種

ヘッダーをオリジナルにカスタマイズした方が良い職種一覧

旧CSS編集デザインと新CSS編集デザインの違い

旧CSSと新CSSの違いは？

アメブロのヘッダーを自分でカスタマイズする方法

アメブロのヘッダーの役割

まずはサイズを決めましょう

ヘッダーに入れるタイトルと写真は？

おすすめ無料デザインソフト

【実践】アメブロのヘッダーを設置

新CSS編集用デザインの設置方法

①デザインの設定

②カラム選択

③ヘッダーの設置

④CSSの編集

旧CSS編集用デザインの設置方法

①デザインの設定

②カラム選択

③ヘッダーの設置

④CSSの編集

メニューバーの設置に挑戦!

アメブロの中の道案内役

おすすめのリンク先

【実践】メニューバーを設置

新CSS編集用デザインでのメニューバーのカスタマイズ方法

①フリースペースの確保【新旧共通】

②メニューバーのタグを挿入

③CSSの編集

旧CSS編集用デザインの設置方法

①フリースペースの確保【新旧共通】

②メニューバーのタグを挿入

③CSSの編集

【応用】メニューバーの色を自分好みに変更してデザインを完成させよう

CSSを理解してもっと自分の好みのデザインにアメブロカスタマイズ

自分でアメブロをカスタマイズする方法のまとめ

コメント

関連記事

CSSのコピペで見出しをかわいい...

プロフィール

人気の記事

最近の投稿

カテゴリー

免責事項