さっきーです。
先日は、更新日が自動表示される様にカスタマイズしました。
今回は、記事も増えてきたのでカテゴリーを増やそうと思ったのですが、グローバルメニューにはメインカテゴリーしか表示されていなかったので、サブカテゴリーを表示出来る様にしてみました。
合わせて、スマホサイトにはグローバルメニューが無かったので、ホーム・人気記事・カテゴリ・トップへ戻るの複合メニューバーを付けました。
- グローバルメニュー
- 現在のブログ画面（PC）
- 参考にしたサイト
- 完成形（PC)
- サブカテゴリーの編集
- 現在のブログ画面（スマホ）
- トグルメニューも試しました。
- 参考にしたサイト
- 完成しました
- 追記：フッターの表示が気に入りません
- ソース追記します。
- まとめ
グローバルメニュー
当ブログのPCサイトのテーマはBrooklyn（ブルックリン）を使っています。
以下のページにもあります通り、カスタマイズも使っている人も多いので、簡単にカスタマイズページを見つける事が出来ます。更にレスポンシブデザインなので、スマホサイトも連動します。しかし、私はスマホの方はBrooklynを使っていません。
以下はてなの公式ページです。
現在のブログ画面（PC）
以下が現在のPC画面です。
グローバルメニューは、
・TOP
・修行記
・ポイント
・雑談
・旅行記
となっています。
修行記のメニューに修行以外の事も書いてありますので、カテゴリーを変えます。
何が良いのか一生懸命考えましたが、マイレージとして、その下にサブカテゴリーとしてANA、JAL、SFC修行、空港ラウンジとします。
参考にしたサイト
ここでも先人のつてをたどります。
参考にしたのはこちらの記事。他にもググればいっぱいあります。
こちらに載っているコードを用いてカスタマイズしました。
完成形（PC)
完成しました。▼が付いているメニューにマウスオーバーすると、以下の様にサブカテゴリーが表示されます。
サブカテゴリーの編集
はてなブログでは、新たにカテゴリーを付けたり、カテゴリー名の編集をする事は、ダッシュボードのカテゴリーで編集したり、記事の管理でカテゴリーを追加する事が可能です。
カテゴリーを追加して、不要なカテゴリーを削除することでカテゴリーの編集が出来ます。
最後に全てのカテゴリーの数の確認をして、全ての記事が正しいカテゴリーにあるか確認をして下さい。
現在のブログ画面（スマホ）
現在のスマホサイトは、特にメニューはありません。
PCの様なグローバルメニューをスマホに搭載しても小さくて見づらくなるので、下に複合メニューバーを付けてみました。
トグルメニューも試しました。
一旦トグルメニューを付けてみましたが、
メニューを開くと以下の様になります。
気が変わって複合メニューバーにする事にしました。
参考にしたサイト
ゆきひーさんのブログになります。
更に、2列で表示出来る様にぬる太さんのブログより、参考にさせて頂きました。
完成しました
色艶はあとで変えるかもしれませんが、形にはなりました。
カテゴリーボタンを押すと以下の様にカテゴリーが開きます。
はてなブログアプリからは見え方が変わりますので、注意して下さい。具体的には、一番下まで行かないとメニューが出てきません。これも今後の課題ですね。
追記：フッターの表示が気に入りません
最初は、一番下までスクロールした時に、黒地に白文字でブログ名が表示されていましたが、
複合メニューバーを導入すると、「Powered by Hatena Blog.」が見えなくなってます。
まあ、どうでも良いかとも思いましたが、やはり気になるので、持ち上げるコードを追記しました。
これで一段落です。
はてなブログアプリでもメニューが表示されます。
ソース追記します。
※特に声はありませんが、せっかく作ったので参考にどうぞ。
私は既に色を変えました(笑)
<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伸ばすのは記事をしっかり書く事ですよね。
それにしても、カスタマイズしていると時間があっという間に過ぎますね。
