はてなブログ運営で有用なカスタマイズ3選｜最終更新日とメニューバー

はてなブログを運営するにあたり、有用なカスタマイズを3つをご紹介します。

3つのカスタマイズ

・最終更新日の表示

・ブログ上部にPC用の固定メニューバーを設置

・ブログ下部にスマホ用の固定メニューバーを設置

カスタマイズには、はてなブログの偉大な先人を参考にさせて頂いております。

また、「有用」とは以下の通りです。

・ブログの体裁を整えるのに必須レベル

・重くならない

・page speed insights の評価にほぼ影響しない

【注意点】

・カスタマイズ前に既存のコードのバックアップを取っておく

・コードを引用させて頂いていますが、上手くいかない場合は元サイトもご覧ください

最終更新日を表示させる
ブログ上部にメニューバーを設置
スマホ用のメニューバーを下部に設置
- 当ブログのカスタマイズ
メニューバーを置くメリット

最終更新日を表示させる

ブログ読者からすると、「この記事はいつの情報なのか」が分からないと、意外と困ります。

そこで、ブログの更新日は別に、最終更新日を表示させることで、その記事がいつメンテナンスされたのかが一目で分かります。

はてなブログでは、以下のコードを貼ると簡単に表示させることができます。

コードはこちらのブログから引用させて頂いています。

【はてなブログ】最終更新日を追加する方法（短くて簡単！コピペでOK）CSSとJavascript利用 - バンビの初心者ブログ教室

<style>
.lastmod{
margin-left: 1em;
padding: 0.2em 1em;
background-color: #f5f5f5;
border-radius: 0.5em;
color: #000;
}
.lastmod:before{
font-family:"blogicon";
content: "\f02b";
position: relative;
letter-spacing: 0.5em;
font-size: 1em;
color: #000;
}
.date a:before{
font-family:"blogicon";
content: "\f024";
position: relative;
letter-spacing: 0.5em;
font-size: 1em;
color: #000;
}
</style>
<script type="text/javascript">
var jsonld = JSON.parse(document.querySelector('script[type="application/ld+json"]').innerHTML);
var dateModified = jsonld.dateModified;
var date = document.querySelector('div.date');
var time = document.createElement('time');
var lastmod = dateModified.substr(0, 10);
time.innerText = lastmod
time.setAttribute("datetime", lastmod );
time.setAttribute("dateModified", "最終更新日：" + lastmod);
time.className = 'lastmod';
date.appendChild(time);
</script>

上記のコードをコピーし、はてなブログ管理画面の「デザイン」→「カスタマイズ」→「記事」へと進み、「記事下HTML」に貼り付けます。

最後に「変更を保存する」で更新すれば、更新日の横に最終更新日が表示されます。

ブログ上部にメニューバーを設置

ブログ上部にメニューバーを表示させます。

当ブログにも表示されている、↓のような固定されているやつです。

こちらも先人の知恵をお借りします。

（引用元:固定グローバルナビゲーションでアクセス倍増！コピペで簡単！ - バンビの初心者ブログ教室）

まず初めに、CSSを貼ります。

はてな管理画面の「デザイン」→「カスタマイズ」を選び、一番下の「デザインCSS」の部分に以下のコードをコピペします。

/*==============================================
　global navigation bar (top)
================================================*/
ul.navi-top, ul.navi-top a {
color:white;/*文字の色*/
background-color:black;/*メニューバーの背景色*/}

ul.navi-top a:hover {
color:white;/*マウスオーバーの時の文字の色*/
background-color:grey;/*マウスオーバーの時の背景色*/}

ul.navi-top {
position:fixed;
left:0;
top:0;
margin: 0;
padding:0;
font-size:14px;
width:100%;
text-align:center;
z-index:50;}/*重なり順*/

/*1階層目*/
ul.navi-top li {
width: 125px;/*１階層目の幅*/
display: inline-block;
list-style-type: none;
position: relative;}

ul.navi-top a {
line-height: 36px;/*メニューバーの高さ*/
text-align: center;/*文字位置中央寄せ*/
padding-left:10px;
text-decoration: none;
font-weight: nomarl;
display: block;}

