アメブロ ヘッダー 下部のメニューバーを消す方法【ameblo デザインカスタマイズ】


アメブロ デザインカスタマイズ 標準で付いているメニューバーを削除する

アメブロ デザインカスタマイズ 標準メニューバーを削除


 

アメブロでオリジナルのデザインを自作してみましょう。今回は、 アメブロ ヘッダー 下部のメニューバーを消す方法を紹介します。
 

ここでは下記のように、アメブロトップページのヘッダー下部にある、標準のメニューバーを消す(非表示にする)方法をご紹介します。
 

アメブロ トップページ デフォルトのメニューバーを非表示にする

デフォルトのメニューバーを非表示にする


 

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

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

 

もくじ

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

  1. 1. 概要
    1. 1-1.完成イメージ
  2. 2.設定手順
    1. 2-1. CSS編集でメニューバーを非表示にする
    2. 2-2. (補足)どうやって対象箇所を見つけるか

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

スポンサーリンク


 

1. 実施概要

1-1. 完成イメージ

今回は、下記の黄枠のアメブロデフォルトのメニューバーを非表示にします。
 

■設定前(メニューバー表示状態)

アメブロ トップページ デフォルトのメニューバーを非表示にする

デフォルトのメニューバーを非表示にする


 

■設定後(メニューバー非表示状態)

アメブロ トップページ デフォルトのメニューバーが非表示になった

ヘッダー下部のデフォルトのメニューバーが非表示になった


 

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

 

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

 

2. 設定手順

 

2-1. CSS編集でメニューバーを非表示にする

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

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

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

 

CSSの編集を選択します。

CSSの編集

CSSの編集

 

 

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

CSS編集画面

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

 

そのまま下をスクロールして行くと、.skin-blogHeaderNav と記述している箇所があります。
 

.skin-blogHeaderNav {      }の中の一番下の行に「display: none;」を追加します。

アメブロ デザインカスタマイズ CSS調整  .skin-blogHeaderNav{}の中にdisplay:none;を入力

.skin-blogHeaderNav{}の中にdisplay:none;を入力

(上記の私の環境ではdisplay:noneの上に色々記述がありますが、気にせず無視してください。)
 

入力完了後は、「表示を確認する」を選択して確認します。
 

アメブロ デザインカスタマイズ CSS調整  .skin-blogHeaderNav{}の中にdisplay:none;を入力

CSS編集画面 表示を確認する


 

ヘッダー下部のデフォルトのメニューバーが非表示になったことを確認します。

アメブロ トップページ デフォルトのメニューバーが非表示になった

ヘッダー下部のデフォルトのメニューバーが非表示になった


 

問題なければ、先ほどのCSS編集画面で「保存」を選択します。

アメブロ デザインカスタマイズ CSS調整  .skin-blogHeaderNav{}の中にdisplay:none;を入力

.skin-blogHeaderNav{}の中にdisplay:none;を入力


 

今度は実際に、自分のトップページにアクセスして設定が反映されていることを確認します。

アメブロ トップページ デフォルトのメニューバーが非表示になった

ヘッダー下部のデフォルトのメニューバーが非表示になった


 

(※)ここで、もしさきほどの「表示を確認する」では非表示になっていたけれど、トップページにアクセスするとメニューバーが表示されているという場合は、ブラウザのキャッシュが原因の可能性があるので、一度お使いのWebブラウザでcookieや閲覧履歴などを消去してから再度アクセスしてください。
 
 

2-2. (補足)どうやって対象箇所を見つけるか

少し上級者向けの情報です。
 

上述の説明で、「.skin-blogHeaderNavの中にdisplay:noneを入れる」と記載しましたが、そもそも.skin-blogHeaderNavというのを、どうやって判断しているの??と疑問に思う方も多いと思います。
 

どこを触ればどう動くかはWebブラウザの機能で確認できます。慣れていないと少し難しいですが、ご紹介します。
 

下記に、Chromeの開発ツール機能(検証)でメニューバーの箇所を見つけて、CSSに適用するまでの手順を載せていますので、気になる方は見てみてください。
 


(MacのChomeから操作しています(Windowsでも同様に確認できると思います))

 

上記のように、Chromeの機能を利用して、CSSのどのプロパティを触れば、どういう結果になるかが確認できますので、この確認結果をもとに、先ほどの編集画面から設定できます。
 
 

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

スポンサーリンク



 
 

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

 

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

 
 

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

 

 


コメント投稿

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


*

mail無料メルマガ

メルマガを受け取る女性

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

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