アメブロでもメニューバーを作りたい!今使ってる素敵なテンプレートにそのままコピペで、お仕事サイトっぽいメニューバー作れます♡

こんにちはクローバーmini

ケイト
ケイト

1人でアメブロのカスタマイズと戦っているあなたのお手伝い、
講師の杏純(アンジュ)・ケイトですkateclovermini

手軽に始められて
たくさんの人に知ってもらえるツール。

ハッピーちゃん
ハッピーちゃん

それが「アメブロ」

また、いろんなテンプレートがあったり
きれいなブログが簡単に出来るんだけど

他の人のアメブロみたいに
ちょっと変えてみたいけどどうしたらいいの?

というあなたのお悩みにお答えします。

スポンサーリンク

アメブロをちょっとお仕事用っぽくカスタマイズしてみたい

アメブロを経て、自作でサイトを作り出し、改めてアメブロの良さを実感している今日この頃。
自宅サロンをされているお客様も、順調にコツコツとアメブロで集客を上げていらっしゃいます。

ただ、アメブロは「書くことに集中!」は出来るのですが、
なかなか

ケイト
ケイト

「お仕事用」のサイトっぽくならないのも事実

amemenub

これはこれで可愛い。 アメブロデザインですよね♡

中にはかっこよく「メニューバー」を作ってらっしゃる方もいて

amemenua

ちょっとお仕事っぽいブログになりました♡
少しのことで引き締まります!

いいなぁ、あんなのどうしたらできるんだろ~


指をくわえて見てる方、

「よし、私もやってみよう!」

といろいろ検索まではしたけれど

ケイト先生
 

「CSS専用のテンプレート」を使ってください

ケイト先生
 

あっちにこれ書け、そっちにこれ書け

云々、
と書かれた記事を見て

え!
今のテンプレート気に入ってるのに!

しかもCSSって何!
もうやめた!


とあきらめてしまった方も多いと思います。

gakkari_tameiki_woman

そんなの、やり方わからないわ

たまたま、サロンのオーナーデビューをされたお客様から
お問い合わせがありましたので、
その方に「コピペ」して使っていただくために作ってみましたよ!

ほら、これがあなたの言っていた

「メニューバー」
ハッピーちゃん
ハッピーちゃん

それでは、作り方行ってみよー!

アメブロのメニューバー(グローバルメニュー)を設定する

アメブロの「ブログ管理」画面から「設定・管理」画面を開く

amesettei

アメブロの設定管理画面へはこちらから

フリースペース編集を選ぶ

amefree

こういう画面です

ここに下にあるテキストをコピペするだけです。
注意点は、

①見にくいからと変な改行をいれないでね。(エラーが出ることがあります。)
②もしフリースペースに何か書いてる方は、その下にコピペしていただければ大丈夫です。
③もしプレビューして、「見えない!」場合は
ちゃんと対処法を下に書いてますので落ち着いて下さいね。
④このままでは、使えませんよ!まだステップありますから


あわてないで下さいね。

下の文字をコピペする。

<div id="navi"><ul><li class="left"><a href="#">プロフィール</a></li><li><a href="#">教室メニュー</a></li><li><a href="#">実績一覧</a></li><li><a href="#">教室ポリシー</a></li><li><a href="#">お問い合わせ</a></li></ul></div>
<style>.skinContentsArea2,#contentsArea{position:relative;width:980px;padding-top:70px;} .skinContentsArea2 #navi,#contentsArea #navi{position:absolute;top:1px;left:4px;width:980px;font-size:14px !important;font-weight:bold;}#contentsArea #rightArea{width:660px !important;}#wideContentsArea #header{width:980px;}.profDetailWrap #navi,#ucsMainContent #navi{display:none;}.skin-blogHeaderNav{padding-top:50px;border:none;}.skin-blogBodyInner{padding-top:30px;}.skin-blogSubA,.skin-blogSubB{position:relative;}.skin-blogSubA #navi,.skin-blogSubB #navi{position:absolute;top:-150px;width:1110px;font-weight:bold;font-size:16px !important;}[data-uranus-layout="columnA"] #navi,[data-uranus-layout="columnC"] .skin-blogSubB #navi,[data-uranus-layout="columnD"] .skin-blogSubA #navi{left:5px;}[data-uranus-layout="columnB"] #navi,[data-uranus-layout="columnC"] .skin-blogSubA #navi,[data-uranus-layout="columnD"] .skin-blogSubB #navi,[data-uranus-layout="columnE"] .skin-blogSubA #navi{right:5px;}[data-uranus-layout="columnE"] .skin-blogSubB #navi{left:-495px;} #navi ul li{margin:0;padding:0;display:inline;width:20%;line-height:3.0;float:left;overflow:hidden;white-space:nowrap;}#navi ul li a{margin:0px 6px 6px 0;display:block;text-align:center;text-decoration:none;background:#ff8080;color:#ffffff !important;border-radius:0px;box-shadow:2px 2px 2px #cccccc;}#navi ul li a:hover{margin:1px 5px 5px 1px;box-shadow:2px 2px 2px #cccccc;background-color: #ffffff!important;color: #7B746B !important;}</style>

