アメブロにグローバルナビを設置するカスタマイズ

アメブロにグローバルナビを設置するカスタマイズ

前回アメブロにヘッダー画像を設置しました。

アメブロにヘッダー画像を設置する方法

今回はヘッダー画像の下にグローバルナビ(ナビゲーションメニュー)を設置するカスタマイズです。グローバルナビを設置する事によって読んでもらいたい記事に誘導する事もできますし、訪問者への道案内的な使い方ができます。ちなみにこんなやつ。

アメブロにグローバルナビを設置する方法-1

グローバルに関してはアメブロカスタマイズ専科のまつもと様の記事で紹介されていたのでほとんど引用にはなりますが、ちょっとだけ位置調整等を追加して紹介しておきます。

CSSが編集できるデザイン(テンプレート)である事が前提なので、CSSデザイン用を使っていない方は事前に用意しておきます。

アメブロのCSS編集用デザインを選ぶ

ナビゲーションメニュー設置の前準備

一応記事コンテンツの幅やサイドバーの幅のカスタマイズはしていない状態を前提として進めますが、アメブロの場合初期状態でブログの幅が1120pxあります。

設置する前にここにいくつのメニューを追加するかをまずは考えておき、設置するメニューのボタンの幅を計算しておく必要があります。

メニューボタンは4つか5つがおすすめです。

4つのメニューを付ける場合

1120pxの幅に4つのメニューボタンをつけるので1120÷4=280px。つまりボタンの幅は280pxと覚えておきます。

5つのメニューを付ける場合

1120pxの幅に5つのメニューボタンを付けるので1120÷5=224px。つまりボタンの幅は224pxと覚えておきます。

計算ができたらその数値を覚えておいて、グローバルナビを設置していきます。

グローバルナビ設置の手順

まずはアメブロの「マイページ」⇒「ブログ管理」⇒「設定・管理」⇒「フリースペースの編集」をクリック。

アメブロにグローバルナビを設置する方法-2

フリースペースに次の記述をします。

「#」の文字の所にはボタンクリック時にジャンプするページのURLを(#を消して)書き込んで下さい。それから「メニュー1」から「メニュー5」には、そのボタンに表示する文字(テキスト)を記入します。

アメブロにグローバルナビを設置する方法-3

一応メニューを5つ書いておきましたが同じように「li」と「/li」で囲んで追加してもOKです。4つのメニューボタンを設置する場合は1つ減らしておく事。最初に決めたボタンの数に調整して下さい。

メニューを何にするか決まっていない場合はとりあえず上記コードを追加しておいて設置が完了してから考えてもいいです。記述できたら「保存」。「保存」を忘れないように。

それから「フリースペースの配置設定はこちら」というリンクをクリックしてサイドバーの適当な位置に配置しておきます。

アメブロにグローバルナビを設置する方法-4

アメブロにグローバルナビを設置する方法-5

配置ができたらここでも「保存」を忘れないように。

CSSを編集してヘッダー下にナビを設置する

ここまでの状態ではまだサイドバーに縦にメニューが並んでいる状態なのでこれをヘッダー下に移動して、メニューを横並びにして配置していきます。

アメブロのマイページから「ブログ管理」⇒「デザイン設定」⇒「CSSの編集」をクリック。

アメブロのCSS編集

CSSの一番下に次のコードを追加します。

ボタンの横幅5つの場合の数値です。ボタン4つにする場合は最初に計算したボタンの幅(280px)にしておいて下さい。

また文字色や背景色は好きな色に変更しておいて下さい。

以上でアメブロにグローバルナビ設置は完了です。

最終更新日:2018/02/03

アメブロにグローバルナビを設置するカスタマイズ”に48件のコメントがあります。

コメントの反映には時間がかかる場合があります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

  1. しげぞう 投稿作成者

    うどんこ様

    コメントありがとうございます。原因として考えられるのはスタイルシートCSSでの記述ミスだと思うのですが、ナビのコード以外のコードが原因の場合もあるので、もし良かったらブログのURLを教えてもらえると助かります。コメント公開時にはURLは削除しますので、どうぞよろしくお願い致します。

  2. うどんこ

    すいません。何度設定してもナビゲーションバーが右端の方へずれて表示されてしまいます。
    プロフィール画像の上から始まっている感じです。
    どこをいじればいいのかわからなくて…これで半日潰れちゃった><
    ご教示宜しくお願いします。

  3. しげぞう 投稿作成者

    結月様

    反映されて良かったです。また何か分からない部分があればコメント下さいませ。今後もどうぞよろしくお願い致します。

  4. 結月

    なかなか四苦八苦しましたが、なんとかはずすことができました。
    文字を表示できない状態にしていたのに気づかなくて、ヘッダーが真っ白になってあせりました。
    ありがとうございます。
    またなにかありましたらご相談させてくださいね

  5. 結月

    しげぞうさん。お忙しい中ありがとうございます。
    教えていただいたとおり、ブログデザインヘッダ・背景用画像の追加 のところを削除し、

    /* (3-2) ブログヘッダー
    ——————————————–*/

    /* skinHeaderArea ブログヘッダー980pxエリア */
    .skinHeaderArea{
    width: 980px;
    height: 300px;}/* ←ブログヘッダーに背景画像を敷きたいとき */

    このようにしたのですが、はずれません。

    300px を 150 にしても変わりませんでした。

    なにが悪いのでしょうか。困っています。

    教えてください

  6. しげぞう 投稿作成者

    結月様

    久しぶりですね!コメントありがとうございます。早速ですが、まずはCSSの記述を全部コピーしてWindowsなどのメモ帳に貼り付けて保存しておいて下さい。失敗しても元に戻せるようにしておくと良いと思います。

    ヘッダー画像に関してですが、CSSに追加しているコードを探して削除もしくは変更をしますが、似たような記述があるかもしれませんので、確認して下さい。現在使用されているヘッダー画像のURLの末尾は「●●●●-k-shiro1403699365222.jpg」みたいなURLになっていると思います。これを探してみるといいかもしれません。

    「削除」と書いている部分は削除して下さい。変更するのはヘッダーの高さです。今、設置しているヘッダーの高さが300pxになってますので、150pxくらいにして様子を見てから数値を変更し調整すると良いと思います。

    後、グローバルナビを外す場合には「フリースペース」に追加した記述(それぞれの記事のURL)を全部削除します。その後CSSに追加したナビのCSSを全部削除すればOKです。グローバルナビの設置用コードにはコメント(グローバルナビ設置みたいな)が書いてあると思いますのでそれで探して削除してみて下さい。

    また何か分からない部分があればコメント下さいませ。