松本のブログ

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

アメブロカスタマイズ アメブロ デザインカスタマイズ 半透明・固定のメニューバーの作り方
アメブロ デザインカスタマイズ 半透明・固定のメニューバーの作り方
アメブロ デザインカスタマイズ 半透明・固定のメニューバーの作り方
 

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

今回は、アメブロのPC用トップページに下記のように半透明でスクロールしても位置が固定して付いてくるオリジナルのメニューバーを出す作り方をご紹介します。
 

アメブロ　デザイン　ゴールイメージ
メニューバーのイメージ
 
 

なお、下記のような標準タイプのメニューバーを作りたい場合は、アメブロ メニューバーの作り方 ２ 標準タイプ【ameblo デザイン カスタマイズ】をご参照ください。

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

 
 

※そもそもカスタマイズってどうやるの？という方はこちら「アメブロ ヘッダーの作り方 【ameblo デザイン カスタマイズ 方法】」をご参照ください。
 
 
※2016年8月1日のアメブロ仕様での設定手順になります。
 
 

もくじ

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

  1. 1.メニューバーの概要
    1. 1-1.完成イメージ
    2. 1-2.内容
    3. 1-3.レイアウト
  3. 2.設定手順
    1. 2-1.メニューバー用のHTMLを作成する
    2. 2-2.CSSを編集する
    3. 2-3.完成後のイメージ(※音が出ます)


 
 

スポンサーリンク



 
 

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

1. メニューバーの概要

1-1. 完成イメージ

今回は、下記のように一番上に透明なメニューバーを表示させます。メニューバーはページ上部で固定して、ページを下にスクロールしてもついてくるようにします。

アメブロ　デザイン　ゴールイメージ
メニューバーのイメージ

 

1-2. 内容

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

  • メニューバーのメニュー数は4つにする
  • メニューバーを背景に透過させて文字は白色にする
  • リンクにカーソルを合わせると緑色になる
  • メニューバーはページ上部固定でスクロールしてもついてくるようにする

 

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

 

1-3. レイアウト

アメブロ メニューバー レイアウト
アメブロ メニューバー レイアウト

 

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

 

2. 設定手順

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

 

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

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

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

 

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

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

 

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

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

 

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

 

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

 

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

アメブロ フリースペースでメニュー用HTML文を記述する
アメブロ フリースペースでメニュー用HTML文を記述する

 

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

アメブロ CSS調整前のメニューバー
CSS調整前のメニューバー

 

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

 

2-2. CSSを編集する

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

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

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

 

CSSの編集を選択します。

CSSの編集
CSSの編集

 

 

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

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

 

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

 

  •  
    レイアウトは下記の通りです。

    アメブロ メニューバー レイアウト
    アメブロ メニューバー レイアウト
  •   

    CSSのそれぞれの意味です。意味を理解しようとするとどうしても多少のHTMLとCSSの知識が必要になります。
    .skin-blogCustomHeaderNav {
    position:fixed; /* メニュー用ブロックの位置を固定 */
    top:0; /*メニュー用ブロックの位置を左「上」に */
    left:0; /*メニュー用ブロックの位置を「左」上に */
    height:70px; /* 高さを70pxに */
    width:100%; /* 横幅100% */
    background: rgba(0, 0, 0, 0.1); /* 背景をRGB000(黒) 透過0.1(90%透過) */
    }
    .skin-blogCustomHeaderNav ul{
    width:1000px; /* 横幅1000px */
    margin:auto; /* 左右対称 */
    height:32px;/* 高さ32px */
    margin-top:38px; /* 上から38pxの位置 */
    }
    .skin-blogCustomHeaderNav li{
    width:250px; /* 各メニューの横幅を250px */
    float:left; /* li要素を横並びにする */
    text-align:center; /* 真ん中に配置 */
    }
    .skin-blogCustomHeaderNav ul li a{
    color:#FFFFFF; /* 文字を白色 */
    font-weight:bold; /* 太字 */
    font-size:20px; /* フォントサイズ20px */
    text-decoration:none; /* アンダーラインなどをつけない */
    display:block; /* ブロック要素にする*/
    }
    .skin-blogCustomHeaderNav ul a:hover{
    background: rgba(12, 163, 102, 0.3);　/* 緑色で透過0.3(70%を透過する)*/
    }
    .float-clear{
    both:clear; /* 回り込みを解除する */
    }

 

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

 

(6)その他、拡張の一番下（以下の黄枠）に追加します。貼り付けたら「表示を確認する」を選択して確認します。

CSSの最後にメニューバーの設定を追加する
CSSの最後にメニューバーの設定を追加する

 

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

アメブロ メニューバー(CSS調整後)
アメブロ メニューバー(CSS調整後)

問題なければ保存します。

2-3. 完成後のイメージ(※音が出ます)

 

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

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

スポンサーリンク



 
 

 
 

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

 

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

 
 

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

アメブロ 松本慶 トップページ
send松本慶のアメブロ 読者さま募集中！！