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

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

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

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

著作情報

この記事を書いた人

sigezo

WEBエンジニア11年目。これまでに100を超えるサイトの立ち上げや運営に携わり、2017年に法人化。カスタマイズ、デザイン、ツール作成、サイト移転まで何でもこなします。

sigezoをフォローする

もしもへ https://affiliate150.com/important-point

Amazonや楽天のアフィリエイトの併用は「もしもアフィリエイト経由」がおすすめの理由

Amazonアソシエイトと楽天アフィリエイトを併用するなら「もしもアフィリエイト...

affiliate150.com

2023.05.24

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

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

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

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

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

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

シーサーブログの管理画面から「デザイン」⇒「CSS/HTML編集」⇒「適応中のデザインタイトル」を選択し、「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">メニュー１</a></li>
<li><a href="#" target="_blank">メニュー２</a></li>
<li><a href="#" target="_blank">メニュー３</a></li>
<li><a href="#" target="_blank">メニュー４</a></li>
<li><a href="#" target="_blank">メニュー５</a></li>
</ul>
</div><!--navi-bar終了-->
<!--グローバルナビゲーション終了-->

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

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

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

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

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

先ほどは「HTMLの編集」でグローバルナビを設置したので、残りはスタイルシートで調整していきますよ。先ほど同様にseesaaブログの管理画面から「デザイン」⇒「CSS/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{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の後の（　）の中に入力して下さい。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• ⇒WordPressを始めるのに必要な物や料金
• ⇒WordPressブログの始め方と使い方まとめ！【初心者向け】
• ⇒Seesaaブログカスタマイズまとめ【新システム版】