さっきーのSFC修行と旅のまとめ

航空マイルを貯める為のポイントサイトや旅行記をお送りします。

はてなブログのPCのグローバルメニューにサブカテゴリーとスマホサイトに複合メニューバーを付けました

 さっきーです。

 先日は、更新日が自動表示される様にカスタマイズしました。

www.sakky-promiler.com

 今回は、記事も増えてきたのでカテゴリーを増やそうと思ったのですが、グローバルメニューにはメインカテゴリーしか表示されていなかったので、サブカテゴリーを表示出来る様にしてみました。

 合わせて、スマホサイトにはグローバルメニューが無かったので、ホーム・人気記事・カテゴリ・トップへ戻るの複合メニューバーを付けました。

グローバルメニュー

 当ブログのPCサイトのテーマはBrooklyn(ブルックリン)を使っています。

 以下のページにもあります通り、カスタマイズも使っている人も多いので、簡単にカスタマイズページを見つける事が出来ます。更にレスポンシブデザインなので、スマホサイトも連動します。しかし、私はスマホの方はBrooklynを使っていません。

www.notitle-weblog.com

 以下はてなの公式ページです。

blog.hatena.ne.jp

現在のブログ画面(PC)

 以下が現在のPC画面です。

 グローバルメニューは、

・TOP

・修行記

・ポイント

・雑談

・旅行記

となっています。

f:id:sakky_mile:20190203173304j:plain

修行記のメニューに修行以外の事も書いてありますので、カテゴリーを変えます。

何が良いのか一生懸命考えましたが、マイレージとして、その下にサブカテゴリーとしてANA、JAL、SFC修行、空港ラウンジとします。

参考にしたサイト

 ここでも先人のつてをたどります。

 参考にしたのはこちらの記事。他にもググればいっぱいあります。

mmorley.hatenablog.com

こちらに載っているコードを用いてカスタマイズしました。

完成形(PC)

 完成しました。▼が付いているメニューにマウスオーバーすると、以下の様にサブカテゴリーが表示されます。

f:id:sakky_mile:20190203175911j:plain

サブカテゴリーの編集

 はてなブログでは、新たにカテゴリーを付けたり、カテゴリー名の編集をする事は、ダッシュボードのカテゴリーで編集したり、記事の管理でカテゴリーを追加する事が可能です。

 カテゴリーを追加して、不要なカテゴリーを削除することでカテゴリーの編集が出来ます。

 最後に全てのカテゴリーの数の確認をして、全ての記事が正しいカテゴリーにあるか確認をして下さい。

現在のブログ画面(スマホ)

 現在のスマホサイトは、特にメニューはありません。

f:id:sakky_mile:20190213230244j:plain

 PCの様なグローバルメニューをスマホに搭載しても小さくて見づらくなるので、下に複合メニューバーを付けてみました。

トグルメニューも試しました。

 一旦トグルメニューを付けてみましたが、

f:id:sakky_mile:20190203230133j:plain

 メニューを開くと以下の様になります。

f:id:sakky_mile:20190203230230j:plain

気が変わって複合メニューバーにする事にしました。

参考にしたサイト

 ゆきひーさんのブログになります。

www.yukihy.com

 更に、2列で表示出来る様にぬる太さんのブログより、参考にさせて頂きました。

nuruta2.hatenablog.com

完成しました

 色艶はあとで変えるかもしれませんが、形にはなりました。

f:id:sakky_mile:20190213230840j:plain

 

 カテゴリーボタンを押すと以下の様にカテゴリーが開きます。 

f:id:sakky_mile:20190213232159p:plain


 はてなブログアプリからは見え方が変わりますので、注意して下さい。具体的には、一番下まで行かないとメニューが出てきません。これも今後の課題ですね。

 

追記:フッターの表示が気に入りません

 最初は、一番下までスクロールした時に、黒地に白文字でブログ名が表示されていましたが、

f:id:sakky_mile:20190220222106j:plain

複合メニューバーを導入すると、「Powered by Hatena Blog.」が見えなくなってます。

f:id:sakky_mile:20190220222227j:plain

まあ、どうでも良いかとも思いましたが、やはり気になるので、持ち上げるコードを追記しました。

f:id:sakky_mile:20190220222338j:plain