/*２階層目*/
ul.navi-top ul {
display: none;
margin:0px;
padding:0px;
position: absolute;}

ul.navi-top ul a{
width:125px;/*２階層目の幅*/}
ul.navi-top li:hover ul {
display: block;}

次は「ヘッダ」の「ブログタイトル下」に以下のコードを貼ります。

【1階層】のみの場合

<ul class="navi-top">
<li><a href="LINK">home</a></li>
<li><a href="LINK">menu01</a></li>
<li><a href="LINK">menu02</a></li>
<li><a href="LINK">menu03</a></li>
<li><a href="LINK">menu04</a></li>
<li><a href="LINK">menu05</a></li>
</ul>

【2階層】以上付ける場合

<ul class="navi-top">
<li><a href="LINK">home</a></li>
<li><a href="LINK">menu01</a>
<ul>
<li><a href="LINK">menu01-1</a></li>
<li><a href="LINK">menu01-2</a></li>
</ul>
</li>
<li><a href="LINK">menu02</a>
<ul>
<li><a href="LINK">menu02-1</a></li>
<li><a href="LINK">menu02-2</a></li>
<li><a href="LINK">menu02-3</a></li>
</ul>
</li>
<li><a href="LINK">menu03</a>
　　　　<ul>
　　　　　　<li><a href="LINK">menu03-1</a></li>
　　　　　　<li><a href="LINK">menu03-2</a></li>
　　　　　　<li><a href="LINK">menu03-3</a></li>
　　　　　　<li><a href="LINK">menu03-4</a></li>
　　　　</ul>
</li>
<li><a href="LINK">menu04</a></li>
<li><a href="LINK">menu05</a></li>
</ul>

カスタマイズ方法

・コードの「LINK」の部分をカテゴリーや記事のURLに置き換える

・「home」や「menu01」の部分を表示させたいタイトルに変更する

「<li><a href="LINK">home</a></li>」を追加したり削除することで、数の調整可能がです。

これで上部にメニューバーが表示されるようになります。

細かい部分は、自分のテーマやサイトに合わせて調整していきます。

スマホ用のメニューバーを下部に設置

スマホで見た時のみ表示されるメニューバーを置きます。

↓こういうやつです。

こちらも先人の知恵を参考にさせて頂きました。

（引用元:スマホ下部固定メニューのCSS｜ボトムナビゲーションの設置方法｜はてなブログで回遊率を上げる - Simple Life Navi）

まず、「デザインCSS」に以下のコードをコピペします。

/*==　smartphone　bottom menu　==
Customized by SimpleLifeNavi ,Dec 11,2021 updated
Based on "https://www.bambi.pro/entry/navigation-bottom-smartphone"
*/
.mini-text{font-size:9px;}/*文字の大きさ*/

ul.bottom-menu {
position: fixed ;
left:0;
bottom:0;
width: 100%;
height:43px;/*アイコン枠の高さ*/
margin:0;
padding:0;
background-color:white;/*背景色*/
border-top:2px solid gray;/*バーの上線*/
border-bottom:2px solid gray;/*バーの下線*/
z-index:30;
padding-bottom:env(safe-area-inset-bottom);
}

ul.bottom-menu li {
float:left;
width:20%;/*メニューアイコンを5つ並べる*/
background-color:white;/*背景色*/
list-style-type:none;
text-align:center;
font-size:22px;/*アイコンのサイズ*/}

.bottom-menu li a {
display: block;
color:dimgray;/*アイコンと文字の色*/
padding-top:10px;
padding-bottom:5px;
line-height:10px;
text-decoration:none;}

.bottom-menu li a:hover {
color:lightgray;/*マウスオーバー時の色*/}

/* === 展開メニュー === */
ul.menu-second-level {
visibility: hidden;
opacity: 0;
z-index:1;}

ul.menu-second-level li a{
border-top:1px dotted gray;/*展開の枠点線*/
font-size:12px;/*展開メニューの文字サイズ*/
line-height:24px;/*文字の縦幅*/}

