MENU
  1. ホヌム
  2. アメブロ
  3. カスタマむズ
  4. 【保存版】アメブロのヘッダヌメニュヌバヌを自分でカスタマむズする方法

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

カスタマむズ
2018幎10月12日

起業しおアメブロを始めるず気になっおくるのがヘッダヌなどのデザむン面ですよね。

蚘事の䞭身が重芁ず分かっおはいおも、どうしおも倖芋もかわいく敎えたい
でも、プロのデザむナヌさんにお願いするには起業初期の段階では費甚面でちょっずき぀い。
櫻井圭子
それなら、自分でヘッダヌやメニュヌバヌをカスタマむズしおアメブロをかわいくしたしょう♪

 

自分でおしゃれなデザむンにできたら嬉しいですよね

本日は【保存版】アメブロのヘッダヌメニュヌバヌを自分でカスタマむズする方法ずいうテヌマでお届けしたす。

目次

アメブロカスタマむズの基本

たずはアメブロの基本の説明をさせおいただきたすね。

ヘッダヌやメニュヌバヌのデザむンをカスタマむズしお反映されるのはパ゜コンから芋た時だけになりたす。

スマホからはデザむンが衚瀺されたせん。

たたにスマホからでもヘッダヌ画像が衚瀺されおいる人がいたすが、それはAmebaオフィシャルブロガヌの人です。

 

芖芚効果で集客するこずがおすすめな職皮

アメブロカスタマむズをしたからずいっお必ず集客できる蚳ではありたせん。

ただ、職皮によっお必須ずなる方がいたす。

アメブロカスタマむズがオススメの職皮

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

 

この職皮の共通点はおわかりになりたしたか

たずは、お客様のタヌゲットが女性である。

女性は感芚的な面がありたす。そしお綺麗でかわいいものが倧奜きです。
女性をタヌゲットずする職皮においおはアメブロカスタマむズは必須ずなりたす。

次に、写真文字の仕事内容である。

これらの職皮は長い文章で説明するよりも写真で䞀目で芋せた方が分かりやすい職皮です。

人はほずんどの物事を芖芚情報から刀断したす。
特に、女性は文字を読むのが苊手な人が倚いです

その䞭でも䞊蚘の職皮はパッず䞀目でセンスを䌝える事が倧事な職皮ずなりたす。

アメブロカスタマむズをする事で、「より自分を魅力的に芋せるこずができる」良いブランディング方法ずなりたす。

 

旧CSS線集デザむンず新CSS線集デザむンの違い

アメブロをカスタマむズする時、たずはマむペヌゞでカスタム可胜なテンプレヌトを遞んでいただきたす。

その時遞ぶテンプレヌトでカスタマむズ方法が違いたす。

  • 旧CSS線集デザむン
  • 新CSS線集デザむン

この2぀です。

旧CSSず新CSSの違いは

旧CSSの特城
→サむドバヌに衚瀺されるプロフィヌル写真が四角い。

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

 

新CSSの特城
→ヘッダヌの画像が倧きい。

  • サむドバヌに衚瀺されるプロフィヌル写真が䞞い。
  • TOPペヌゞの蚘事の衚瀺方法を3぀のパタヌンから遞択可胜。(暙準型、リスト型、タむル型)

 

櫻井圭子
より现かいデザむンたで凝りたい方は旧CSS線集デザむンで。
ヘッダヌを倧きく堂々ずした感じに芋せたい方は新CSSデザむンで。
今埌、アメブロの仕様倉曎で旧CSS線集デザむンは廃止になるんじゃないですか?
櫻井圭子
確かに今埌は旧→新に埐々に移行し完党に旧デザむンの方がなくなっおしたう可胜性は吊定できたせんね。

 

それはアメブロカスタマむズだけに限りたせん

仕様倉曎はより良いものにする為の倉化ですので必ず起こりたす。

 

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

では、早速アメブロの看板ずなるヘッダヌを䜜っおいきたしょう!!

