ブログの上部にスクロールしても常に表示されるメニューバーっぽいものを設置したい |
||
(3)
コピペするだけで、完成するのでぜひチャレンジしてみてください(´∀｀)
スクロールバーが表示されない不具合が生じていたようです。
2013年8月18日に修正をしました。申し訳ありませんでした。
スポンサードリンク
HTML編集
まずは、以下をコピーして<head>～</head>内に貼り付けてください。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
また、以下もコピーして貼り付けてください。
<script type="text/javascript">
$(function() {
var headerMenu = $('.headerMenu');
var headerMenuTop = headerMenu.offset().top;
$(window).scroll(function () {
var winTop = $(this).scrollTop();
if (winTop >= headerMenuTop) {
headerMenu.addClass('headerFixed')
} else if (winTop <= headerMenuTop) {
headerMenu.removeClass('headerFixed')
}
});
});
</script>
そして、以下の【上部固定バー】を、
<!--▲▲ ヘッダー ▲▲-->
<div id="outline_main">
の下に貼り付けてください。
（おそらく貼り付ける場所はどこでも大丈夫ですが、念のため）
<!--▼ 上部固定バー ▼-->
<div class="headerMenu">
<ul id="header_menu_bar">
<li><a href="<%url>">トップページ</a></li>
<li><a href="<%url>archives.html">サイトマップ</a></li>
<li><a href="<%url>blog-entry-1.html">記事１</a></li>
<li><a href="<%url>blog-entry-2.html">記事２</a></li>
<li><a href="<%url>blog-category-1.html">カテゴリ１</a></li>
<li><a href="<%url>blog-category-2.html">カテゴリ２</a></li>
<li><a href="<%url>blog-category-3.html">カテゴリ３</a></li>
</ul>
</div>
<!--▲ 上部固定バー ▲-->
スタイルシート編集
スタイルシートの編集では、以下のものを追加してください。
/***************************************** ▼上部固定バー▼ */
.headerMenu {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 9999;
}
.headerFixed {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
/***************************************** ▲上部固定バー▲ */
また、こちらも追加してください。、
/* ▼上部固定バー▼ */
ul#header_menu_bar {
font-size: 75%; /* 文字サイズ */
height:35px; /* 高さ */
background-color:#272727; /* 背景色 */
padding-left:0px;
margin-left:0px;
margin-top:0px; /* 上の間隔 */
margin-bottom:5px; /* 下の間隔 */
}
#header_menu_bar li {
list-style-type:none;
float:left;
line-height:35px; /* 高さ */
margin:0px;
padding:0px;
}
#header_menu_bar li a {
display:block;
text-align:center;
width:80px; /* １つのメニューボタンの幅 */
border-right:1px solid #333333; /* 区切り線 */
color:#ffffff; /* リンク文字の色 */
background-color:#272727; /* メニューボタンの背景 */
text-decoration:none;
}
#header_menu_bar li a:hover{
color:#ffffff; /* マウスが乗ったときのリンク文字の色 */
background-color:#474747; /* マウスが乗ったときの背景色 */
text-decoration:none;
}
/* ▲上部固定バー▲ */
あとは色や大きさ等を調整すれば、完成となります。
- 関連記事
-
- ブログの上部にスクロールしても常に表示されるメニューバーっぽいものを設置したい
- メニューバーの項目数を増やしたり減らしたりしたい
こちらに書いてある通り編集してみたのですが、きちんと反映されませんでした。たぶん私の編集が間違っているのだと思います。。。
メニューバーの角を丸くすることに関しても返信いただきましたが、そちらもうまくできませんでした。
何度かチャレンジしてみます！
グレーが基本色のテンプレートです。
メインカラー ：#444444
メニューカラー：#333333
サブカラー ：#EFEFEF
ラインカラー ：#999999
で主に構成しています。CSSにて色指定箇所を置換すれば簡単に色替えが可能です。 お好みの色に変更して楽しんでください。
SP01_Blue
爽やかな水色が基本色のテンプレートです。
必ず結果が出るブログ運営テクニック
もっとカスタマイズしたい方必見！
毎日メンテナンスするだけで･･･
