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

この記事はSeesaaブログの新デザインシステム版です。旧システムを利用している方はこちらの記事を参考に。
シーサーブログにグローバルナビを設置する方法

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

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

グローバルナビ-1

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

スポンサーリンク

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

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

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

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

デザインによって違いますが、多分デフォルトだと「980px」か「960px」になっている物が多いかなと思います。

Seesaawidth-1

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

シーサーブログの管理画面から「デザイン」⇒「デザイン設定」⇒「適応中のデザインタイトル」を選択します。

新デザインパンくず-1

上のタブで「HTML編集」のタブに切り替えます。

新デザインパンくず-2

すると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、減らしても大丈夫です。

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

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

先ほどは「HTMLの編集」でグローバルナビを設置したので、残りはスタイルシートで調整していきますよ。先ほど同様にseesaaブログの管理画面から「デザイン」⇒「デザイン設定」⇒適応中のデザインタイトルをクリック。

新デザインパンくず-1

次の画面で今度は「スタイルシート編集」というタブが選択されている事を確認します。

新デザインパンくず-3

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

/*グローバルナビゲーション設置場所*/
#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の後の( )の中に入力して下さい。

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

新デザインパンくず-4

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

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

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

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

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

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

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

WordPressの始め方
サイトのアクセスアップや稼ぐためにおすすめの無料レポート

個人的にアクセスアップや検索上位表示に役立った無料レポートです。登録にメールアドレスが必要ですが、フリーメールでもOKです。

おすすめの無料セミナー

これまでお金に関する勉強をした事がない方は稼ぐサイト作りの前にお金に関する無料セミナーに参加してみて下さい。お金をためたり増やしたりするためにお金の知識があるとかなり有利。考え方の土台になる部分ですからね。

「1万円から始められる節約の方法」「お金に働いてもらう方法」「収入の2割を自動的に貯める方法」など、お金に関する基本的な知識が学べる2時間の無料のセミナーが毎日のように行われてますので、一度参加してみる事をおすすめします。

これまで全くお金の勉強していない方であればお金の知識を身につける事で考え方が大きく変化するはずです。無料の2時間程度のセミナーですが、内容は濃いのでおすすめです。
お金に関する教養無料セミナー

Seesaaブログにグローバルナビを設置する方法【新システム】”に16件のコメントがあります。

