Seesaaブログにグローバルナビを設置する方法【新システム】

Seesaaブログにグローバルナビを設置する方法Seesaaブログアフィリエイトとカスタマイズ

今回はシーサーブログにグローバルナビ(ナビメニュー)を設置するカスタマイズです。ナビゲーションメニューとも言います。このグローバルナビを設置しておけば主要なページへ誘導する事もできますし、訪問者もクリックしてくれる確率の高い部分です。

私の場合はそれぞれのカテゴリーで目次ページを作って主要なページへのリンクをグローバルナビに追加しています。ちなみにグローバルナビを設置するとこのようになります。

Seesaaブログにメニューナビを設置する方法-2

もちろん色や大きさなどはスタイルシート(CSS)で変更できます。それでは早速手順を紹介していきましょう。

グローバルナビ設置の前準備

グローバルナビを設置する前にグローバルナビにいくつの項目を作るかを考えておく必要があります。あまり多くしすぎるとメニュー名が入らなくなりますし、長すぎるタイトルはすべて表示できないので4つか5つがおすすめです。

項目の数を決めたら自分のブログの幅を確認しておきましょう。すでに別記事「Seesaaブログの幅を変更する方法【新システム】」で横幅を変更した方は全体の幅を確認しておくとスムーズに進みますので「.l-wrapper」という部分の「width」で横幅を設定した数字を覚えておいて下さいね。

ブログの幅を変更していない方は「デザイン」⇒「CSS/HTML編集」⇒「適応中のデザインタイトル」をクリックして「.l-wrapper」という部分の「width」に書かれている数字をメモしておきましょう。

デザインによって違いますが、多分デフォルトだと「980px」か「960px」になっている物が多いかなと思います(私のスタイルシートでは377行目付近にありました)。

Seesaaブログにメニューナビを設置する方法-3

グローバルナビを設置する方法

シーサーブログの管理画面から「デザイン」⇒「CSS/HTML編集」⇒「適応中のデザインタイトル」を選択し、「HTML編集」のタブに切り替えます。

SeesaaブログHTMLの編集

するとHTMLコードがズラリ並んでいるのでその中から次のコードを探します。このテンプレートだと17行目から22行目付近。

<header role="banner" class="l-header">
		<div class="header">
			<h1><a href="<% blog.page_url -%>"><% blog.title -%></a></h1>
			<p class="description"><% blog.description | nl2br | mark_raw -%></p>
		</div>
	</header>

このコードの下に次のコードを追加します。

<!--グローバルナビゲーション開始-->
<div id="navi-bar">
<ul class="menu">
<li><a href="#" target="_blank">メニュー1</a></li>
<li><a href="#" target="_blank">メニュー2</a></li>
<li><a href="#" target="_blank">メニュー3</a></li>
<li><a href="#" target="_blank">メニュー4</a></li>
<li><a href="#" target="_blank">メニュー5</a></li>
</ul>
</div><!--navi-bar終了-->
<!--グローバルナビゲーション終了-->

別記事のカスタマイズ「シーサーブログにパンくずリストを設置する方法【新システム】」でパンくずを設置している場合はこのコードの下にパンくずリストのコードが来ます(グローバルナビの下にパンくずを設置するので)。

「#」の文字の所に、ボタンクリック時にジャンプするページのURLを(#を消して)書き込んで下さい。

それから「メニュー1」から「メニュー5」には、そのボタンに表示する文字を記入します。一応メニューを5つ書いておきましたが同じように「li」と「/li」で囲んで追加してもOK、減らしても大丈夫です。

以上追加できたら「保存」です。この状態だとまだナビが縦に並んでいると思うので、スタイルシートでこれを横並びにして位置調整をしていきましょう。

MEMO

上記コードだとクリックしたら新しいタブが開きます。同じタブ(同じウィンドウ)で開く方が良いという方は以下記事も読んでみて下さい。

