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

起業してアメブロを始めると気になってくるのがヘッダーなどのデザイン面ですよね。

記事の中身が重要と分かってはいても、どうしても外見もかわいく整えたい!
でも、プロのデザイナーさんにお願いするには起業初期の段階では費用面でちょっときつい。
櫻井圭子
それなら、自分でヘッダーやメニューバーをカスタマイズしてアメブロをかわいくしましょう♪

 

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

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

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

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

ヘッダーやメニューバーのデザインをカスタマイズして反映されるのはパソコンから見た時だけになります。

スマホからはデザインが表示されません。

たまにスマホからでもヘッダー画像が表示されている人がいますが、それは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で書いています。

 【アメブロカスタマイズ】自分でヘッダー、メニューバーを作る(旧CSS)

 

アメブロのヘッダーの設置方法

今回はこちらのヘッダー画像を例に設置の説明をさせていただきます。

①デザインの設定

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

■カテゴリから探すの中から”カスタム可能”を選びましょう。
「カスタム可能」デザイン一覧の中から、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です。)
 ↓
⑥緑色の保存ボタンをクリックする。
 ↓
⑦ご自分のブログを開いてきちんと反映されているか確認。

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

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

 

 

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

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

今回の完成イメージはこちらです!!

(↑ヘッダーの下に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に変更。

②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などが色を指定するコードになります。
変更する方法は、#より後ろの英数字を変更します。
その時、#を消さないように中止してくださいね。

参考

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

 

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

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

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

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

関連記事

コメント

  1. 初めまして、ハルミと申します。
    メニューバーの作成に対して教えてください。
    既に簡単なメニューバーを作成しております。

    新しく作成しようと思いこちらの作成の仕方を参考に
    実行してみましたが、新しく作成したものも、
    既に作成しているバーも消えてしまいます。

    css編集で既存のコードを削除し新たにコードを貼り付けてまたり、
    色々試しましたが作成する事ができません。

    何がいけないのか訳すらわからない状態です。
    出来ましたらメールでご連絡頂けないでしょうか?

    ご連絡頂けましたら幸いです。
    よろしくお願い致します。

  2. You need to be a part of a contest for one of the greatest
    sites online. I am going to highly recommend this blog!

  3. Excellent article. Keep writing such kind of info on your blog.
    Im really impressed by it.
    Hello there, You have done an incredible job.

    I will certainly digg it and for my part suggest
    to my friends. I’m sure they will be benefited from this site.

  4. アメブロの背景画像とメニューバーの表示、記事を参考にさせて頂きました。
    問題なくできました。
    ありがとうございます。

PAGE TOP