【アメブロカスタマイズ】メニューバーを設置しておしゃれな外観にする方法

当ページのリンクには広告が含まれています。

芸能人や著名人などの有名ブロガーをはじめ、女性起業家の間でも大変人気のアメーバブログ。無料で利用することができ、月間利用者数は7500万人に登るほど多くの人に愛用されています。WordPressよりも複雑でなく、操作がしやすい点も人気の理由の1つ。アメブロを趣味で利用されている方も多いですが、最近は女性起業家の方の集客ツールの1つとしても活用されています。

そんなアメブロですが、既存の可愛いテンプレートもたくさんありますが、最近は自分だけのオリジナルデザインにアメブロをカスタマイズしている方もたくさんいらっしゃいますね。今回はそんなアメブロにメニューバーを設置しておしゃれな外観にする方法をご紹介します。

ゆりかご

ココナラプロ認定・現役Web・グラフィックデザイナーが解説します!

目次

アメブロカスタマイズとは

アメブロカスタマイズは、通常の既存テンプレートを使用するのではなく、CSS編集可能なテンプレートを使用しオリジナルデザインにカスタマイズすることを指します。アメブロカスタマイズはパソコン専用のカスタマイズとなり、スマホで見た際は表示されませんのでその点はご注意ください。

今回ご紹介するのはメニューバーを設置する方法となりますが、こちらは既にアメブロにヘッダー画像が設置されている方向けの内容となります。

  • まだアメブロにオリジナルのヘッダー画像を設置していない
  • アメブロにまずはヘッダー画像を設置したい

という方は、下記の記事でアメブロヘッダーの設置方法の手順について詳しく説明しているので先にチェックしてみてください。

アメブロカスタマイズのメニューバーとは

アメブロカスタマイズメニューバー事例

アメブロカスタマイズのメニューバーはグローバルナビゲーションと呼ばれることもあります。どちらも意味は同じですが、ヘッダー画像の下にあるメニューのことを指します。クリックすると、各リンク先に移動することができ、プロフィールや、ご自身のホームページ、SNSなどへユーザーを誘導させることができます。

アメブロカスタマイズのメニューバーを設置しておしゃれな外観にする方法

アメブロカスタマイズのメニューバーを設置する方法をご紹介します。大きく分けて、メニューバーは2種類存在します。

  • 背景の色と文字色だけが指定できるシンプルなメニューバー
  • フォントやデザインにもこだわれる、画像を使った華やかなメニューバー

今回は特にデザインにこだわりたい方向けに、フォントやデザインにもこだわれる画像を使った華やかなメニューバーの設置方法をご説明していきます。画像作成は、私は通常Illustrator(イラストレーター)を使用して作成しておりますが、今回はどなたでも無料で作成できるCanvaのツールを使って作成いたします。

ここから先は、既にアメブロをCSS編集可能なテンプレートに変更しており、ヘッダー画像を設置済みの方に向けた内容となります。これらをまだされていない方が下記の方法に進みますと、アメブロの表示が崩れてしまいますのでご注意ください。

▼まだの方はこちらをチェック

ゆりかご

デザインは自由に決めることができるので、自分だけのオリジナルのメニューバーを作成していきましょう。

1.Canvaでのメニューバーのボタンを作成をしよう

最初に、Canvaでのメニューバーのボタン作成の手順をご紹介いたします。

①Canvaのページにログインし、右上にある「デザイン作成」をクリック

canvaを使ったメニューバーのボタン作成の手順

出典:Canva公式サイト

②「カスタムサイズ」をクリックし幅224px 高さ70pxを入力

canvaを使ったメニューバーのボタン作成の手順2

③「テキスト」をクリック→「テキストボックスを追加」→項目にしたいテキストを入力します。
今回は英語と日本語を両方入れましたが、日本語だけでも大丈夫です。(英語のみだとぱっと見でわからないことがあるためできれば日本語は入れる方がおすすめです)

canvaを使ったメニューバーのボタン作成の手順3
ゆりかご

ちなみに英語は「Parisienne」、日本語は「マティス」のフォントを使用したよ!


④次に背景を入れていきます。「写真」をクリック→検索窓に「ピンク」と入力→お好みの素材を背景に敷きます。(ピンクと入れたのは例です。好きなモチーフで検索してくださいね)

canvaを使ったメニューバーのボタン作成の手順4


⑤次に画像の区切り線をつけていきます。「素材」をクリック→検索窓で「線」をクリック→直線か点線の素材を選択し、ボタンの右側から少し開けた位置に配置します。これでメニューバーのボタンが1つ完成しました。

canvaを使ったメニューバーのボタン作成の手順5


⑥次に完成したボタンを複製します。複製ボタンを押し、5個複製します。

canvaを使ったメニューバーのボタン作成の手順6


⑦各ボタンごとにテキストを変えていきます。この時に、一番最後のもの(メニューバーにした際、一番右側にくるボタン)については先ほどつけた白の区切り線は消してください。

ゆりかご

一番右側になるので区切り線が必要ありません