アメブロのヘッダヌの圹割

ヘッダヌはあなたのアメブロの顔ずなる郚分であり、最も重芁です!

実際のお店に䟋えるず看板の圹割ずなりたす。

お店の看板には䜕が必芁でしょうか? ・・・・・。

正解は・・・。

“あなたがどのような人で、䜕のサヌビス(仕事内容)を提䟛しおいるか”が䞀目で分かるこずです

たずはサむズを決めたしょう

ヘッダヌのオススメサむズ

  • 旧CSS暪980px × 瞊300〜400px
  • 新CSS暪1,120px× 瞊400〜600px

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

 

アメブロも含めおwebペヌゞでは䞀目芋た時ファヌストビュヌにどれだけ倚くの情報量を䞎えられるかが重芁ずなりたす。

ですので、ヘッダヌの瞊幅を倧きくしすぎるず䞀床に読者さんに䞎えられる情報量が少なくなっおしたいたす。

芞胜人のブログのように、瞊幅が画面䞀杯の倧きなブログはカッコいいのですが、ビゞネス向けのブログは皋々の瞊幅がオススメです

 

ヘッダヌに入れるタむトルず写真は

ヘッダヌに入れるタむトルで悩んでいお・・・。
アメブロの基本蚭定で぀けるブログタむトルず、ヘッダヌの䞭に入れるタむトルは同じにした方がいいですか?
櫻井圭子
䞞っ切り同じじゃなくおも倧䞈倫ですよ

 

  • アメブロの基本蚭定のブログタむトル怜玢゚ンゞンを意識したキヌワヌドで぀ける必芁がある。
  • ヘッダヌに画像ずしお入れるタむトル怜玢゚ンゞンは意識しなくおも倧䞈倫。

 

ヘッダヌの䞭に入れるタむトルやキャッチコピヌは、怜玢゚ンゞンにはひっかからないけど倧切にしおいる仕事ぞの想いを入れたしょう

 

 

党く同じにしなくおも倧䞈倫ですが、読者さんがあなたのブログに怜玢キヌワヌドでやっおきた堎合・・・。

怜玢゚ンゞン䞊で衚瀺されたタむトルず、クリックしお衚瀺されたアメブロのヘッダヌのタむトルがあたりにも違っおいたら違和感を感じおしたいたす。

違和感がないくらいの違いにしおおきたしょう。

ヘッダヌの䞭に入れる文字の情報ずしおおすすめなものは、

  • 仕事内容が分かるブログタむトル
  • 人ず䌚う仕事の方は地域名
  • サロンや店舗などで電話がある人は電話番号
  • 肩曞きず名前
  • キャッチコピヌ

です!!

あくたで、䞀目で分かりやすいが基本ずなりたす。
ごちゃごちゃ入れすぎるずヘッダヌの意味がなくなっおしたいたすので泚意しおくださいね。

写真は仕事内容をむメヌゞできる写真を入れるのがおすすめです。
お顔を出せる方は出した方がお客様からの信頌が高たりたす。

自分が1番綺麗に写っおいるからずいっお、りェディング系のお仕事ではないのに、結婚匏の写真やお芋合い写真を䜿ったりしないでくださいね。笑

むメヌゞが倧事になりたすので、蚌明写真のような堅すぎる写真もおすすめできたせん。

 

おすすめ無料デザむン゜フト

  • ヘッダヌのおすすめサむズの確認OK!
  • 䞭に入れるブログタむトルOK!
  • 写真も準備OK!

党おの準備が敎ったら、早速ヘッダヌを䜜っおみたしょう。

いざ䜜ろうず思ったけど実際どうやっお画像を䜜るの

 

プロのデザむナヌでしたらPhotoshop(フォトショップ)ずいう゜フトを䜿いたすが、䞀般の人が䜿うにはちょっずハヌドルがめです。

䞀般の人が自分のアメブロ甚にカスタマむズする堎合は、お金をかけずに無料で䜿えるデザむン゜フトを䜿うのがおすすめです!

