BUN HACK

MENU

はてなブログにグローバルメニューを設置する方法

f:id:bunntinnmalu:20180111163935p:plain

スポンサードリンク
   

グローバルメニューを設置する方法

その①:「ヘッダ」の「タイトル下」に張り付ける

今回は初心者でも分かりやすいようにデモブログを使って説明します。

まず、「ダッシュボード」から「デザイン」を開いてください。

すると、こんな画面が出てくるので、青丸で囲まれた部分をクリックして画面を切り替えてください。

f:id:bunntinnmalu:20180111165830p:plain

切り替えたら、こんな画面になるので、青い四角で囲まれた「ヘッダ」をクリックしてください。

f:id:bunntinnmalu:20180111170109p:plain

クリックすると、こんな画面になります。

f:id:bunntinnmalu:20180111170301p:plain

そしたら、以下のコードを「タイトル下」に貼り付けてください。

 

<span class="menu-toggle"><i class="blogicon-reorder lg"></i>MENU</span>

<ul id='menu'>

<div class="menu-inner">

<li><a href='ここにURLを貼る'>カテゴリー1</a></li>

<li><a href='ここにURLを貼る'>カテゴリー2</a></li>

<li><a href='ここにURLを貼る'>カテゴリー3</a></li>

<li><a href='ここにURLを貼る'>カテゴリー4</a></li>

<li><a href='ここにURLを貼る'>カテゴリー5</a></li>

</div>

</ul>

 

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

<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();

 

 

 張り付けるとこんな感じになります。

f:id:bunntinnmalu:20180111171709p:plain

これで半分完成しました!

その②:「デザインCSS」に張り付ける

次に、先ほどの画面を開き、今度は「デザインCSS」をクリックしてください。

f:id:bunntinnmalu:20180111171931p:plain

そしたら、以下のコードを貼り付けてください。

#menu {

position: relative;

width: 100%;

padding-left: 0px;

height: 40px;

background: #f0e68c;/*グローバルメニュー背景色*/

}

.menu-inner{

width: 968px;

margin: 0 auto;

height: 40px;

}

#menu li {

list-style-type: none;

float: left;

height: 40px;

text-align: center;
width: 20%;


}

#menu li a {

-left: 15px;

-right: 15px;

display: block;

color: #ffffff;/*グローバルメニュー文字色*/

font-size: 130%;

font-weight: bold;

line-height: 40px;

}

#menu li:hover a {

color: #00DFFC;

background: #ffffff;

transition: all .5s;

}

 

.menu-toggle{

display: none;

}

 

/*パソコン1カラム*/

@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;

}

}

 

 完成すると、こんな感じになります。

f:id:bunntinnmalu:20180111173301p:plain

その③:説明

ここにURLを入れる」部分にブログの記事のURLを入れてください。

カテゴリー〇」には、カテゴリーの名前を入れてください。

文字の大きさを変えたい場合は、「130%」の数値を変えてください。

グローバルメニューの色を変えたい場合は、

WEB色見本 原色大辞典 - HTMLカラーコード

このサイトを参考にして、「#~~~」を変えてください。

最後に

何か分からないことがありましたら、ご気軽にご相談ください(廃品回収車風)

最後までお読みいただきありがとうございました。

スポンサードリンク