シーサーブログにグローバルナビを設置する方法

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

今回はシーサーブログにグローバルナビを設置するカスタマイズを紹介します。このグローバルナビを付ける事でブログ内の重要な記事に誘導する事も出来るし、訪問者から見ても親切なブログになります。

結果的にページビュー(PV)も増えるし滞在時間を長くできる可能性もあるのでこれもSEO対策の1つになります。ちなみにグローバルナビを設置するとこのようになります。

グローバルナビ-1

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

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

項目の数を決めたら自分のブログの幅を確認しておきましょう。以前の記事「ブログのコンテンツやサイドバーの幅を変更するカスタマイズ」で横幅を変更した方は全体の幅を確認しておいて下さい。#containerという部分の「width」で横幅を設定した数字がそれです。

ブログの幅を変更していない方は「デザイン」⇒「デザイン設定」⇒「自分のテンプレート名」をクリックして「#container」という部分の「width」に書かれている数字をメモしておきましょう。

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

シーサーブログの管理画面から「デザイン」⇒「HTML」と進み、ヘッダー部分を探します。このコードを探して下さい。

<div id="banner">
<% content_header %>
</div>

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

<!--グローバルナビゲーション開始-->
<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の適用にチェックを入れているか確認。

HTML

今度はシーサーブログの管理画面に戻り、「デザイン」⇒「デザイン設定」⇒「自分のテンプレート名」をクリック。沢山のコードが書かれていると思いますが、一番下に次のコードを追加します。

/*グローバルナビゲーション設置場所*/
#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{width:860px;}   /* メニュー全体の幅 */
#navi-bar ul.menu li a{
  width:215px;            /* ボタンの幅 */
  line-height:30px;       /* ボタンの高さ */
  font-size:14px;         /* ボタンの文字サイズ */
}

ここのメニュー全体の幅「width:860px」という部分には最初に確認したブログの全体幅を記入します。それから「全体の幅」を「メニュー数」で割った数字を「ボタンの幅」という部分に記入。

この例の場合は860pxに4つのボタンを設置するので860÷4=215pxという計算になるので「ボタンの幅」は215pxとなっている訳です。

続いて最後に次のコードをさらに追加。

/*▼▼▼ 色・文字装飾・背景など */
#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;    /* 背景画像繰り返し */
}

横に書かれた説明を見ながら自分の好きな色を指定して下さい。また、背景に画像を使う場合は画像のURLを background-image:urlの後の( )の中に入力。画像のURLの調べ方は別記事で紹介しているのでそれも参考に。
シーサーブログの画像URLを調べる方法

それと記事上のナビゲーションを設置している場合はこのようにグローバルナビとくっついていると思います。

ナビ移動-1

対策は2つあって、1つはナビを下にちょっと位置調整する方法と記事上のナビを削除して記事下に移動する方法の2つ。

下に調整するなら次のコードも追加しておきましょう。数値はお好みで変更。

.navi {margin-top:20px}

それから2つ目のナビを記事下に持っていくには次の記事を参考に。
記事上のナビゲーションを記事下に移動するカスタマイズ

どちらでも好きな方を選んで追加しておきましょう。

パンくずリストと重なってしまう場合

グローバルナビを設置した影響でパンくずリストと重なってしまう場合はパンくずリストの位置調整をします。パンくずを設置した時に次のように位置調整をしました。

.crumb {
clear: both;
margin: -10px 0 10px 0;
font-size: 14px;
line-height: 18px;}

これを下にずらすので「margin:-10px」という部分を40pxくらいにしておきましょう。

.crumb {
clear: both;
margin: 40px 0 10px 0;
font-size: 14px;
line-height: 18px;}

数字はお好みで変更して重ならないように調整してみて下さい。
シーサーブログカスタマイズとSEOまとめ

