ページTOPへ

Seesaaブログ【新システム】のヘッダー画像の下にメニューバーを設置する方法

Seesaaブログ【新システム】のヘッダー画像の下にメニューバーを設置する方法



当サイトからご購入の方に豪華特典付き!






Seesaaブログ【新システム】のヘッダー画像の下にメニューバーを設置する方法

 

Seesaaブログ新システムのデザインはスーパー超シンプルです。

 

 

ヘッダー画像の下にメニューバーがありません、上図のようにメニューバー設置することによって、主要なページへ誘導する事もできるし、訪問者もクリックしてくれる確率が高いです。設置することがおススメです。

 

今回Seesaaブログ【新システム】のヘッダー画像の下にメニューバーを設置する方法をご紹介したいと思います。

 

 

ステップ1、設置したい項目の数を決める

 

メニューバーを設置する前にいくつの項目を作るかを決めましょう、項目の数を決めたら自分のブログの幅を確認しておきます。

 

ブログの幅は「.l-wrapper」という部分の「width」の数字です。数字をメモしておきましょう。

 

 

ステップ2、メニューバーを設置する

 

 

シーサーブログの管理画面から「デザイン」⇒「デザイン設定」⇒「設定したデザインタイトル」をクリックします。

 

 

 

「HTML編集」をクリックします。

 

 

 

するとHTMLコードがズラリ並んでいるので、その中から次のコードを探します。

 

 

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

 

<!--グローバルナビゲーション開始-->
<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」には、そのボタンに表示する文字を記入します。メニューを追加してもOK、減らしても大丈夫です。自分のサイトに合わして調整してください。

 

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

 

 

ステップ3、スタイルシートを編集する

 

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の後の( )の中に入力しましょう。

 

ここまでメニューバーの設置はできたけですが、実際に見てみると下のコンテンツ(サイドバーと記事タイトル)との間隔がとても狭いです。

 

 

対策は先ほどコードを追加した「スタイルシート」に更に以下のコードを追加します。

 

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

 

これは、サイドバーや記事タイトルと本文を含むコンテンツの上に余白を作るコードです。一応30pxの余白にしているですが、これは自分で好きな数値に変更しておいてね。

 

以上ヘッダー画像の下にメニューバーの設置は完了です。

関連ページ

Seesaaブログ【新システム】のヘッダー画像を設置する方法
Seesaaブログ【新システム】のヘッダー画像を設置する方法について解説します。
Seesaaブログ新デザインシステムのパンくずリストを設置する方法
Seesaaブログ新デザインシステムのパンくずリストを設置する方法について解説します。
Seesaaブログ【新システム】の背景や文字を自由に変更する方法
Seesaaブログ【新システム】の背景や文字を自由に変更する方法について解説します。
Seesaaブログ【新システム】をSearch Consoleと連携させる方法
Seesaaブログ【新システム】をSearch Consoleと連携させる方法について解説します。
Seesaaブログにファビコンの作成と設置方法【新システム】
Seesaaブログにファビコンの作成と設置方法について解説します。

初心者でも月10万円

カテゴリー


ホーム 初心者のための講座 お小遣いサイト攻略法 お役立ち情報 初心者のための教材