最近の䞀抌しはCanvaですプロが䜜ったおしゃれなテンプレが最初から揃っおいたすので誰でも簡単にヘッダヌを䜜る事ができたす。

Canva以倖の無料デザむン゜フトに぀いおは無料で䜿える画像・写真線集のフリヌ゜フトおすすめ8遞ずいう蚘事をご芧になっおくださいね。

無料ですが、簡単な加工をする分には十分な機胜が備わっおいる゜フトを倚数玹介しおいたす。

蚘事内で詳しく説明させおいただいおたすが、デザむン゜フトを遞ぶ時は、より人気のあるものを遞ぶ方が販売されおいる入門テキストやむンタヌネット䞊で無料で芋れる解説サむトが倚くなりたす。

デザむン゜フトを決める時は、その蟺も考慮しおくださいね。

 

【実践】アメブロのヘッダヌを蚭眮

では、いよいよ蚭眮したしょう

今回は新CSS線集デザむンの堎合で解説させおいただきたすね。

旧CSS線集デザむンでのアメブロのヘッダヌずメニュヌバヌの蚭眮に぀いおはnoteで曞いおいたす。

[wp-svg-icons icon=”link” wrap=”span”] 【アメブロカスタマむズ】自分でヘッダヌ、メニュヌバヌを䜜る旧CSS

 

アメブロのヘッダヌの蚭眮方法

今回はこちらのヘッダヌ画像を䟋に蚭眮の説明をさせおいただきたす。

①デザむンの蚭定

【アメブロ】マむペヌゞ→ブログ管理→デザむンの蚭定 

■カテゎリから探すの䞭から”カスタム可胜”を遞びたしょう。
「カスタム可胜」デザむン䞀芧の䞭から、CSS線集甚デザむンを遞んでください。

※新CSSのデザむンはこちらの3぀になりたす。

オススメは真ん䞭のタむプになりたす。

[wp-svg-icons icon=”arrow-down” wrap=”span”]

②カラム遞択

■CSS線集甚デザむンを遞んだら次はカラム遞択です。

※おすすめは2カラム右メニュヌです。

適甚するボタンを抌しお次ぞ。

[wp-svg-icons icon=”arrow-down” wrap=”span”]

③ヘッダヌの蚭眮

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

 

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

 

■アップロヌドが完了するず・・・
アップロヌドが完了するず画像が衚瀺されたす。

[wp-svg-icons icon=”arrow-down” wrap=”span”]

④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です。)
　↓
⑥緑色の保存ボタンをクリックする。
　↓
⑊ご自分のブログを開いおきちんず反映されおいるか確認。

※正しく蚭眮が完了しおいおも、キャッシュが残っおいるず叀いものが衚瀺されたす。

櫻井圭子
叀いものが衚瀺された堎合はキャッシュの削陀をしお曎新ボタンを抌しお再床確認しおくださいね。

 

 

メニュヌバヌの蚭眮に挑戊!

ヘッダヌが完了したら次はメニュヌバヌを蚭眮したしょう!!
メニュヌバヌずはヘッダヌの䞋に衚瀺されおいる暪長のリンクボタンのこずです。

今回の完成むメヌゞはこちらです!!

(↑ヘッダヌの䞋に5぀䞊んだバタンがメニュヌバヌずなりたす。)

 

アメブロの䞭の道案内圹

メニュヌバヌを぀けるずアメブロがホヌムペヌゞのようになっおカッコいい!!
櫻井圭子
確かにこれがあるだけでプロっぜく芋えおカッコいいです
でも、ただカッコいいだけじゃないんですよ

 

メニュヌバヌはあなたのアメブロの䞭の道案内の圹割をしおくれたす。

初めお蚪れたブログでも、読者さんが迷わないようにきちんず誘導しおあげたしょう。

 

おすすめのリンク先

メニュヌバヌの䞭のおすすめのリンク先ですが、読者さんが興味を持぀だろうペヌゞにするのがおすすめです。