リンク先を「新しいタブ」「同じタブ」で開く方法と使い分け

グローバルナビを横並びにして位置調整

先ほどは「HTMLの編集」でグローバルナビを設置したので、残りはスタイルシートで調整していきますよ。先ほど同様にseesaaブログの管理画面から「デザイン」⇒「CSS/HTML編集」⇒適応中のデザインタイトルを選択し、「スタイルシート編集」というタブが選択されている事を確認します。

Seesaaブログスタイルシート編集画面

スタイルシートのコードがズラリ並んでいますが、一番下までスクロールして次のコードを追加。

/*グローバルナビゲーション設置場所*/
#navi-bar {
 margin-top:0px;
 padding:0;
}
#navi-bar ul.menu{
  margin:0;
  padding:0;
  list-style: none;
}
#navi-bar ul.menu li{
  display:inline;
}
 
#navi-bar ul.menu li a{
  display:block;
  float:left;
  margin:0;
  padding:0;
  white-space:nowrap;
  overflow:hidden;
  text-align:center;}
#banner{margin-bottom:0px;}

最初の方にある「margin-top」の数値を大きくすれば下にずらす事もできます。追加できたらさらにスタイルシートに今度は位置調整のコードを追加。

/* ▼▼▼ 位置・サイズ調整 */
#navi-bar{max-width:960px;}   /* メニュー全体の幅 */
#navi-bar ul.menu li a{
  width:20%;            /* ボタンの幅 */
  line-height:30px;       /* ボタンの高さ */
  font-size:14px;         /* ボタンの文字サイズ */
}

ここのメニュー全体の幅「max-width:960px」という部分には最初に確認したブログの全体幅を記入します。それと、全体の幅(100%)に対するボタンの幅の割合を「%」で記述します。

この例の場合は5つのボタンを設置するので100%÷5=20%という計算になるので「ボタンの幅」は20%となっている訳です。4つのボタンなら25%になりますよね。

続いて最後に次のコードをさらに追加。これもスタイルシートに追加。

/*▼▼▼ 色・文字装飾・背景など */
#navi-bar ul.menu li a{         /* 通常時 */
  color:#ffffff;                /* 文字色(白) */
  font-weight:bold;             /* 太字 */
  text-decoration:none;         /* 下線(なし) */
  background-color:#1F5E73;     /* 背景色(藍色) */
  background-image:url();       /* 背景画像 */
  background-repeat:repeat;     /* 背景画像繰り返し */
}
#navi-bar ul.menu li a:hover{  /* カーソルが乗った時 */
  color:#ffffff;               /* 文字色(白) */
  font-weight:bold;            /* 太字 */
  text-decoration: underline;  /* 下線(あり) */
  background-color:#1F5E73;    /* 背景色(藍色) */
  background-image:url();      /* 背景画像 */
  background-repeat:repeat;    /* 背景画像繰り返し */
}
#navi-bar:after{  /* 横並びの解除 */
  content:"";
  display:block;
  clear:both;
}

横に書かれた説明を見ながら自分の好きな色を指定すればOK。また、背景に画像を使う場合は画像のURLを background-image:urlの後の( )の中に入力して下さい。

とりあえずこれで保存。ブログを表示させてリロードして確認してみます。

ここまででグローバルナビの設置はできましたが、実際に見てみると下のコンテンツ(サイドバーとか記事タイトル)との間隔が狭いです。

Seesaaブログにメニューナビを設置する方法-1

という訳でこれにも対処していきます。具体的にはサイドバーや記事タイトルと本文を含むコンテンツの上に余白を作ります。

先ほどコードを追加した「スタイルシート」に更に追加。

.l-content {
  margin-top: 30px;
}

一応30pxの余白にしていますが、これは自分で好きな数値に変更しておいて下さいね。以上でグローバルナビの設置は完了。

もしナビゲーションとヘッダー画像の間に余白が出来る場合には次のコードも追加して試して下さい。

