Seesaa Seesaaカスタマイズ メニューバー

Seesaaブログにメニューバーを設置する方法

Seesaaブログにメニューバー（グローバルナビゲーション）を設置する方法は何種類かあるようですが、個人的に一番簡単に設置できそうな方法について書いていきます。

メニューバーのソースを追加する場所

メニューバーを設置するためには、デザイン＞PC＞コンテンツからブログ説明にソースを追加する方法と、新たに自由形式のコンテンツを追加する方法があります。
どちらの方法でも大差はないですが、コンテンツを新たに追加したほうが、後の自由度は高くなりそうな気がします。

追加するソース

<div id="menubar">
        <ul>
          <li><a href='#'>Home</a></li>
          <li><a href='#'>メニュー1</a></li>
          <li><a href='#'>メニュー2</a></li>
          <li><a href='#'>メニュー3</a></li>
          <li><a href='#'>メニュー4</a></li>
          <li><a href='#'>メニュー5</a></li>
        </ul>
</div>

idのmenubarやメニューXは任意で変更可能です。
#の部分にリンクするURLを入力してください。（#は削除する）

ここでは、HOMEを入れて6個のメニューになっていますが、liを追加や削除することで表示するメニューの数を変更できます。

ブログ説明にソースを追加

ブログ説明にソースを追加する方法は2つ。1つは、コンテンツHTMLを編集する方法と、挿入テキスト（下部）に追加する方法があります。

コンテンツHTML編集に追加

ブログ説明をクリックします。

右上のコンテンツHTML編集をクリックします。

元から入力されているソースの下に「追加するソース」を追加して保存をします。

挿入テキスト（下部）に追加

ブログ説明をクリックします。

挿入テキスト（下部）に「追加するソース」を追加して保存します。ポイントは上部ではなく下部で。

自由形式のコンテンツを追加

左のコンテンツから自由形式を探して、ブログ説明の下に追加します。テンプレートの種類によっては、記事の上に追加したほうがいい場合もあります。

追加したら、自由形式をクリックして「追加するソース」を追加します。

タイトルは、後で編集するときわかりやすいように「メニューバー」などにしておきます。

最後に保存をクリックします。コンテンツ選択画面でも保存します。

メニューバーの装飾

デザイン＞PC＞デザイン設定から、使用しているテンプレートのタイトルを選択します。

今回は、ライトブルーの右サイドバーに追加します。

スタイルシートの一番下に次を追加します。

/* menubar */
#menubar {
  width:810px;
  margin:0px;
  padding:0;
}
#menubar ul{
  padding:0px;
  list-style: none;
}
#menubar ul li{
  display:inline;
}
  
#menubar ul li a{
  color:#444;
  display:block;
  float:left;
  margin:0;
  padding:0;
  overflow:hidden;
  text-align:center;
  width:133px;
  line-height:30px;
  font-size:14px;
  font-weight:bold;
  border-bottom: solid 2px #2E5056;
  text-decoration:none;
  white-space: nowrap;
}

#menubar ul li a:hover{
  color:#fff;
  border-bottom: solid 2px #FFFF00;
  background:#2E5056;
}
/* menubar */

これは、ライトブルーに6個のメニューバーを設置する場合のコードです。

各カラーコードは好みで変更します。

他のテンプレートの場合、width:810とwidth:133あたりを変更すると使用できます。

メニューバーの位置調整

このままだと、位置が下で背景とかぶって見づらいので、h1を上にずらして位置を整えます。
メニューバーの装飾と同様に、使用しているテンプレートを選択します。

スタイルシート内からh1を探して、padding-topを42pxから22pxに変更します。

変更すると、上の余白がなくなってきれいに収まります。

スポンサーリンク