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


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

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


 

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

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

アメブロ デザイン ゴールイメージ

メニューバーのイメージ


 
 

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

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

 
 

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

もくじ

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

  1. 1.メニューバーの概要
    1. 1-1.完成イメージ
    2. 1-2.内容
    3. 1-3.レイアウト
  2. 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を記述します。

 

今回はリンク先は4つとします。4つ以外にする場合は後で説明する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. 完成後のイメージ(※音が出ます)

 

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

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

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

 

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

 
 

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

 

 


コメント投稿

すべて必須項目です。メールアドレスが公開されることはありません。


*

mail無料メルマガ

メルマガを受け取る女性

読者限定の情報やイベント情報を先行配信

読者限定のお得なモニター価格情報やHP作成・運用や独立・副業を考えている人向けにイベントの先行配信しています!登録・解除は自由です!ぜひご登録ください!