.menu-second-level li a:hover {
height:100%;
transition: 1.0s; /*動きを見せる*/
background: lavender;/*マウスオーバーの色*/}

li.menu-width-max ul.menu-second-level {
position: absolute ;
bottom: 45px;/*メニュー高さ*/
transition: 0.5s; /*動きを見せる*/
left: 0;
box-sizing: border-box;
width: 100%;
padding:0;}

li.menu-width-max:hover ul.menu-second-level {
bottom: 45px;/*メニュー高さ*/
visibility: visible;
opacity: 1;}

li.menu-width-max ul.menu-second-level li {
float: left;
width: 50%;/*2階層目に2つメニューを並べる*/
border: none;}

/* ボトムメニューを表示しない指示 */
@media(orientation:landscape) , /*スマホで横画面の時*/
@media(min-width: 768px) { /*PC表示の時*/
.bottom-menu{display:none; }
}

/*スマホの時だけボトムメニュー分フッタを底上げ*/
@media(max-width: 767px){
#footer{margin-bottom:45px;}
}

次は、以下のコードを「フッタ」に貼ります。

<ul class="bottom-menu">

<li>
<a class="Menu-Bottom-btn" href="ブログのアドレス">
 新着記事</a>
</li>


<li class="menu-width-max">
<a href="#"> カテゴリー</a>

<ul class="menu-second-level">


<li><a href="表示させたいページのアドレス1">タイトル1</a></li>
<li><a href="表示させたいページのアドレス2">タイトル2</a></li>
<li><a href="表示させたいページのアドレス3">タイトル3</a></li>
<li><a href="表示させたいページのアドレス4">タイトル4</a></li>

</ul>
</li>


<li>
<a class="Menu-Bottom-btn" href="javascript:(function(){window.open('https://b.hatena.ne.jp/entry/'+encodeURIComponent(location.href))})();">
 ブックマーク</a>
</li>


<li>
<a href="https://blog.hatena.ne.jp/はてなID/ブログアドレスの一部（https://を除く部分）/subscribe" target="_blank">
 読者登録</a>
</li>

<li>
<a href="https://twitter.com/intent/follow?screen_name=ツイッターのID"> Follow</a>
</li>
</ul>

上記コードの中の文字が書かれている部分をそれぞれ変更します。

当ブログのカスタマイズ

当ブログの場合、「HOME」「注目記事」「サイトマップ」「カテゴリー」の4つを下部に表示しています。

その場合は以下のようになります。

<ul class="bottom-menu">

<li>
<a class="Menu-Bottom-btn" href="ホームURL">
 HOME</a>
</li>


<li class="menu-width-max">
<a href="#"> 注目記事</a>

<ul class="menu-second-level">


<li><a href="URL">タイトル1</a></li>
<li><a href="URL">タイトル2</a></li>
<li><a href="URL">タイトル3</a></li>

</ul>
</li>


<li>
<a class="Menu-Bottom-btn" href="URL">
 サイトマップ</a>
</li>


<li class="menu-width-max">
<a href="#"> カテゴリー</a>

<ul class="menu-second-level">


<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">カテゴリ名</a></li>
<li><a href="URL">カテゴリ名</a></li>

</ul>

これでスマホで見た時にだけ、下部にメニューバーが表示されるようになります。

小ネタとして、PCのブラウザをウィンドウにして左右を縮小すると、ボトムに表示されるメニューが表示されます。

※ブラウザやテーマによって表示されないかもしれません。

メニューバーを置くメリット

メニューバーを置くメリットは「回遊率が上がること」です。

そのページにたどり着いた方は、カテゴリーなどから他の記事にはまず飛びません。

今はモバイルでの閲覧が多いので、なおさらです。

しかし、上部と下部にメニューバーが表示されていると、クリックされやすくなります。

その結果、回遊率も上がります。

以上のことから、メニューバーの設置と、一目で更新日が分かる最終更新日表示はブログ運営に役立つカスタマイズとなっております。