はてなProにしたので、グローバルナビゲーションを設置してみました
グローバルナビゲーション、という名前自体知らなかったのですが、ブログの上部にあるメニューのアイコン、あれ便利ですよね。
どんな話題があるのか一目でわかるし、興味あるところだけ斜め読みできるし、ずっとつけたかったんです！でも、はてなの場合はProでないとできないみたいで、この度ようやくカスタマイズすることができました。
まず、前提としては、カテゴリー分けしているかたにとって設置のメリットがあると思います。カテゴリーにはそれぞれ「カテゴリー別」の「項目」をクリックした時のURLがあります。
例えば、当ブログの場合には
http://www.totalbeauty.work/archive/category/グルメ
です。
グローバルナビゲーションの1つ1つのボタンはこの、カテゴリートップに飛ばすように指定するということを最初に理解しておくと、グローバルナビゲーションの設置がスムーズに行くかと思います＾_＾
あとはこちらのサイトからソースをコピペさせていただきました。<a href=" ">には、飛ばしたい先のURLを指定します。つまりカテゴリー4つをグローバルナビゲーションにしたければ、４つのURL指定が必要です。
www.yukihy.com
今見えているグローバルナビゲーションのソースはこちらです。↓これを、「デザイン」の「レンチマーク」のアイコンを押して、「ヘッダ」の「タイトル下」に貼ります。
<span class="menu-toggle"><i class="blogicon-reorder lg"></i>MENU</span>
<ul id='menu'>
<div class="menu-inner">
<li><a href="TOP">http://www.totalbeauty.work">TOP
<li><a href="http://www.totalbeauty.work/archive/category/子育て">子育て</a></li>
<li><a href="http://www.totalbeauty.work/archive/category/レビュー">レビュー</a></li>
<li><a href="http://www.totalbeauty.work/archive/category/グルメ">グルメ</a></li>
<li><a href="http://www.totalbeauty.work/archive/category/ブログ運営">ブログ運営</a></li></div>
</ul>
<script type="text/javascript" src="">http://code.jquery.com/jquery-1.9.1.min.js">
<script>
$(function(){
$(".menu-toggle").on("click", function() {
$(this).next().slideToggle();
});
});
$(window).resize(function(){
var win = $(window).width();
var p = 768;
if(win > p){
$("#menu").show();
} else {
$("#menu").hide();
}
});
</script>
でもこれだけではデザインが整っていないので、
「ヘッダ下」のもっと下にある「デザインCSS」のところに、下記のソースを貼ります。/* <system section="theme" selected="novel"> */
@import "/css/theme/novel/novel.css";
/* </system> *//* <system section="background" selected="default"> */
/* default */
/* </system> */#menu {
position: relative;
width: 100%;
padding-left: 0px;
height: 40px;
background: #ff1493;/*グローバルメニュー背景色*/
}
.menu-inner{
width: 968px;
margin: 0 auto;
height: 40px;
}
#menu li {
list-style-type: none;
float: left;
height: 40px;
text-align: center;
width:12%;
}
#menu li a {
display: block;
color: #ffffff;/*グローバルメニュー文字色*/
font-size: 80%;
font-weight: bold;
line-height: 40px;
}
#menu li:hover a {
color: #00DFFC;
background: #ffffff;
transition: all .5s;
}.menu-toggle{
display: none;
}/*パソコン１カラム*/
@media screen and (max-width:968px){
.menu-inner{
width: 768px;
}
}/*タブレット*/
@media screen and (max-width:768px){
#top-editarea{
height: initial;
background: #343838;/*MENU背景色*/
text-align: right;/*MENUの文字の位置*/
width: 100%;
}
.menu-toggle{
color: #ffffff;/*MENUの文字色*/
display: inline-block;
padding: 5px;
margin: 3px;
}
#menu {
width: 100%;
display: none;
height: initial;
padding: 0;
margin: 0;
}
.menu-inner{
width: 100%;
height: initial;
position: static;
margin: 0;
}
#menu li{
float: none;
height: 35px;
width: 100%;
list-style-type: none;
background: #00DFFC;/*リスト文字の背景色*/
margin: 0 auto;
text-align: left;/*リストの文字の位置*/
}
#menu li a {
height: initial;
color: #343838;/*リスト文字色*/
display: block;
}
#menu li:hover a{
color: initial;
background: initial;
}
}
これで出来上がり！
色を選ぶときに参考にしたサイトはこちらです。カスタマイズしてみてくださいね。
www.colordic.org