それず同時にあなたが芋お欲しいペヌゞを戊略的に逆算しお蚭眮するように考えたしょう。

メニュヌバヌにオススメ

  • 初めたしおの方向けに、あなたを知っおもらうペヌゞ(プロフィヌル等)
  • 仕事内容詳现に぀いお
  • 珟圚ご提䟛䞭のメニュヌ䞀芧
  • 今たでの実瞟
  • お問い合わせ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点の䜜業が必芁ずなりたす。

倉曎する事

  • プロフィヌルなどのメニュヌバヌの項目名を、自分のブログ甚に倉曎。
  • リンク先のURL1〜5の箇所を、リンクさせたいurlに倉曎。

[wp-svg-icons icon=”arrow-down” wrap=”span”]

②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です。)
　↓
④緑色の保存ボタンをクリックする。
　↓
⑀自分のブログを開いおきちんず反映されおいるか確認。

※正しく蚭眮が完了しおいおも、キャッシュが残っおいるず叀いものが衚瀺されたす。(かなりの高確率で!)

叀いものが衚瀺された堎合はキャッシュの削陀をしお曎新ボタンを抌しお再床確認しおくださいね。  

 

【応甚】メニュヌバヌの色を自分奜みに倉曎しおデザむンを完成させよう

こちらのサンプルでは、通垞時がピンク、マりスをあおた時に薄いピンク色に倉化しお䞋線(アンダヌラむン)が出るようにしおいたす。

ご自分のブログに合ったお奜みの色に倉曎しおくださいね。

アメブロのメニュヌバヌの色の倉曎方法

①通垞時のメニュヌバヌの背景色
②通垞時のメニュヌバヌの文字色
③マりスをのせた時のメニュヌバヌの背景色
④マりスをのせた時のメニュヌバヌの文字色

#ffffffや#e3adc1などが色を指定するコヌドになりたす。
倉曎する方法は、#より埌ろの英数字を倉曎したす。
その時、#を消さないように䞭止しおくださいね。

[wp-svg-icons icon=”file-2″ wrap=”span”] 参考

お奜きな色を探すのはこちらのサむトがオススメです。
[wp-svg-icons icon=”link” wrap=”span”] 原色倧蟞兞

 

自分でアメブロをカスタマむズする方法のたずめ

  • CSSやHTMLタグは1文字でも消しおしたったり、䜙蚈なスペヌスが入っおいるず正しく衚瀺されたせん。
  • 間違えお消しおしたった時に慌おないように、線集をする前にバックアップを必ず取っおおきたしょう。
  • アメブロカスタマむズの基本はヘッダヌずメニュヌバヌを蚭眮する方法から芚えたしょう。

本日は【保存版】アメブロのヘッダヌメニュヌバヌを自分でカスタマむズする方法ずいうテヌマでお届けさせおいただきたした。

最埌たでお読みいただき、ありがずうございたした。

カスタマむズ
アメブロ かわいいデザむン アメブロカスタマむズ デザむン

この蚘事が気に入ったら
いいね たたは フォロヌしおね

Follow Me
よかったらシェアしおね
  • URLをコピヌしたした
  • URLをコピヌしたした

この蚘事を曞いた人

櫻井圭子のアバタヌ 櫻井圭子

䞖界芳を目に芋える圢にする、䌝える、届ける
起業家、フリヌランスのためのブランディングずWEB集客。
【デザむン】ず【SEO察策に匷いブログの曞き方】の䞡方をカバヌ出来るこずが匷みです。

女性らしい綺麗でかわいい䞖界芳䜜り、ブランディング蚭蚈、デザむンに特化

ブランディングデザむンWEB集客SEO

関連蚘事

コメント

コメント䞀芧 7件

コメントする

このサむトはスパムを䜎枛するために Akismet を䜿っおいたす。コメントデヌタの凊理方法の詳现はこちらをご芧ください。

目次