思い切ってコピペしてみましたか?
こんな感じになってますよ。

amefreea

保存を押して、一度「プレビュー」で確認してみましょう。
では、

プレビュー
ケイト
ケイト

ちゃんとメニューが出てましたか?

ハッピーちゃん
ハッピーちゃん

出てない人も、慌てないで。

出てない人も、出てる人もとりあえず次をチェックしてくださいね。

フリースペースの配置設定を確認する

先ほどコピペで作ったフリースペースが、
テンプレートによっては使用されていない場合があります。


また、今回は一度でメニューが設定されても
次回異なるテンプレートを使用した時に
メニューが表示されなくなることもあります。

その時は、またここの画面から確認をして下さいね。
フリースペースの配置設定はこちらからもできます。

メニューが表示されなかった方は、
フリースペースが「使用しない機能」に入っていませんか?
amefreesechi

こちら側にあるとメニューは表示されません。
移動させましょう。

ハッピーちゃん
ハッピーちゃん

右側の「使用する機能」へドラッグしてください。

amefreesechi2

保存を押して、一度「プレビュー」で確認してみましょう。
では、

プレビュー
seikou_syukufuku_woman

キターーーーーー!!!

はい!おめでとうございます。

ハッピーちゃん
ハッピーちゃん

でもまだもう一歩大事な事が。

それは、

ケイト
ケイト

メニューの内容の設定

このままではボタンを押しても、
ボタンの色が変わるだけです!

tehepero5_girl

焦っちゃった

メニューに表示させたいアメブロの記事をセットする

ハッピーちゃん
ハッピーちゃん

ここからは、ボタンを押したときに
リンクに飛ぶように設定する方法ですよ。

再びフリースペース編集を選ぶ


フリースペースの配置設定はこちら
へ戻り、先ほどコピペした中の上の部分で見た文

<a href="#">プロフィール</a></li><li><a href="#">教室メニュー</a></li><li><a href="#">実績一覧</a></li><li><a href="#">教室ポリシー</a></li><li><a href="#">お問い合わせ</a>

青い文字で
"#"
と書かれたところがあると思います。
ここにこのメニューボタンを押したときに
開きたいリンク先をコピペしてください。

例えば、私の場合でしたら、

<a href="#">プロフィール</a>
の部分は
<a href="https://profile.ameba.jp/ameba/angekateft1610">プロフィール</a>

と変更します。

ケイト
ケイト

必ず""(ダブルクォーテーション)で囲んで下さい。

ハッピーちゃん
ハッピーちゃん

また、プロフィールのように赤字で書いている部分は
自由に変更可能ですよ。

次に、同じようにメニューに設定したい
リンク先を探してセットしてください。

アメブロで、教室案内やプロフィール、
アクセス方法などのページを作りそこにリンクをはると、
過去の記事の中からお客様が探す手間が省けますので、
お客様にも優しいサイトが作れますよ。

保存を押して、もう一度「プレビュー」で確認してみましょう。
では、

プレビュー
seikou_syukufuku_woman

出来た~!

ケイト
ケイト

今回はアメブロに簡単にメニューバーを作る方法でした。

ハッピーちゃん
ハッピーちゃん

メニューバーの色を変える設定はこちらをご覧ください。

自分で設定変更出来る方
色を自分好みに変更したい方はこちら

【おまけ】自分で好きな色の枠を作りたい方へ

現在アメブロのブログスタンプのカラーコードを集める「アメブロブログスタンプコレクション」を作成中。

プロが作る絶妙な色合いのスタンプ枠の色が一目でわかる優れものですよ。

 

 

でもとりあえず、枠の色を自分で変えたい方はこちらがおススメ。

dashed #cbdcf6;やなど、ピンク文字のところにコードを書き替えるだけ!

 

色の識別能力は訓練できます。
普段から、たくさんの色の違いを見るのがおススメ。

 

 

 

 2020/6/12発売の新刊!

 

【おまけ】うまくいかない!そんな時は?

出来ないよ~

と困ったそこのあなた!

ハッピーちゃん
ハッピーちゃん

もう一度ここを見てチャレンジしてみて!

メニューバーが消えちゃった!
表示がはみ出てしまうなど

アメブロテンプレートで新しいものは、メニューバーがうまく表示されないことがあります。

ここで使用しているテンプレートFresh Tableで一度表示されるか試してください。

表示された場合

アメブロの仕様で、この方法でメニューバーが表示されないテンプレートです。できれば、違うテンプレートへ変更してください。

表示されない場合

申し訳ありませんが、下の反映されないあるあるをご覧ください。

