ページTOPへ

Seesaaブログのヘッダー画像の下にメニューバーを設置する方法

Seesaaブログのヘッダー画像の下にメニューバーを設置する方法



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






Seesaaブログのヘッダー画像の下にメニューバーを設置する方法

今日はヨウです。

 

 

無料ブログのヘッダー画像の下にメニューバーがあったら、ブログ内の重要な記事に誘導する事が出来ます。ユーザーが滞在時間を長くできる可能性もあるので、これもSEO対策の1つになりますね。

 

 

今日Seesaaブログのヘッダー画像の下にメニューバーを設置する方法をご紹介したいと思います。

 

 

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

 

 

シーサーブログの管理画面から「デザイン」⇒PC⇒「HTML」⇒「HTMLの追加」をクリックします。

 

Seesaaブログ

 

<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>
<!--メニューバー終了-->

 

メニューは任意で変更可能です。#の部分にボタンクリック時にリンクするURLを(#を消す)入力してください。

 

追加したら、「HTML名」のところに任意の名前を入力して保存してください。

 

Seesaaブログ

 

保存したら変更した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;}

 

/* 位置・サイズ調整 */
#navi-bar{width:900px;} /* メニュー全体の幅 */
#navi-bar ul.menu li a{
width:180px; /* ボタンの幅 */
line-height:30px; /* ボタンの高さ */
font-size:14px; /* ボタンの文字サイズ */
}

 

ここのメニュー全体の幅「width:900px」はブログの全体幅です。ボタンの幅は「全体の幅」を「メニュー数」で割った数字を記入します。

 

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

 

/*色・文字装飾・背景など */
#navi-bar ul.menu li a{ /* 通常時 */
color:#ffffff; /* 文字色(白) */
font-weight:bold; /* 太字 */
text-decoration:none; /* 下線(なし) */
background-color:#38b48b; /* 背景色(翡翠色) */
background-image:url(); /* 背景画像 */
background-repeat:repeat; /* 背景画像繰り返し */
}
#navi-bar ul.menu li a:hover{ /* カーソルが乗った時 */
color:#ffffff; /* 文字色(白) */
font-weight:bold; /* 太字 */
text-decoration: underline; /* 下線(あり) */
background-color:#38b48b; /* 背景色(翡翠色) */
background-image:url(); /* 背景画像 */
background-repeat:repeat; /* 背景画像繰り返し */

}

 

背景に画像を使う場合は画像のURLを background-image:urlの後の( )の中に入力してください。

 

画像のURLの調べ方は⇒Seesaaブログの画像をアップロードとURL(アドレス)を調べる方法を参考してください。

 

 

Seesaaブログ

 

最後にプレビューをクリックして確認したら、保存します。

 

ではお疲れ様でした。

 

 

 

 

 

 

 

 

関連ページ

Seesaaブログ【新システム】カスタマイズまとめ
Seesaaブログ【新システム】カスタマイズについて解説します。
Seesaaブログの作成方法
Seesaaブログの作成方法について説明します。
Seesaaブログの不要な広告を消す方法
Seesaaブログの不要な広告を消す方法
Seesaaブログの画像をアップロードとURL(アドレス)を調べる方法
Seesaaブログの画像をアップロードとURL(アドレス)を調べる方法を説明します。
seesaaブログのヘッダーに好きな画像を設定する方法
seesaaブログのヘッダーにオリジナル画像を設定する方法を説明します。
Seesaaブログのトップページに最近の記事リストを表示する方法
Seesaaブログのトップページに最近の記事リストを表示する方法について説明します。

初心者でも月10万円

カテゴリー


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