アメブロのメニューバーのざっとした作り方

「webサイト×ブログ」の製作の仕事もしているのですが、最近アメブロも一緒に作りたいと言う問い合わせが増えて来ましたので試しにアメブロのカスタマイズをしました。初心者にわかりやすいようざっとした言葉で説明します。

「トップイメージ(一番上の画像)」と「メニューを作りたい」の2点が多いので、今回は「アメブロにメニューをつける」やります!

出来上がりはこんな感じです

「メニューバー(グローバルナビゲーションメニュー)」の感じ

スクリーンショット 2016-05-25 10.48.50

「メニューバー」の作り方

メニューバーの作り方です。アメブロのカスタマイズは基本的にデザインをCSS編集用デザインに変更してください。

見にくる人はメニューが欲しい理由はわかってると思いますが一応。

プロフィールとか、教室の案内とか問い合わせとか予約フォームとかですね。アメブロをホームページみたいにしたい〜ってことだと思います。

やり方はそれなりに簡単です。「フリースペース」と「CSS」を使えばできます。

「3カラム・右メニュー」以外はだいたい大丈夫だと思います。

フリースペースにメニューのHTMLタグを入れる

フリースペースはここです。設定から選びます。

スクリーンショット 2016-05-25 11.36.44 スクリーンショット 2016-05-25 11.37.19

まず、アメブロのフリースペースに、メニューだよって教えるHTMLタグを入れる。分からなくてもコピー&ペーストして文字をかえればオッケーです。

こんな感じ。

<div class="nav-wrap"><nav><ul class="nav-body">
<li><a href="【URL】"><span>【メニューの文字】</span></a></li>
<li><a href="【URL】"><span>【メニューの文字】</span></a></li>
<li><a href="【URL】"><span>【メニューの文字】</span></a></li>
<li><a href="【URL】"><span>【メニューの文字】</span></a></li>
<li><a href="【URL】"><span>【メニューの文字】</span></a></li>
</ul></nav></div>

このコードをフリースペースに入れます。変更するところは「【URL】」と【メニューの文字】です。入れてみるとこんな感じになります。

<li><a href="http://2ndpost.com/"><span>公式サイトはこちら</span></a></li>

裏の設定完了!後は表示させるだけ

表示させるにはブログのサイドバーに設定が必要です。

フリースペースに記述したタグを有効にするためには、アメブロのサイドバーにフリースペースを表示する設定が必要です。

スクリーンショット 2016-05-25 11.36.44 スクリーンショット 2016-05-25 11.36.53

もし、フリースペースが「使用しない機能」の方に入っていたら、「使用する機能」へ移動して保存して下さい。

ブログデザインCSSにメニューを追加するためのCSSを追加する

次に、グローバルナビを表示するためのCSSを用意しましょう。

CSS編集用デザインを適用後、何もカスタマイズしていなければそのまま使えます。

下のコードをブログデザインCSSの末尾に追加→保存でできます。

スクリーンショット 2016-05-25 11.03.06 スクリーンショット 2016-05-25 12.06.37
/* メニューバー */
.nav-wrap {
  position: absolute;
  margin: 0;
  padding: 0;
}
.skin-blogSubA, .skin-blogSubB {
  position: relative;
}
[amb-layout="columnB"] .skin-blogSubA .nav-wrap,
[amb-layout="columnC"] .skin-blogSubA .nav-wrap,
[amb-layout="columnE"] .skin-blogSubA .nav-wrap,
[amb-layout="columnB"] .skin-blogSubB .nav-wrap {
  left: auto;
  right: 0;
}
[amb-layout="columnA"] .skin-blogSubA .nav-wrap,
[amb-layout="columnD"] .skin-blogSubA .nav-wrap,
[amb-layout="columnC"] .skin-blogSubB .nav-wrap {
  left: 0;
  right: auto;
}
[amb-layout="columnE"] .skin-blogSubB .nav-wrap {
  left: auto;
  right: -360px;
}
.nav-body {
  margin: 0;
  padding: 0;
}
.nav-body:after {
  display: block;
  clear: both;
  content: " ";
  height: 0;
  visibility: hidden;
}
.nav-body>br {
  display: none;
}
.nav-body li {
  display: block;
  float: left;
  margin: 0;
  padding: 0;
  text-align: center;
}
.nav-body li a {
  display: block;
  text-decoration: none;
}
.skin-blogBodyInner {
  padding-top: 90px; /* メニューバーが表示される場所 */
}
.nav-wrap {
  top: -90px; /* メニューバーの上下の位置を調整する場所 */
}
.nav-body {
  width: 1120px; /* メニューバーの横幅を変更する場所 */
  background: #FFFFFF; /* メニューバーの背景の色を変える場所 */
}
.nav-body li a {
  width: 224px; /* メニューボタンの横幅を変える場所 */
  line-height: 50px; /* メニューボタンの高さを変える場所 */
  color: #fff; /* メニューボタンの中の文字の色 */
  background: #999999; /* メニューボタンの色 */
}

コメントを残す

メールアドレスが公開されることはありません。