.l-header {
    margin-bottom: 0px !important;
}

次回はブログの検索順位に重要なパンくずリストを設置する方法について紹介していきます。

Seesaaブログにパンくずリストを設置する方法【新システム】

ブログを収益化するならWordPress利用がおすすめ

無料ブログでは利用規約の変更やアカウント停止、サービス終了などのリスクがあります。

また、表示速度も重く、スマホのページには消す事のできない広告が多いためブログでの収益化を考えているならWordPressの利用が圧倒的におすすめです。

WordPressと無料ブログの違いや必要な料金などは以下記事でまとめてます。

コメント

  1. しげぞう より:

    マダオ様

    コメントありがとうございます。リンク先の挙動は変更できますので下記記事を読んでやってみて下さい。

    リンク先を「新しいタブ」「同じタブ」で開く方法と使い分け

  2. マダオ より:

    しげぞう様

    初めまして。突然のコメント失礼いたします。
    ブログを拝見させていただき、
    参考にグローバルナビを追加してみました。
    が、メニューをクリックする度に別のウィンドウが開いてしまい、
    見にくい仕様となってしまいました。
    そのままのウィンドウのままメニューのページに飛ばす方法はあるのでしょうか?
    ご教授いただけますと幸いですm(__)mよろしくお願いいたします。

  3. しげぞう より:

    なべ様

    返信ありがとうございます。解決できて良かったです。キャッシュは問題ないと思います(^^)

  4. なべ より:

    しげぞう様

    ありがとうございます!
    グローバルナビが普通の幅になりました!

    ブログのURLを検索してみますと、キャッシュにはグローバルナビが表示されておらず、リンクのみ(縦のまま)の状態になっています。

    横スクロールの非表示設定やキャッシュにナビの表示がされない場合、問題ありますか?

    よろしくお願いいたします。

  5. しげぞう より:

    なべ様

    コメントありがとうございます。ナビを普通の幅にするという事ですか?次のコードをCSSに追加でどうでしょうか?

    .myd-menu {
        margin: 0;
        padding: 0;
    }

    もし違ったらお手数ですが再度コメント下さい!

  6. なべ より:

    しげぞう様

    お世話になっております。

    グローバルナビをスマホ画面で見ても綺麗に表示されるように設定をしています。

    RIPRA Proが同じデザインのテンプレートを使用していましたので、

    グローバルナビ部分を真似しました。

    RIPRA Proは持っているのですが、デザインが好きではなく、

    今使用中のテンプレートの方がデザインがシンプルなのでこのまま使いたいと思っています。

    ご質問ですが、横いっぱいにグローバルナビが表示されないようするには

    どの部分を弄ればいいのか教えて頂けないでしょうか。

    また、この設定で間違いがあれば教えて頂きたいです。

    よろしくお願いいたします。

    【HTML】


    【CSS】

    /*グローバルナビゲーション設置場所*/
    .myd-menu {
    margin-right: -100%;
    margin-left: -100%;
    padding-right: 100%;
    padding-left: 100%;
    background: #1F5E73;
    background: -webkit-linear-gradient (top, #1F5E73 0%, #1F5E73 100%);
    background: linear-gradient( to bottom, #1F5E73 0%, #1F5E73 100%);
    }

    .myd-menu-inner {
    margin: 0 auto;
    margin-right: -100%;
    margin-left: -100%;
    padding-right: 100%;
    padding-left: 100%;
    min-height: 28px;
    border-left : 1px #1F5E73;
    }

    .myd-menu ul {
    overflow: hidden;
    margin: 0 auto;
    padding: 0;
    border-left : 1px #1F5E73;
    list-style-type: none;
    }

    .myd-menu li {
    float: left;
    margin: 0;
    padding: 0;
    color: #ffffff;
    }

    .myd-menu li { /*base*/
    text-align: left;
    font-size: 14px;
    line-height: 1.1;
    }

    .myd-menu li a {
    display: block;
    padding: 1em;
    border-right: 1px #1F5E73;
    border-left : 1px #1F5E73;
    color: #ffffff;
    text-decoration: none;
    text-shadow: 0 -1px 0 #1F5E73;
    font-weight: bold;
    }

    .myd-menu li a:hover {
    text-decoration: none;
    background-color: rgba(255,255,255,.2);
    }

    .myd-menu li:last-child a {
    border-right: none;
    }

    /* グローバルナビとヘッダー画像(間)余白調整 */

    .l-header {
    margin-bottom: 15px !important;
    }

    /* グローバルナビとコンテンツに余白 */

    .l-content {
    margin-top: 50px;
    }

    【横スクロール対策】

    /* 横スクロールを非表示 */
    body {
    overflow-x: hidden;
    }

  7. 茶風 より:

    しげぞう様
    いつも迅速な対応ありがとうございます。
    記述削除で理想のグローバルナビになりました。
    本当にいつも感謝しております。ありがとうございました。

  8. しげぞう より:

    茶風様

    コメント、URLの提示もありがとうございます。推測なんですが、多ナビの部分の広さをpxで指定しているからかな?と思います。
    CSSの以下の部分です。

    #navi-bar {
        max-width: 1550px;
    }

    この部分の1550pxを例えば9999pxとかに変更して解決するか確認してもらえますか?もしくはmax-width:1550pxという記述を削除してもいいかもしれません。

    ちょっとやってみないとわかりませんが、上記試してみて下さい。

  9. 茶風 より:

    しげぞう様
    お世話になっております。
    相談があります。
    グローバルナビの設置はできているのですが、ブラウザの拡大表示を70%や60%など、100%より小さくするとグローバルナビが左側にくっついてしまっています。
    常に中央に設置したいのですが、どの数字を変更したらいいのか分かりません。
    お忙しいところ恐縮ですがよろしくお願い致します。

  10. ボックル より:

    しげぞう様
    昨日、張り替え作業後はすぐは反映されていませんでしたが、今朝は反映されていました。
    本当に長々と親切に教えてくださりありがとうございました。

  11. ボックル より:

    しげぞう様
    毎度すみません。
    張り替えてみましたが、反映されません。
    プレビューでの画面では反映されているのですが・・・ページを進めると反映されていません。
    (T_T)

  12. しげぞう より:

    ボックル様

    返信ありがとうございます。やはり原因はわかりませんが、スペースがあると上手くいかない感じですね、CSSに追加している「グローバルナビゲーション設置場所」と記述した部分から下を一度削除して、スペースを抜いたコードに張替えてみましょうか?

    スペースを抜いた代替コードですので、こちらをCSSにコピペしてみて下さい。

    /*グローバルナビゲーション設置場所*/
    #navi-bar {
    margin-top:0px;
    padding:0;
    }
    #navi-bar ul.menu{
    margin:0;
    padding:0;
    list-style: none;
    }
    #navi-bar ul.menu li{
    display:inline;
    }
    #navi-bar ul.menu li a{
    display:block;
    float:left;
    margin:0;
    padding:0;
    white-space:nowrap;
    overflow:hidden;
    text-align:center;}
    #banner{margin-bottom:0px;}
    /* ▼▼▼ 位置・サイズ調整 */
    #navi-bar{max-width:960px;}
    #navi-bar ul.menu li a{
    width:20%;
    line-height:30px;
    font-size:14px;
    }
    /*▼▼▼ 色・文字装飾・背景など */
    #navi-bar ul.menu li a{
    color:#ffffff;
    font-weight:bold;
    text-decoration:none;
    background-color:#1F5E73;
    background-image:url();
    background-repeat:repeat;
    }
    #navi-bar ul.menu li a:hover{
    color:#ffffff;
    font-weight:bold;
    text-decoration: underline;
    background-color:#1F5E73;
    background-image:url();
    background-repeat:repeat;
    }
    #navi-bar:after{
    content:"";
    display:block;
    clear:both;
    }
    .l-content {
    margin-top: 30px;
    }
    .l-header {
    margin-bottom: 0px !important;
    }

    これで反映されないなら再度コメント下さいね!もう少し諦めずに修正すれば上手くいくと思いますので、遠慮しなくてOKです(^o^)

  13. ボックル より:

    しげぞう様
    何度もすみません。
    スペースを消してみましたが反映されませんでした。
    お手数をかけて本当にすみません。

  14. しげぞう より:

    ボックル様

    返信ありがとうございます。ちょっとチェックしてみたのですが、おそらく同じスペースが原因かと思います。スペースの場所はCSSから下記の記述を探します。

    #navi-bar ul.menu li{
    display:inline;
    }
      ←ここのスペースを削除する
    #navi-bar ul.menu li a{
    display:block;
    float:left;
    margin:0;
    padding:0;
    white-space:nowrap;
    overflow:hidden;
    text-align:center;}
    #banner{margin-bottom:0px;}

    矢印でここを削除って書いている部分のスペースを削除して反映されるか確認をしてみて下さい。

  15. ボックル より:

    しげぞう様
    分かりやすい説明ありがとうございました。
    スペースを消してみたところ、縦並びから横並びへと変わりましたが、しげぞう様のグローバルナビの表示のされ方へとは違っていて・・・。
    この解決策を教えていただけないでしょうか?
    よろしくお願いします。

  16. しげぞう より:

    ボックル様

    コメントとURLもありがとうございます。CSSの記述が反映されていない感じですね、これはおそらくコピペでのエラーというか最近なぜかこういうの多いのですが、コピペが上手く反映できていない?感じというか、余計な文字が含まれてたりします。原因はよく分かりませんが対処としては以下を試してみて下さい。

    グローバルナビでCSSに記述を追加していると思いますが、このスペースを消していきます(CSSの記述だけ)。

    例えばナビ付ける時に下記のような記述を追加していると思います。

    #navi-bar {
      margin-top:0px;
      padding:0;
    }

    この「margin」とか「padding」とかの前(左の所)に透明の半角のスペースが幾つか入っていると思います。これを消してこんな感じに。

    #navi-bar {
    margin-top:0px;
    padding:0;
    }

    上記のようにナビ用のCSS記述のスペース部分を消してみて反映されるか試してもらえますか?もしそれでも反映されない場合には再度コメント下さい(^o^)

  17. ボックル より:

    はじめまして。
    いつも勉強させてもらっています。
    グローバルメニューを作りたいのですが何度やってもうまくいかず、同じような質問を見てはみたのですが、自分が初心者すぎて理解できませんでした。
    どう改善していいのか全く分かりません。
    アドバイスを頂けないでしょうか。

  18. しげぞう より:

    はねうさぎ様

    コメントありがとうございます。リンクが別窓で開くのは「target=”_blank”」が入っているからですので、この部分を削除すればOKかと思います。記事でも書いてますので、こちらを読んでみて下さいね(^^)
    リンク先を「新しいタブ」「同じタブ」で開く方法と使い分け

  19. はねうさぎ より:

    しげぞう様

    いつも参考にさせていただいています。
    グローバルナビゲーションを設定できたのですが、クリックしてみると、別ウィンドウが新規開いてそちらに飛ばされてしまいます。ですので、同じカテゴリーを何度もクリックすると、同じ新規ページがいくつも開いてしまう状態になってしまっています。

    ブログについている「カテゴリ」を表示し、カテゴリの中のリンクをクリックしても新規ウィンドウは開かずに同じブログの中を回遊できるのですが、グローバルナビゲーションのカテゴリーをクリックしたときに、新規ウィンドウは開かせずにブログの中でリンクさせる方法はありますでしょうか?
    どうぞよろしくお願いいたします。

タイトルとURLをコピーしました