これで一段落です。

はてなブログアプリでもメニューが表示されます。

ソース追記します。

 ※特に声はありませんが、せっかく作ったので参考にどうぞ。

  私は既に色を変えました(笑)

<li><a href='URL'>カテゴリ名</a></li>のURLにカテゴリのURL、カテゴリ名に名前を記入して下さい。

<!--固定メニューバー-->
<div id="menu">
<div class="toggle-contents">
<div class="toggle-content">
<div class="hatena-module hatena-module-entries-access-ranking"
data-count="5"
data-display_entry_category="0"
data-display_entry_image="1"
data-display_entry_image_size_width="50"
data-display_entry_image_size_height="50"
data-display_entry_body_length="0"
data-display_entry_date="0"
data-display_bookmark_count="0"
data-source="access"
>
<div class="hatena-module-body">
</div>
</div>
</div><!--toggle-content-->
<div class="toggle-content">
<ul class="category-list">
<li><a href='URL'>カテゴリ名</a></li>
<li><a href='URL'>カテゴリ名</a></li>
<li><a href='URL'>カテゴリ名</a></li>
<li><a href='URL'>カテゴリ名</a></li>
<li><a href='URL'>カテゴリ名</a></li>
<li><a href='URL'>カテゴリ名</a></li>
<li><a href='URL'>カテゴリ名</a></li>
<li><a href='URL'>カテゴリ名</a></li>
</ul>
</div><!--toggle-content-->
</div><!--toggle-contents-->

<div class="btn-area">
<a class="home-btn" href="HOMEのURL"><i class="blogicon-home lg"></i><br>HOME</a>
<span class="toggle-btn"><i class="blogicon-good lg"></i><br>人気記事</span>
<span class="toggle-btn"><i class="blogicon-list lg"></i><br>カテゴリ</span>
<span class="back-btn"><i class="blogicon-chevron-up lg"></i><br>Top</span>
</div><!--btn-area-->
<div style="clear: both;"></div>
</div>

<style type="text/css">
#menu{
position: fixed;
bottom: 0;
padding-bottom: env(safe-area-inset-bottom);
left: 0;
width: 100%;
height: 50px;
z-index: 10;
}
.toggle-content{
display: none;
position: fixed;
bottom: 50px;
background: white;
width: 100%;
}
.toggle-content .hatena-module{
padding: 15px 10px 10px 10px;
}
.toggle-content .hatena-module-body{
font-size: 80%;
}
.toggle-content .hatena-module-body a{
color: #444;
font-weight: bold;
}
.toggle-content .hatena-module-body .urllist-image{
width: 50px;
height: 50px;
}
.toggle-content .urllist-item{
padding: 0;
margin: 0;
min-height: 29px;
}
.toggle-content .urllist-item::before{
display: none;
}
.category-list{
list-style-type: none;
margin: 0;
width: 100%;
padding-left: 0;
}
.category-list a{
display: block;
float: left;
width: calc(50% - 2px);
height: 40px;
line-height: 40px;
text-align: center;
background: #444;/*カテゴリの背景色*/
color: #f0f0f0;/*カテゴリの文字色*/
font-size: 80%;
border: 1px solid #333;/*カテゴリリスト間の線の色*/
}
.btn-area a,
.btn-area span{
display: block;
float: left;
width: 25%;
height: 50px;
line-height: 25px;
text-align: center;
font-size: 70%;
background: #f0f0f0;/*メニュー部分の背景色*/
color: #444;/*メニュー部分の文字色*/
}
</style>

<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(function(){
var contentArea = $(".toggle-content");
$(".toggle-btn").click(function(){
var index = $(this).index()-1;
var clickedArea = $(contentArea).eq(index);
if($(clickedArea).css('display') !='none'){
$(contentArea).slideUp();
}else{
$(contentArea).slideUp();
$(clickedArea).slideDown();
};
});
$(".back-btn").click(function(){
$("html,body").animate({scrollTop:0},"fast");
});
});
</script>

 

まとめ

 ほぼ最終形に近づいたと思います。このカスタマイズでPVが伸びれば良いのですが、PV伸ばすのは記事をしっかり書く事ですよね。

 それにしても、カスタマイズしていると時間があっという間に過ぎますね。