canvaを使ったメニューバーのボタン作成の手順7


⑧作成したボタンを保存していきます。「共有」をクリック。

canvaを使ったメニューバーのボタン作成の手順8


⑨ファイルの種類はPNGのまま、「ダウンロード」をクリック。

canvaを使ったメニューバーのボタン作成の手順9


⑩zipフォルダがダウンロードできるので、解凍してフォルダを開くと先ほど作成した画像が入っています。

canvaを使ったメニューバーのボタン作成の手順10
ゆりかご

これでボタンの作成は完了です!

Canvaでデザインすれば、おしゃれなフォトコラージュがわずか数分で完成!今すぐデザインを開始しましょう

2.作成したボタンを使ってアメブロメニューバーを設定しよう

①ブログ管理画面にて「ブログを書く」をクリック

作成したボタンを使ってアメブロメニューバーを設定する手順1

②作成したボタンを5種類全てアップロードします。(ドロップまたはクリック)

作成したボタンを使ってアメブロメニューバーを設定する手順2

③アップロードしたボタンの画像をそれぞれクリックして「ブログを書く」の記事内に入れます。(ボタンはメニューバーで左→右の順番になるように貼りましょう)

作成したボタンを使ってアメブロメニューバーを設定する手順3

HTML表示にします

作成したボタンを使ってアメブロメニューバーを設定する手順4