もし、途中でアメブロの表示がおかしくなったら?

あわてずに「フリースペース」の文字を全部消して「保存」を押してください。

そして、再度ゆっくり慌てずにメニューへのリンク作業をすればOK!

ハッピーちゃん
ハッピーちゃん

パソコンのメモ帳などで先に全部書いてから、一気にコピペすると間違いがないですよ。

ケイト
ケイト

Wordは勝手にダブルコーテーションが変更されることがあるので、おすすめしません。

反映されない原因あるある①

自分で入力した時に<a href="サイトurl">の部分の""(ダブルクォーテーション)が
””(日本語表示のダブルクォーテーション)
になっている。

ハッピーちゃん
ハッピーちゃん

Wordなどにコピペした時など、
勝手にWordが変えていることがあります。

反映されない原因あるある②

メニューバー自体が表示されないのは、大体
フリースペースが「使用しない機能」に入っていない。
 
ハッピーちゃん
ハッピーちゃん

まずは落ち着いて順番に


反映されない原因あるある③

時々、コピー元のサイトに書かれているコード自体の
""(ダブルクォーテーション)が
””(日本語表示のダブルクォーテーション)になっている場合がある。

WordPressを使っていると、初期設定で勝手に変換されてしまうそうです。
記事を書いてる方も気づいてない時もあります。
 
私も知らずにやってしまいました。

ハッピーちゃん
ハッピーちゃん

そんな時はいったんメモ帳などにコピペし、
置換機能を使って””→"" に置換しましょう。

 
この記事は2019年5月10日現在の設定ですので
急にアメブロさんが設定を変えたり、
新しいテンプレートの企画を作られた場合は
表示がおかしくなるかもしれませんので、ご了承下さい。
(2020年4月10日現在でも正常に表示されています。アメブロさんありがとう♡)
2019年5月10日公開時、不慣れなWordpressのため、
このまま「コピペ」してね、
という部分の引用符("")が(””)に勝手に変換されるため
アメブロでメニューバーが表示されない、という不具合がありました。

せっかく頑張ったのに出来なかった~、
と泣かせてしまった皆さま、申し訳ございません。
あなたは悪くありませんよ~。
修正しました~。
onegai_gomen_woman

お時間取らせて
ごめんなさい~

 

ハッピーちゃん
ハッピーちゃん

その他のサロン支援記事はこちら

 

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


アメブロにもメニューバーを作りたい時は?

アメブロに可愛い枠を作りたい時は♡基本の貼り付け編

アメブロテンプレート別メニューバーの色が変更できます。今使ってる素敵なテンプレートにそのままコピペでOK

アメブロのブログスタンプの色コレクション♡お気に入りの色があったら、囲み枠やメニューバーの色に使ってみてね。(日々更新中)


Skypeを使ってオンライン教室をしてみたいなら


Skypeの無料会議室「Meet Now」の使い方を丁寧に解説。オンラインサロンを始めてみたい、Zoomから乗り換えたい方必見。

【windows10】Skypeの無料会議室「Meet Now」で音声が聞こえない時に試してほしい事。最後の手段です。

生徒さん募集や予約の連絡ツールをメールからLINEに変えてみよう


LINE公式アカウントに登録して、オンラインサロンに来てもらおう。登録方法を画面で分かりやすく説明します。

【LINE公式アカウント登録マニュアル②】アカウントを登録したら、個人用LINEを使って応答のテストをしてみましょう。

 

アメブロではその日のラッキーデーのポイントや、ちょっとしたことを更新しています。
よろしければこちらもご覧ください。

 

 

 

ケイト
ケイト

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

サロン経営での困ったをお助けします。
浮いた時間であなたのやりたいことができますように。

あなたの才能をパソコン仕事で削らないで。
あなたしか出来ないことに力を注いでくださいね。

あなたの心に優しく寄り添います。
講師:杏純(アンジュ)・ケイト

 

 

今すぐアフィリエイトをしてみたい初心者におすすめ!
登録無料・審査なし!
セルフバックですぐにブログからの収入が得られるんですよ。
しかも今ブログを持っていなくても登録できるんです。
一度覗いてみる価値ありますよ。
まずはここから始めてみるのがいいですよ。

ここもお勧め。
キャッシュバックも充実。
チリも積もれば山となる。
そして何より「報酬振込手数料」が「もしも」負担。
全額自分の報酬になるのが、何気にうれしい♡

ここは審査結構厳しめです。
でもふるさと納税
ぐるなび、食べログ、一休をいつも使ってる方は必見!

広告を作成しなくても、自己購入で収入が発生。
しかも振込手数料は無料。
1000円から収入をもらえます。
思った以上にちょっとしたお小遣いになりますよ

このサイトを作る時にお世話になりました。
エックスサーバーは質問するとホントにすぐにていねいなお返事がきました。
ビックリ!
タイトルとURLをコピーしました