※入院生活から復活しました!!またできるだけ返信しますのでよろしくお願いします(^^)

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

  1. カワラ

    しげぞう様おせわになっております。
    シーサーブログでグローバルナビをスマホにも設置する方法などありますでしょうか?

    もう一つ、シーサーブログからワードプレスに引っ越す方法を拝見させて頂きましたが
    シーサーの旧システムからシーサーの新システムに引っ越す方法などありましたらご教授いただけますでしょうか?

  2. 笠井

    すみません。先ほど、コメントした笠井ですが、
    今ブログみたら、ちゃんと設置できていました。
    ごめんなさい。
    失礼しました。

  3. 笠井

    はじめまして。笠井と申します。
    シーサーブログのカスタマイズで参考にさせて頂いております。
    ありがとうございます。
    グローバルナビの設置がうまくいきません。
    CSSのプレビューでは、ちゃんと設置できてるのですが、
    実際にブログをみると、
    文字が左横に縦に並んでるだけです。
    どういった理由が考えられるでしょうか?
    教えて頂けたら幸いです。
    よろしくお願いいたします。

  4. しげぞう 投稿作成者

    OSARA様

    コメントありがとうございます。グローバルナビの下に余白を作るコードですが、記事の本文とサイドバーを含む部分が「l-content」という部分になりますので、この「l-content」の上に余白を取ればナビと下のコンテンツに余白ができます。以下のコードをスタイルシート(CSS)に追加してみて下さい。

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

    もしサイドバーだけ位置を下げたい場合や上手く反映されない場合にはお手数ですが、再度コメント下さい。その時にできればブログのURLも教えて頂けると助かります。コメント公開時にはURLは削除しますので、どうぞよろしくお願い致します。

  5. OSARA

    はじめまして。
    凄く分かりやすいサイトでこちらの記事で勉強させてもらっています。

    今グローバルナビの設定をしていて、うまくいかなかった所が一つあり質問させて頂いてよろしいでしょうか。

    グローバルナビは無事設置できたんですが、サイドバーの検索とグローバルナビがピッタリついてしまいました。

    ここの間に空間を少し作りたいんですが、どこに何を記入すればいいでしょうか?教えて頂けたら嬉しいです。

    よろしくお願いします。

  6. SHIZUKO

    しげぞう様

    早速のご回答ありがとうございます!!
    教えていただいた通りにコードを追加すると余白を消せました!早速ブログにてしげぞうさんのこのブログを紹介させていただきました。記事にもすぐに追記していただいたようで、アフィリエイト初心者にとって本当に親切なブログですね。私もブログを運営しながら少しずつコーディングの勉強もしていきたいと思います。ありがとうございました!!

  7. しげぞう 投稿作成者

    SHIZUKO様

    コメントありがとうございます。なるほど、ヘッダーとナビの間の余白ですね。以下のコードをスタイルシート(CSS)に追加して試してみてください。

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

    上記コードをスタイルシート(CSS)に追加して保存。それでブログを表示させてから「Ctrl」と「F5」を一緒に押してリロードしてから確認をしてみて下さい。もしそれで反映されない場合には再度コメント頂けると助かります。また、記事の方にも上記コードを追加して修正しておきました。ありがとうございます!

  8. SHIZUKO

    しげぞう様

    はじめまして。この記事を参考にメニューバーを設置させていただいたのですが、ヘッダー画像とメニューバーの間に余白がかなりあいていて不細工になってしまっています。色々と解消方法を模索したのですが分からなかったので、編集の仕方を教えていただけますでしょうか。

  9. のり

    しげぞう様

    本当に返答ありがとうございます。
    旧システム・・・
    最近始めたので新システムなんだと思い込んでいました。
    同じアカウントで新旧わかれているという・・
    本当にすみません
    丁寧な返答感謝です。

  10. しげぞう 投稿作成者

    のり様

    コメントありがとうございます。Seesaaブログには「旧システム」と「新デザインシステム」という2種類あります。ここがちょっとややこしい部分で、のり様が言われるように管理画面のメニューも違います。このブログでは「旧システム」と「新デザインシステム」両方でそれぞれ記事を書いてますし、Seesaaブログのカスタマイズ記事の冒頭にリンクで両方行き来できるようにしていますので、一度確認してみて下さい。

  11. のり

    しげぞう様

    ブログ初心者でかなり勉強させていただいております。
    急な質問で失礼します
    Seesaaブログで2つブログをつくったのですが

    1つは編集で
    スタイルシート編集|HTML編集|コンテンツHTML編集|カバー画像設定
    があってうま編集できています

    もう1つの方がこの編集ができなく困り果てています
    同じページなのですが
    デザイン|一覧デザイン設定|コンテンツ|HTML
                   ページ : トップ | 記事 | 過去ログ | カテゴリ         
    しかでてこなくて・・・
    編集はできるみたいなのですが
    少し違う感じにでてきてしまいます

    かなり初歩的な質問だとおもいますが、この違いはなんなのか
    自分の設定がおかしくなっているのか迷走しています
    アドバイス頂けたら嬉しいです
    よろしくお願いいたします。

  12. しげぞう 投稿作成者

    あっくん様

    返信おそくなってすみません。1つ1つ問題を解決してみますね。

    1.グローバルナビが右側にくっついている件

    これはあっくん様の推測の通り、「padding-left」が原因です。ただ、これはこのままでOKなので、「padding-right」を追加してバランスを取ります。以下のコードをスタイルシートに追加して下さい。

    .l-wrapper {
        padding-right: 15px;
    }

    2.記事タイトルとタグの下の余白の件

    これもスタイルシート(CSS)の編集で解決します。スタイルシートに次のコードを追加です。

    .article__heading {
        margin-bottom: 10px;
    }

    数値はお好みで変更して下さい。

    3.フォントの設定の件

    フォントに関しては全体のフォントの変更だと思いますので、「body」を使うと良いと思います。

    body {
      font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic Pro",
     "ヒラギノ角ゴ Pro W3", "MS Pゴシック", "Lucida Grande",
     "Lucida Sans Unicode", Arial, Verdana, sans-serif;
    text-rendering: optimizeLegibility;
    }

    こんな感じになると思います。

    それから余談ですが、もう1つだけ追加しておくと、記事本文の右端がサイドバーに近すぎる感じがするので、以下をスタイルシートに追加することで、サイドバーと記事との余白ができます。

    .article__content {
        padding-right: 30px;
    }

    これも数値はお好みで変更して下さい。もし現在のままでもOKというのであれば気にしないで下さいね!

    また何かあればコメント下さい。

  13. あっくん

    しげぞう様

    何度もすみません。
    今、気がついたのですが
    トップページは個別記事のほうは、スタイルシートの並び替えで
    余分な余白が解消されたのですが、
    個別記事のページは、やはり、余分な余白が入っているようです。
    重ねてよろしくお願いいたします。
    ================
    記事タイトル
    タグ
    【ココの余白が広いんです】
    記事本文
    ================

  14. あっくん

    しげぞう様

    お世話になります。
    早速ありがとうございます。
    2点目の余白については、スタイルシートは後に書いたものが優先ということで
    書いたものを並び替えてみて解消しました。
    ありがとうございました。

    ブログのURLです。

    3点目のフォントの設定ですけど、対象となる変数は何を指定すれば
    よろしいでしょうか?
    どうかよろしくお願いいたします。

    ps
    夏休みですが?
    ごゆっくりお過ごしください^^

  15. しげぞう 投稿作成者

    あっくん様

    コメントありがとうございます。1点目と2点目に関してはおそらくスタイルシートの記述に原因があると思いますが、状況がちょっと把握できませんので、URLを教えて頂けると原因の特定ができるかと思います。コメント公開時にはURLは削除しますので、どうぞよろしくお願い致します。

    また、3点目、フォントの初期化ですが、スタイルシートで書き直すよりもスタイルシートの一番下にフォント変更のコードを追加するほうが良いと思います。スタイルシートは後に書いたもの(下に書いたもの)が優先的に反映されますので、一番下に追加すればOKです。それだと上手くできなかった時にも一番下の記述を削除するだけなので、分かりやすくて簡単になるかと思います。

    ※これからちょっと用事で出かけるのでコメントの返信が遅くなるかもしれません。土曜か日曜には返信できると思いますが、最悪週明けになるかも知れません。なので非常に申し訳ですが、気長に返信を待って頂けると助かります。どうぞよろしくお願い致します。

  16. あっくん

    しげぞう様

    先日はFBのPage Pluginの件でありがとうございました。
    お盆で恐縮ですが、3点ご教授ください。

    ◆1点目
    グローバルナビを設置したのですが、ナビの右端が、ブログの右端に
    ひっついています。
    また、サイドバーのタイトルのカスタマイズも同じく、右端がブログの
    右端にひっついています。
    どうぞよろしくお願いいたします。

    私のブログは width: 960px
    #navi-bar{max-width:960px;} /* メニュー全体の幅 */

    左右のスペースの背景色を変更した際に、左の余白を
    padding-left: 20px としています。(これが原因?)

    ◆2点目
    記事本文の上部に必要以上の余白があり、これを適正にしたいのです。
    私のブログの構成は

    記事タイトル
    タグ
    【ココの余白が広いんです】
    記事本文

    ◆3点目
    記事本文のフォントの初期値をスタイルシートで設定するには、
    どこを書き換えればいいのか教えてください。

    初歩的なことばかりでお申し訳ないです。