アメブロ メニューバーの作り方2 標準タイプ【ameblo デザイン カスタマイズ】

アメブロ デザインカスタマイズ 標準タイプのメニューバーの作り方
アメブロ デザインカスタマイズ 標準タイプのメニューバーの作り方
 

アメブロ(ameblo)でオリジナルのデザインを自作してみましょう。
 

今回は、アメブロのPC用トップページに下記のようなメニューバーを表示する作り方をご紹介します。
 

アメブロ デザインカスタマイズ トップページ メニューバー 完成イメージ
メニューバー 完成イメージ
 
 

※もう一つのタイプ、透明でスクロールしてもついてくるメニューバーの作り方も紹介しています。下記タイプのメニューバーを作成したい方は「アメブロ メニューバーの作り方 【ameblo デザイン カスタマイズ】」をご参照ください。
 

アメブロ メニューバー 半透明固定タイプ
メニューバー 半透明固定タイプ

 

※そもそもカスタマイズってどうやるの?という方はこちら「アメブロ ヘッダーの作り方 【ameblo デザイン カスタマイズ 方法】」をご参照ください。
 

※2016年12月30日のアメブロ仕様での設定手順になります。
 
 

もくじ

以下は本記事のもくじです。

  1. 1.メニューバーの概要
    1. 1-1.完成イメージ
    2. 1-2.内容
  2. 2.設定手順
    1. 2-1.メニューバー用のHTMLを作成する
    2. 2-2.CSSを編集する
    3. 2-3.設定手順(動画版)

それでは概要から入っていきます。
 
 

スポンサーリンク



 
 

1. メニューバーの概要

 

1-1. 完成イメージ

今回は、ヘッダー画像の下に下記のようにメニューバーつけます。

アメブロ  デザインカスタマイズ トップページ メニューバー 完成イメージ
メニューバー 完成イメージ
 
 

1-2. 内容

メニューバーの内容は下記の通りです。

アメブロ トップページにメニューバーが表示された
メニューバーが表示された
 

メニューバーのメニュー数は5つにします。5つ以外の場合はHTMLとCSSを別途調整する必要があります。
 

※そもそもカスタマイズってどうやるの?という方はこちら「【アメブロ・ameblo】 デザインカスタマイズ オリジナルヘッダー作成」をご参照ください。

 
 

それでは設定手順に入っていきます。

 

2. 設定手順

2-1. メニューバー用のHTMLを作成する

 

メニューバー用のHTMLを作成するために、まずはフリースペースの配置設定を行います。

設定>サイドバー「配置設定」を選択します。

サイドバー>配置設定を選択

 

フリースペースを「使用しない機能」から「使用する機能」に移動して保存してください。(すでに実施済みの方はそのままでOKです。)

フリースペースを使用する機能に配置する
フリースペースを使用する機能に配置する

 

次に、設定>サイドバー「フリースペース編集」を選択します。

アメブロ>設定>フリースペース
アメブロ>設定>フリースペース
 

フリースペースにメニューバーの要素となる下記のHTMLを記述します。

<div id="custom-menubar"><ul><li><a href="★ここにURLを入れる★">★ここにリンク先名を入れる★</a></li><li><a href="★ここにURLを入れる★">★ここにリンク先名を入れる★</a></li><li><a href="★ここにURLを入れる★">★ここにリンク先名を入れる★</a></li><li><a href="★ここにURLを入れる★">★ここにリンク先名を入れる★</a></li><li><a href="★ここにURLを入れる★">★ここにリンク先名を入れる★</a></li></ul></div>

 

今回はリンク先は5つとします。5つ以外にする場合は後で説明するCSSでレイアウトも微調整する必要があります。

 

上記をコピーして、任意のリンク先を記述したらプレビュー確認を確認して保存します。下記のアメブロのエディタで、改行やインデント(スペースなど)入れると、文字として認識されてずれる恐れがあるのでご注意ください。

アメブロ フリースペース メニューバー用HTMLを記述
メニューバー用HTMLを記述

 

この状態でプレビューを表示するとメニューバーはサイドバー(配置設定で指定した位置)にあります。

アメブロ トップページでレイアウト調整前のメニューバーが表示された
レイアウト調整前のメニューバーが表示された

 

この状態からCSSをカスタマイズして画面上部に固定していきます。

 

2-2. CSSを編集する

次にCSSで先ほどのメニューバーを調整します。

アメブロの設定ボタン>「ブログの設定」デザインの変更を選択します。

アメブロ>設定>デザイン編集
アメブロ>設定>デザイン編集

 

CSSの編集を選択します。

CSSの編集
CSSの編集

 

 

少し下にスクロールすると、CSSの編集画面が表示されます。

CSS編集画面
CSS編集画面 ここで編集します

 

メニューバーのレイアウト調整用の以下のCSS記述をコピーします。

/* オリジナルメニューバー */

#custom-menubar{
background:url(★ここには背景になる画像URLを入力する。または「background:色」でもOK★);
position:absolute;
left:-775px;
top:-75px;
text-align:center;
box-shadow:10px 10px 10px rgba(0,0,0,0.4);
margin-bottom:100px;
width:1200px;
border-radius:10px;
}
#custom-menubar ul{
width: 1200px;
text-align:center;
height:60px;
margin:0 auto;
}
#custom-menubar ul li{
float:left;
width:240px;
height:60px;
}
#custom-menubar a{
color:#fff;
text-decoration:none;
font-size:22px;
display:inline-block;
height:60px;
padding:12px 0;
}
#custom-menubar a:hover{
opacity:0.7;
color:orange;
}
/* メインコンテンツを30px下げる*/
.skin-bgMain {
    margin-top: 30px;
}
/* サイドバーを30px下げる */
[amb-layout="columnB"] [amb-layout="subAInner"] {
    margin-top: 60px;
}
/* 前ページ,次ページを50px↓に下げる */
[amb-layout="columnB"] [amb-layout="main"] {
    margin-top: 30px;
}

 

 

  •  
    背景や文字の色で
    xxx-color:#○○○○○○;
    という記述を見かけることが多いと思います。こちらのAdobeのサイトで無料で使えますのでご活用ください。
     
    Adobe Color CC – カラーホイール 

 

上記をCSS編集画面で一番下に貼り付けます。貼り付けたら「表示を確認する」を選択して確認します。

アメブロ CSS編集画面 メニューバー調整用CSSを記述
メニューバー調整用CSSを記述
 

 

先ほどサイドバーの上部にあったメニューが整形されてページ上部に固定されていることがわかります。

アメブロ トップページにメニューバーが表示された
メニューバーが表示された

問題なければ、先ほどの編集画面で保存してください。

なお、ここからヘッダー画像を設定したい設定については、「アメブロ ヘッダー の作り方 【ameblo デザイン カスタマイズ 」をご参照ください。

後ろのメニューバー(ブログトップ、記事一覧、画像一覧)を消したい場合は、「アメブロ ヘッダー 下部のメニューバーを消す方法【ameblo デザインカスタマイズ】」をご参照ください。

 
 

2-3. 設定手順(動画版)

 

これまでの設定手順を動画で説明してみましたのでご参考ください。

 

このようにして、オリジナルのメニューバーを作り、任意のサイト、ページに案内にすることができます。
 

今回は以上になります。最後までご覧いただきありがとうございました。
 
 

スポンサーリンク



 

参考)アメブロ カスタマイズ関連記事

 

アメブロ カスタマイズ関連の記事です。難易度は雰囲気で設定しました!!

 
 

アメブロやってます!読者登録歓迎です(^^)