iiie

“iiie.nagoya” by syttg

CSS:右上に固定されたプルダウン(トグル)メニューの取り付け方

f:id:gorislog:20190407194632p:plain

 

 

ブログデザインを変更しました。

 

今回のカスタマイズに際して、フッターに設置していたメニューをプルダウン式に変更し、fixedで右上に固定、ページ位置がどこにあっても、メニューにアクセスできるようになりました。

 

f:id:gorislog:20190407215320p:plain

 

今回は、僕が設置したプルダウン式のコンパクトなメニューボタンの取り付け方を記載します。

 

 

 関連紹介

 

今回、カスタマイズしたテーマは、以前から愛用させていただいている”ゆきひー”さんが公開しているテーマの『Naked』です。

 

blog.hatena.ne.jp

 

カスタマイズのし易いテーマになっていますので、カスタマイズ初心者の方にはおすすめできるテーマとなっています。

 

今回カスタマイズする際に、元となったコードは、テーマ開発者である”ゆきひー”さんが公開しているグローバルメニューをカスタマイズして制作しています。カスタマイズする前の使用コードは、Nakedのテーマサンプルブログに公開されていますので、グローバルメニューを設置したい方にもおすすめできます。

 

theme-naked.hatenablog.jp

こちらに公開されているコード+Nakedに内包されているコードを変更して、右上に画面固定されたプルダウンメニューの実装をしていきます。

 

カスタマイズする際に使用したCSSの理論を説明されているサイトも追って掲載します。

 

コード

CSS側

#n-menu {
position: fixed;
z-index: 10;
top: 0;
right: 0;
padding: 0;
}
#n-menu .menu-inner {
width: 100%;
height: auto;
}
#n-menu .btn-content {
font-size: 28px;
text-align: right;
}
#n-menu .menu-btn {
display: block;
padding: 15px 15px 0 15px;
color: #172033;
font-size: 28px;
cursor: pointer;
}
#n-menu .menu-content {
display: none;
width: 100%;
}
#n-menu .menu-content > li {
float: none;
width: 100%;
height: 40px;
font-size: 24px;
list-style: none;
padding: 0 15px;
}
#n-menu .menu-content > li > a {
width: 100%;
color: #172033;
line-height: 40px;
}
#n-menu .menu-content > li > a:hover {
color: #6fb7ff;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
border: none;
}
#n-menu .second-level {
display: none;

 

メニューボタンを右上に表示させ、fixedで固定、z-indexで表示位置を一番上にする事で、ページ位置がどの位置に移動してもメニューが触れるように指定しています。

カラー・余白(padding)などの指定はページの条件によえって細かく変更する必要はありますが、おおまかにこのまま使用すれば表示は可能だと思います。

 

position:fixedやz-indexの説明は、以下のサイトで確認するとわかりやすいと思います。

 

saruwakakun.com

saruwakakun.com

 

デザイン→ヘッダー→タイトル下へ記載部分

<nav id="n-menu">
<div class="menu-inner">
<div class="btn-content">
<span class="menu-btn"><i class="blogicon-reorder"></i></span>
</div>
<ul class="menu-content">
<li><a href="URL"><i class="blogicon-home"></i></a></li>
<li><a href="URL"><i class="blogicon-member"></i></a></li>
<li><a href="URL"><i class="blogicon-mail"></i></a></li>
<li><a href="URL"><i class="blogicon-search"></i></a></li>
</ul>
</div>
</nav>
<div style="clear:both"></div>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(function(){
var menuBtn = $(".menu-btn"),
menuContent = $(".menu-content");
menuBtn.click(function(){
menuContent.slideToggle();
});
$(window).resize(function(){
var win = $(window).width(),
p = 768;
if(win > p){
menuContent.show();
}else{
menuContent.hide();
}
});
});
</script>

 

ほぼ、公開されているコードを使用していますが、menu-contentの内部(表示部分)をはてなブログで使用できるアイコンで表示するようにしています。

 

はてなブログで使用できるアイコンに関しては以下のサイトで紹介されているので、変更する際は参考にすると良いと思います。

 

www.foxism.jp

文字の掲載も可能ですが、背景を指定していないので、コンテンツと被りやすく、文字のような線の細いモノだと背景によってメニューが見えなくなるので、背景指定をするなりの対策が必要になると思います。

 

設定→詳細設定→headに要素を追加

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 

 

今回のカスタマイズは、jQueryを使用したトグルメニュー(ハンバーガーメニュー)のようなものですので、はてなブログでjQueryを使用する際は、読み込みを事前に行う必要があります。指定をしておかないと、メニューボタンは表示されますが、クリック時にプルダウンしませんので注意。

 

カスタマイズ上の注意

 

現状、僕のブログで使用しているコードを貼り付けただけなので、大きな問題がでないとは思いますが、カスタマイズは自己責任でよろしくお願いします。

 

カスタマイズする際には、あらかじめバックアップをとってから記述をすると良いかと思います。

 

また、カスタマイズする際に、元のテーマで似たような記述がありますと正しく稼働しない可能性がありますので、記述を削除するか、!important等の、コードが優先されるように指定する必要が出てくると思います。その際にもバックアップ等十分に備えてからカスタマイズするのが良いと思われます。

 

おわりに

今回は、固定したプルダウンメニューのコードを掲載しました。レスポンシブデザインにも使える(どちらかというとスマホ側に特がありますが)デザインなので、使用し易いカスタマイズだと思います。

 

Webデザインに関してアマチュアなので、カスタマイズに使用した際、「こっちのほうが動作が軽いよ!」や「ちゃんと設置できたよ!」など、意見がいただけたら嬉しいです。

 

おわり