ナチュラリーよろしく!

いつも気取らず自然体で、普段と変わらず飾らないで、本来の自分でいられたらイイナな。当サイトはアフィリエイト広告を利用しています。

MENU

無料版はてなブログでグローバルメニューを追加する方法

当ブログではアフィリエイト広告を利用しています

こんにちは、ともちです。

 

  • 「CSS」とか「HTML」とかの言葉、聞いたことはあるけれど、意味がよくわからない。
  • ブログを見やすくカスタマイズしてみたいけど、どうやったらいいのかわからない。

 

そんな私と同じ悩みをお抱えのアナタに、初心者でも簡単に、ブログの見栄えが少しだけど良くなる方法をお教えします。

 

それは、

【無料版はてなブログでグローバルメニューを追加する方法】です。

 

「グローバルメニューって何ぞや?」

って、今思いましたね?

 

はい、実は私も知りませんでした。

ネットサーフィン(死語)をしていたら、たまたま偶然知りました。

 

 

【目次】

 

グローバルメニューとは

f:id:tomochi1227:20210531170757p:plain

 

数あるブログの中でも、見やすいと感じるブログにはからずと言っていいほど設置されている、この赤く囲まれた部分。

この部分を【グローバルメニュー】と言います。

 

これがあると、自分が読んでみたいカテゴリーが探しやすくなるので便利ですよね。

 

なので、この【グローバルメニュー】を、自分のブログにも設置しちゃいましょう!

って話です。

 

HTMLコードを貼り付ける

今回の記事はこちらの記事を参考にさせて頂きました。

【ブログカスタマイズ】「はてなブログ」でグローバルメニューを追加する方法を紹介|初心者でもカンタン - redoブログ

 

ヘッダにコピペ

【デザイン】⇒【カスタマイズ】⇒【ヘッダ】⇒【タイトル下】

と進みます。

f:id:tomochi1227:20210531170803p:plain

 

そして、以下をコピペします。

 

<span class="menu-toggle"><i class="blogicon-reorder lg"></i>MENU</span>
<ul id='menu'>
<div class="menu-inner">
<li><a href='url'>TOP</a></li>
<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>
</div>
</ul>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.3.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();
}
});
</script>

 

<li><a href='URL'>カテゴリ1</a></li>の「URL」と「カテゴリ1.2.3.4」は、各自で設定して下さい。

 

こんなカンジ

f:id:tomochi1227:20210531170750p:plain

 

【変更を保存する】を忘れずにポチッ

 

CSSコードを貼り付ける

次は、【グローバルメニュー】のようなレイアウトになるようにします。

 

{}デザインCSSにコピペ

【デザイン】⇒【カスタマイズ】⇒【{}デザインCSS】

と進みます。

f:id:tomochi1227:20210531170810p:plain

 

そして、以下のコードを貼り付けます。

 

#menu {
position: relative;
width: 100%;
padding-left: 0px;
height: 40px;
background: #343838;/*グローバルメニュー背景色*/
}
.menu-inner{
width: 968px;
margin: 0 auto;
height: 40px;
}
#menu li {
list-style-type: none;
float: left;
height: 40px;
text-align: left;
}
#menu li a {
padding-left: 15px;
padding-right: 15px;
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;

}
/*パソコン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;
}
}

 

【変更を保存する】を忘れずにポチッ

 

これで、【グローバルメニュー】の完成です!

背景が「黒帯ライン」で、文字色が「白」になっていると思います。

 

色変更もできるようですが、今回はここまでです。

 

【無料版はてなブログでグローバルメニューを追加する方法】のまとめ

先輩方のおかげで、ただコピペするだけで、簡単に設置することができました。

ありがとうございました。

 

私のブログも、これでちょっとは見栄え良くなったんじゃないかなぁって思います。

単純ですかね(笑)

 

色を変えたりはまたの機会にして、しばらくはこのままにしておこうかと思います。

個人的には、愛猫とマッチしてて好きです。

 

これから少しずつ、見栄えの良いブログにカスタマイズしていけたらイイなぁって思います。

 

<関連記事> 

 無料版でもできる、はてなブログのカテゴリー階層化の手順】の仕方を紹介した記事はコチラ

tomochi1227.hatenablog.com

 

 無料版はてなブログにグーグルアドセンス広告を貼る方法を紹介した記事はコチラ

tomochi1227.hatenablog.com

 

 無料版はてなブログにグーグルサーチコンソールを導入する方法を紹介した記事はコチラ

tomochi1227.hatenablog.com