はてなブログのグローバルメニューの追加

ねらい

「対外的に役に立ててほしいきちんとした記事」と「走り書きレベルの雑な記事」を一つのブログにまとめると見づらくなり結果的に誰も読まないものになる
グローバルメニューで回避できるんじゃないかと思い試した。

やったこと

グローバルメニューに追加するカテゴリの設定

どのようなUCがあるのか？整理していないが、とりあえずこんな感じで

• TOP…初期表示。記事全文表示されているので一覧性が悪い
• 一覧形式…見出しと記事一部分が表示される
• UC1-アウトプット…誰かの役に立ちそうな自分の考えをここに突っ込む
• UC2-インプット…2次情報、何か補足的に調べたい人が流入した時に見るかも
• UC3-日記・走り書き…自分がわかれば良い程度にまとめる。備忘録

　はてなブログの設定

• グローバルメニューの追加
  • HTML/CSS設定
  • 微調整としてmenuのtop marginの削除。背景色を併せる

残タスク

• UC整理・他のブログで参考にする
  • カテゴリとタグの紐づけ。目的と合致するか確認
  • 各記事にタグ付け
• スマホは未考慮

参考

redo5151.hatenablog.com

コードを参考にする

更新日時も追加してみたが、ブログ詳細を開かないと表示されない状況。 CSSのentry dateは不要なので削除している

詳細設定

<!--記事の更新日時設定-->
<!--「jQuery」参照URL-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--「Font Awesome」参照URL-->
<link href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">


＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
<!--記事の更新日時設定-->
<!--「jQuery」参照URL-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--「Font Awesome」参照URL-->
<link href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" rel="stylesheet">

タイトル下に追加

<!-- グローバルメニュー -->
<span class="menu-toggle"><i class="blogicon-reorder lg"></i>MENU</span>
<ul id='menu'>
<div class="menu-inner">
<li><a href='archive'>一覧形式</a></li>
<li><a href='url'>アウトプット(考え事・登壇)</a></li>
<li><a href='category/勉強会'>インプット（読書・勉強会)</a></li>
<li><a href='url'>日記・走り書き</a></li>
<li><a href='url'>自己紹介・まとめ</a></li>
<li><a href='url'>※タイトルバー検討中で動作しません</a></li>
</div>
</ul>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.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>
<!-- グローバルメニューここまで -->



<!-- 更新日時表示-->
<!--[if lt IE 9]>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.3.min.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.3.min.js"></script>
<!--<![endif]-->
<script>
;(function($) {
'use strict';
var urls = [], opts = {cache: false, dataType: 'xml'}, p,
_ua = (function(u){
return {
Tablet:(u.indexOf("windows") != -1 && u.indexOf("touch") != -1 && u.indexOf("tablet pc") == -1)
|| u.indexOf("ipad") != -1
|| (u.indexOf("android") != -1 && u.indexOf("mobile") == -1)
|| (u.indexOf("firefox") != -1 && u.indexOf("tablet") != -1)
|| u.indexOf("kindle") != -1
|| u.indexOf("silk") != -1
|| u.indexOf("playbook") != -1,
Mobile:(u.indexOf("windows") != -1 && u.indexOf("phone") != -1)
|| u.indexOf("iphone") != -1
|| u.indexOf("ipod") != -1
|| (u.indexOf("android") != -1 && u.indexOf("mobile") != -1)
|| (u.indexOf("firefox") != -1 && u.indexOf("mobile") != -1)
|| u.indexOf("blackberry") != -1
}
})(window.navigator.userAgent.toLowerCase()),
//url = 'https://www.tameblo.work/sitemap.xml'; // URLの入力例
url = 'https://ruzxas.hatenablog.com/sitemap.xml'; // ←にご自身のURLを入力してください。

function parseSitemapXML(url) {
var d = new $.Deferred;
$.ajax($.extend(opts, {
url: url
})).done(function(xml) {
$(xml).find('sitemap').each(function() {
urls.push($(this).find('loc').text());
});
d.resolve();
}).fail(function() {
d.reject();
});
return d.promise();
}
function findURL(url) {
$.ajax($.extend(opts, {
url: url
})).done(function(xml) {
var isMatched = false;
$(xml).find('url').each(function() {
var $this = $(this);
if ($this.find('loc').text() === location.href) {
isMatched = true;
appendLastmod($this.find('lastmod').text());
return false;
}
});
if (!isMatched) nextURL();
}).fail(function() {});
}
function nextURL() {
urls.shift();
if (urls.length) findURL(urls[0]);
}
function appendLastmod(lastmod) {
var $container = $('<div></div>', {'class': 'lastmod'}).text(lastmod.replace(/T.*0/,""));
if ($('.entry-header > .date').get(0).tagName.toLowerCase() === 'span') {
$('.entry-title').before($container);
} else {
$('.entry-date').append($container);
}
}
p = parseSitemapXML(url);
p.done(function() {findURL(urls[0])});
p.fail(function(error) {});
})(jQuery);
</script>
<!-- 更新日時表示ここまで-->

デザインCSS

/* <system section="theme" selected="6653586347153366095"> */
@import url("https://blog.hatena.ne.jp/-/theme/6653586347153366095.css");
/* </system> */

/* <system section="background" selected="f5f5f5"> */
body{background:#f5f5f5;}
/* </system> */

#menu {
position: relative;
width: 100%;
padding-left: 0px;
height: 40px;
margin-top: 0px;
background: #202035;/*グローバルメニュー背景色*/
}
.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;

}
/*パソコン１カラム*/
@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;
}
}




/*更新日時表示*/
.lastmod {
background-color: transparent;
padding: 5px 0px;
text-decoration: none;
font-size: 15px;
display: inline;
margin-left: 0px;
font-family: 'Montserrat', sans-serif;
color: #888888;
}
.lastmod::before {
margin-right: 5px;
padding-left: 3px;
font-family: FontAwesome;
content: '\f01e';
}