⑤画像のURLをコピーします(https://〜から始まり、語尾がpngのもの)ボタン5つ分をコピーしたらどこかにメモしておきましょう。

作成したボタンを使ってアメブロメニューバーを設定する手順5
ゆりかご

1つのボタンにつき同じURLが2回表示されているので混乱するかもしれませんがどちらをコピーしても構いません。

⑥ブログ管理画面に戻り、「設定管理」をクリック

作成したボタンを使ってアメブロメニューバーを設定する手順6

⑦フリースペース編集をクリック

作成したボタンを使ってアメブロメニューバーを設定する手順7

⑧下記コードをコピーし、フリースペースに貼り付けます。「メニュー●のURL」の部分はそれぞれのリンク先URLを入力します。(画像のURLじゃないので注意!)
「メニュー●のテキスト」の部分についても後から見ても分かりやすいよう「トップ」「プロフィール」などボタン項目のテキストを入力しておきましょう。全て入力が終わったら保存ボタンを押します。

<nav class="menu"><ul class="menu-container"><!-- <br>
--><li class="menu1"><a href="メニュー1のURL">メニュー1のテキスト</a></li><!-- <br>
--><li class="menu2"><a href="メニュー2のURL">メニュー2のテキスト</a></li><!-- <br>
--><li class="menu3"><a href="メニュー3のURL">メニュー3のテキスト</a></li><!-- <br>
--><li class="menu4"><a href="メニュー4のURL">メニュー4のテキスト</a></li><!-- <br>
--><li class="menu5"><a href="メニュー5のURL">メニュー5のテキスト</a></li><!-- <br> -->
</ul></nav>
作成したボタンを使ってアメブロメニューバーを設定する手順8

⑨設定画面に戻り「配置設定」をクリックします

作成したボタンを使ってアメブロメニューバーを設定する手順9

「フリースペース」をクリックしプロフィールの上にドロップします。

作成したボタンを使ってアメブロメニューバーを設定する手順10

⑪移動できたのを確認できたら保存します。

作成したボタンを使ってアメブロメニューバーを設定する手順11
ゆりかご

あと一踏ん張り…!

⑫続いてデザインの設定に戻ります

作成したボタンを使ってアメブロメニューバーを設定する手順12

⑬CSSの編集をクリック

作成したボタンを使ってアメブロメニューバーを設定する手順13

⑭「現在使用中のブログデザインCSS」のCSSコードの一番下に下記のコードをコピーし追加します。

作成したボタンを使ってアメブロメニューバーを設定する手順14
/* メニューバーを設置する */
.menu {
    position: absolute;
    margin: 0;
    padding: 0;
    top: -110px;
}

.skin-blogSubA, .skin-blogSubB {
    position: relative;
}

.skin-columnB .skin-blogSubA .menu, .skin-columnC .skin-blogSubA .menu, .skin-columnE .skin-blogSubA .menu, .skin-columnD .skin-blogSubB .menu {
    left: auto;
    right: 0;
}

.skin-columnA .skin-blogSubA .menu, .skin-columnD .skin-blogSubA .menu, .skin-columnC .skin-blogSubB .menu {
    left: 0;
    right: auto;
}

.skin-columnE .skin-blogSubB .menu {
    left: auto;
    right: -360px;
}

.menu-container {
    margin: 0 auto;
    padding: 0;
    display:-webkit-flex;
    display:flex;
    -webkit-justify-content: space-around;
    justify-content: space-around;
    width: 1120px;
    height: 70px;
    background: #fff;
    list-style-type: none;
}

.menu-container li {
    margin: 0;
    padding: 0;
    text-align: center;
    width: 100%;
    line-height: 70px;
    height: 70px;
}

.skin-blogBody {
    padding-top: 70px;
}

/*  メニューバーのデザイン(ボタン5個) */
.menu1 a{
background:url(メニュー1の画像URL);
    background-position: center;
    margin:0;
    display: block;
    list-style-type: none;
    text-align:center;
    width:224px;/* ボタン横幅 */
    height:70px;/* ボタン高さ */
    padding:0;
    text-indent: -9999px;
}
.menu2 a{
background:url(メニュー2の画像URL);
    background-position: center;
    margin:0;
    display: block;
    list-style-type: none;
    text-align:center;
    width:224px;/* ボタン横幅 */
    height:70px;/* ボタン高さ */
    padding:0;
    text-indent: -9999px;
}
.menu3 a{
background:url(メニュー3の画像URL);
    background-position: center;
    margin:0;
    display: block;
    list-style-type: none;
    text-align:center;
    width:224px;/* ボタン横幅 */
    height:70px;/* ボタン高さ */
    padding:0;
    text-indent: -9999px;
}
.menu4 a{
background:url(メニュー4の画像URL);
    background-position: center;
    margin:0;
    display: block;
    list-style-type: none;
    text-align:center;
    width:224px;/* ボタン横幅 */
    height:70px;/* ボタン高さ */
    padding:0;
    text-indent: -9999px;
}
.menu5 a{
background:url(メニュー5の画像URL);
    background-position: center;
    margin:0;
    display: block;
    list-style-type: none;
    text-align:center;
    width:224px;/* ボタン横幅 */
    height:70px;/* ボタン高さ */
    padding:0;
    text-indent: -9999px;
}
/* 標準のヘッダーナビを非表示 */
.skin-blogHeaderNav {
    display: none;
}

⑮「メニュー●の画像URL」部分に⑤でメモしておいた画像のURLをそれぞれ貼り付けていきます

ゆりかご

左右にある()は消さないように注意してください

⑯画像のURLの貼り付けが完了したら「表示を確認する」をクリック

⑰問題なく表示されたら「保存」を押して完了です!

メニューバーが表示されました
ゆりかご

お疲れ様でした!

メニューバーが付くと一気に華やかになり、おしゃれな外観になりますね!

アメブロカスタマイズ制作事例

ユリカゴデザインではアメブロカスタマイズのご依頼を承っております。今までご依頼いただいたアメブロカスタマイズの製作事例の一部をご紹介します。

アメブロカスタマイズ事例
ゆりかご

女性起業家様を中心にご依頼をいただいております。

アメブロを自分だけのオリジナルデザインにカスタマイズしたことで、アメブロを書くのが楽しみになった!」「デザインが素敵とお客様に興味を持ってもらい集客につながった!アメブロカスタマイズとLP制作どちらも依頼したことで事業のブランド力が高まった!など嬉しいお声をたくさんいただいております。

今回ご紹介したようにアメブロヘッダーやメニューバーはCanvaで自分で作成することが可能ですが、

・やはりデザインはプロに頼みたい!
・洗練されたデザインにすることで信頼度を上げたい
・お客様におしゃれで素敵な印象をもってもらいたい
・オリジナルデザインにすることによってブランディング力を高めたい
・自分で作ったけどうまくいかない!&素人感が出てしまう‥

という方はぜひ一度ホームページよりご相談ください。媒体問わず、女性向けデザインの実績は200件以上ございます。ご相談は無料ですのでお気軽にお問い合わせください♪



ココナラからアメブロカスタマイズのご依頼も承っております。
ココナラプロ認定取得+プラチナランク+販売実績200件強+総合評価5
※ココナラからのご依頼の場合、制作料金は同じですがココナラへお支払いいただくサービス手数料が発生いたします。ココナラのご登録がまだの方はこちらから。招待コード:KKTKBK

まとめ:【アメブロカスタマイズ】メニューバーを設置しておしゃれな外観にする方法

今回は、【アメブロカスタマイズ】メニューバーを設置しておしゃれな外観にする方法をご紹介いたしました。

  • アメブロにメニューバーを設置する場合は、アメブロにヘッダー画像を設置している場合のみ設定できる
  • Canvaを使えば無料でオリジナルデザインのメニューバーを作成することができる
  • 自分で作るのは難しい&アメブロ全体をカスタマイズしてブランド力を高めたい方はプロに依頼しよう!
ゆりかご

少しでもお役に立てると嬉しいです!

ここまでお読みいただきありがとうございました!

Canvaでデザインすれば、おしゃれなフォトコラージュがわずか数分で完成!今すぐデザインを開始しましょう

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

ユリカゴデザイン|Web・グラフィックデザイナー
美術大学デザイン学部卒。企業インハウスと制作会社のデザイナー経験を経て、2021年4月よりフリーランスで活動中。デザイナー歴12年〜
ココナラでは取得率0.05%のPRO認定を取得。ココナラで得た豆知識、インハウス・制作会社・フリーランスのデザイナー経験で得たweb知識や考えを綴っています。

目次