シーサーブログにグローバルナビを設置する方法”に15件のコメントがあります。

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

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

  1. しげぞう 投稿作成者

    >ユウキマン様

    コメントありがとうございます。まずはナビに設置したい記事をそれぞれ表示させてURLをメモ帳などに貼り付けておきます。それで、ナビの各URLの部分(記事中では「#」の部分)に該当のURLを入れて保存すればそれぞれのURLに飛びますので確認してみて下さい。もし、それでもできない場合には再度コメント頂けると助かります。よろしくお願いします。

  2. ユウキマン

    グローバルナビの設置法方法教えて頂きありがとうございます!

    1つ教えて下さい。
    しげぞうさんのサイトのこのページであれば、https://affiliate150.com/set-up-navi
    ですが、グローバルナビの各項目ページ(リンク先)はどうやって作るのですか?
    宜しくお願いします!

  3. たか

    教えて頂きありがとうございます!!
    2個あるかと思いましたが、1個だけでした。

  4. しげぞう 投稿作成者

    >たか様

    返信ありがとうございます。サイドバーの余白を空けるのは簡単なのですが、たか様のサイトでカスタマイズの気になる部分がありますので先にそれを対処してもらえないでしょうか。それによって説明する方法が反映されない可能性があります。

    ブログの初期状態ではサイト全体が「div id=”container」という箱で囲まれているはずなのですが、たか様のサイトではサイトのヘッダーの部分しか囲まれていません。これはおそらくHTMLの「div id=”banner”」という部分で「div」を終わらせる「/div」が1回多く記述されていると思われます。

    手順としてはシーサーブログのHTMLを一度メモ帳等に全部コピーして貼り付けしておきます(バックアップのため)。それでシーサーブログの管理画面からHTML⇒適応中のHTMLをクリック。

    <div id=”banner”>
    <% content_header %>
    </div>

    という部分があると思いますが、ここで上記のように「/div」が1回だけ記述されているか確認して下さい。2個あれば1つは削除して下さい。もしかするとカスタマイズした部分もちょっと変わる部分もあるかも知れません。見た目が大きく崩れた場合は元に戻してください。一度これを試してもう一度コメントいただけるとありがたいです。よろしくお願い致します。

  5. たか

    返信ありがとうございます。
    もう一つ教えて頂きたいのですが、サイドバーのコンテンツ上の余白を入れたいのですがなかなか見つかりません。教えて下さい(._.)

  6. しげぞう 投稿作成者

    >たか様

    コメントありがとうございます。線がどの線なのかはよく分かりませんが、今確認して見たところ、きちんと設置はできているようです。もしかするとたか様のブラウザで反映されていない部分があるかもしれませんので、一度別のブラウザで確認するかF5をおしてリロードして確認してみて下さい。

    それとも線というのがまた別の部分の話なのでしょうか?ちょっと分かりませんが見た感じではおかしい部分はないように感じます。私の勘違いだったらすみません。別の部分であればまたいつでもコメント下さい。中々カスタマイズされていていい感じのブログですね。

    あ、それから正月は作業できませんのでコメントの返信は年末年始は少しおそくなるかもしれませんが、できるだけコメントはチェックして返信できるようにしますね。

  7. たか

    初めまして!
    いつもこちらのサイトで勉強させてさせてもらっています!
    グローバルリンクを設置は出来たのですが線が左まで伸びていて変なんですがどうすれば直せるでしょうか?

  8. しげぞう 投稿作成者

    >こめり様

    コメントありがとうございます。まず別タブが発生するのはそれぞれのリンクを設置した部分にtarget=”_blank”という記述をしているためです。この部分を削除すると同じタブで開くようになります。それから開いたページでグローバルナビが反映されていないのはおそらくキャッシュの問題ではないかと思います。F5を押してリロードして確認し、それでも反映されていないようであれば記述ミスかも知れません。

    どうしても反映されないようであればURLを教えて頂けると原因を探す事ができるかも知れません。もちろん教えて頂いたURLはコメント公開時には削除しますのでどうしても反映されない場合は教えて頂けると助かります。

  9. こめり

    初めまして。初心者なりに色々調べこのサイトに辿り着き
    とても分かりやすく設定させて頂いてます。

    今回グローバルナビを設定してみたのですが
    ナビのリンクをクリックすると
    新しいタブが発生しページに飛んでしまいます。
    そして、そのタブのページにはグローバルナビが表示されていません。
    同じウィンドウ内で表示させるには
    どこをいじったらいいのでしょうか?

    ちんぷんかんぷんな質問で申し訳無いです
    よろしくお願いします。

  10. しげぞう 投稿作成者

    >うしくん様

    コメントありがとうございます。自分なりに分かりやすく書いたつもりでも上手く伝わらない事が多々あるので、このようなコメントは非常に嬉しく思います。また分かりにくい部分やできない部分があれば随時記事も修正していきますので今後もどうぞよろしくお願い致します。

  11. うしくん

    今新しくシーサーブログを作っているのですが、
    とてもわかりやすくて参考になります!
    こちらのサイトの管理人さんのおかげでうまくできそうな気がします^^
    ありがとうございます。

  12. しげぞう 投稿作成者

    >葉月 裕子様

    わざわざコメントありがとうございます。励みになります。今後も色々と実験をしながら記事を増やしていきたいと思いますのでよろしくお願いします。

  13. 葉月 ゆうこ

    すごくわかりやすくて参考になります。まだ途中ですが頑張って毎日自分のブログをアレンジしてます。貴サイトがきっかけで本格的にWEB、SEOの勉強がしたくなりました。
    http://freeworking.seesaa.net/
    ありがとうございます。

  14. しげぞう 投稿作成者

    >ふるす様

    コメントありがとうございます。トップページで正しく表示されているのであれば他のページでも大丈夫と思うのですが、時々シーサーブログの反映がおかしい時がありますので、お手数ですが、もう一度コードを貼りなおしてやり直してみてブログを表示、それから「Ctrl」キーと「F5」キーを一緒に押してリロードしてみて下さい。それでも上手くできない場合はテンプレート名を教えてもらえると助かります。私も確認してみますね。

  15. ふるす

    こんばんは。そしてはじめまして。いつも読ませていただいています、ふるすと申します。
    この度、このページで紹介されているグローバルナビを採用させていただいたのですが、同じようにHTML内に設置しても、トップページには正しく表示されるのですが、記事の方にはちゃんと望ましい形に設置されず、普通に箇条書きの状態でナビが表示されています。

    これを修正する場合は、コンテンツの記事の方にも手をくわえないといけないのでしょうか。
    文章が下手で、伝わりにくい質問で申し訳ないのですが、お返事をいただきたいです。