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

SNS・アメブロ, アメブロカスタマイズ

SNS・アメブロ

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

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

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

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

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

1. 実施概要

1-1. 完成イメージ

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

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

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

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

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

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

2. 設定手順

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

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

CSSの編集を選択します。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

松本慶のアメブロ読者さま募集中！！