標準メニューバーを削除アメブロでオリジナルのデザインを自作してみましょう。下部のメニューバーを消す方法を紹介します。ここでは下記のように、アメブロトップページのヘッダー下部にある、標準のメニューバーを消す(非表示にする)方法をご紹介します。デフォルトのメニューバーを非表示にする※2016年12月25日のアメブロ仕様での設定手順になります。方法】」をご参照ください。くじ以下は本記事のもくじです。(補足)どうやって対象箇所を見つけるかそれでは概要から入っていきます。完成イメージ今回は、下記の黄枠のアメブロデフォルトのメニューバーを非表示にします。オリジナルヘッダー作成」をご参照ください。それでは設定手順に入っていきます。CSS編集でメニューバーを非表示にするアメブロの設定ボタン>「ブログのデザイン」デザインの変更を選択します。アメブロ>設定>デザイン編集CSSの編集を選択します。下にスクロールすると、CSSの編集画面が表示されます。記述している箇所があります。none;」を追加します。.skin-blogHeaderNav{}の中にdisplay:none;を入力(上記の私の環境ではdisplay:noneの上に色々記述がありますが、気にせず無視してください。)入力完了後は、「表示を確認する」を選択して確認します。表示を確認するヘッダー下部のデフォルトのメニューバーが非表示になったことを確認します。ヘッダー下部のデフォルトのメニューバーが非表示になった問題なければ、先ほどのCSS編集画面で「保存」を選択します。今度は実際に、自分のトップページにアクセスして設定が反映されていることを確認します。ヘッダー下部のデフォルトのメニューバーが非表示になった(※)ここで、もしさきほどの「表示を確認する」では非表示になっていたけれど、トップページにアクセスするとメニューバーが表示されているという場合は、ブラウザのキャッシュが原因の可能性があるので、一度お使いのWebブラウザでcookieや閲覧履歴などを消去してから再度アクセスしてください。(補足)どうやって対象箇所を見つけるか少し上級者向けの情報です。上述の説明で、「.skin-blogHeaderNavの中にdisplay:noneを入れる」と記載しましたが、そもそも.skin-blogHeaderNavというのを、どうやって判断しているの??と疑問に思う方も多いと思います。どこを触ればどう動くかはWebブラウザの機能で確認できます。慣れていないと少し難しいですが、ご紹介します。下記に、Chromeの開発ツール機能(検証)でメニューバーの箇所を見つけて、CSSに適用するまでの手順を載せていますので、気になる方は見てみてください。https://keimatsumoto.com/wpkm/wp-content/uploads/2016/12/ameblo-customize-delete-menubar.mp4(MacのChomeから操作しています(Windowsでも同様に確認できると思います))上記のように、Chromeの機能を利用して、CSSのどのプロパティを触れば、どういう結果になるかが確認できますので、この確認結果をもとに、先ほどの編集画面から設定できます。今回は以上になります。最後までご覧いただきありがとうございました。カスタマイズ関連の記事です。カスタマイズ】アメブロカスタマイズの基本となる記事です。メニューバー作成手順を説明した記事(その1)です。カスタマイズ】メニューバー作成手順を説明した記事(その2)です。背景画面に任意の画像を入れる方法を紹介した記事です。デザインカスタマイズ】ヘッダー下の標準のメニューバーを消す方法を説明した記事です。埋め込み】アメブロにTwitterタイムラインの表示する手順を説明した記事です。アメブロにFacebookページを追加するアメブロにFacebookページを埋め込む手順を説明した記事です。】アメブロでプロフィール画面をカスタマイズする方法を説明した記事です。(メッセージボード)を記事内に作る方法を紹介した記事です。必須サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。上に表示された文字を入力してください。まつもとの徒然なるブログシェアTOPへ。