「ページトップへ戻る」ボタンの設置【パート3】

まだまだ、飽きもせず、はてなブログのカスタマイズを続けています。
「ページトップへ戻る」ボタンを設置する続「ページトップへ戻る」ボタンの設置に続く第3弾です。今回も「ページトップへ戻る」ボタンの設置について書いていきます。

    トップへ戻るボタンは、次の3つで構成されています。
  • ボタンを表示するためのHTML部分 → フッタにコードを入力
  • ボタンを装飾するためのCSS部分 → デザインCSSにコードを入力
  • ボタンを動かすためのJavascript部分 → フッタにコードを入力

今までは、それぞれを別々に入力(記述)していたのですが、JavaScriptjQuery)でひとまとめにすれば、入力が1箇所になっていいかなと思ってカスタマイズしてみました。

HTML部分は「<div class="customized-footer">~</div>」に「 $('.customized-footer').append('HTML部分');」で書き込みます。

CSS部分は「<head>~</head>(head部分)」に 「$('head').append('<style type="text/css">CSS部分</style>');」で書き込みます。

Javascript部分は、Syncer - 初心者でも分かる!jQuery「TOPへ戻るボタン」の作り方Code & Business - 書いて覚えるjQuery!「TOPに戻る」ボタン編を参考に設置します。

コードは次のとおり(デザイン設定→カスタマイズ→フッタに以下のコードを入力する)

<script type="text/javascript">
$(function() {
    /* トップへ戻るボタンのhtml */
    $('.customized-footer').append('<div id="page-top"><a id="move-page-top"><i class="fa fa-arrow-circle-o-up fa-5x"></i></a></div>');

    /* トップへ戻るボタンのcss */
    $('head').append('<style type="text/css">#page-top { display: none; position: fixed; right: 20px; bottom: 20px; margin: 0; padding: 0; text-align: center; } #move-page-top { color: rgba(0, 0, 0, 0.4); text-decoration: none; display: block; cursor: pointer; } #move-page-top:hover { color: rgba(0, 0, 0, 0.6); }</style>');

    /* トップへ戻るボタンのJavaScript */
    var scrTimeout = null;
    $(window).scroll(function() {
	    if(scrTimeout == null) {
		    scrTimeout = setTimeout(function() {
			    var element = $('#page-top');
			    var visible = element.is(':visible');
			    if($(window).scrollTop() >= $(window).height()) {
				    if(!visible) {
					    element.fadeIn('slow');
				    }
			    }
			    else if(visible) {
				    element.fadeOut('slow');
			    }
			    scrTimeout = null;
		    }, 1000);
	    }
    });
    $('#move-page-top').click(function() {
        $('body, html').animate({scrollTop: 0}, 'slow');
    });
});
</script>

ほぼ、Syncer(シンカー)さんのスクリプトそのままですが、「最下部まで来たらボタンを消す」処理は削除しました。

トップへ戻るボタンの無駄な処理を防ぐ工夫(過剰な処理を防ごう)がとても素晴らしい。

はてなブログのページャをボタン風に表示

はてなブログのサイドバーのカテゴリーをボタン風に表示を応用して、各ページの下にある前後のページへのリンク(ページャ)をCSSでボタン風(タグ風)に表示してみました。

コードは次のとおり(デザイン設定→カスタマイズ→デザインCSSに以下のコードを入力)

.pager {
	font-size: 14px;
}

.pager a {
  	text-decoration: none;
  	padding: 9px;
  	color: #fff;
  	background: #fff;
 	border: 1px solid #ddd;
	border-radius: 3px;
	white-space: nowrap;
}

.pager a:hover {
  	color: #fff;
  	background: #454545;
 	border: 1px solid #454545;
}

.pager-prev a:before {
 	content: "\25C0";
}

.pager-next a:after {
 	content: "\25b6";
}

.pager-arrow {
	display: none;
}

「white-space: nowrap」でページャのリンクテキストを改行させないようにしました。

また、ページャの矢印アイコン(HTMLの特殊文字)の「«」「»」を「◀(25C0)」「▶(25b6)」に変更しました。

参考にしたブログ・Webサイト
16bit! - 【UX】「次の記事」は新しい記事のことだけど、「次のページ」は古い記事のこと

はてなブログのサイドバーのカテゴリーをボタン風に表示

このブログは、まだカテゴリーが少ないのでタグクラウドまではいりませんが、サイドバーのカテゴリーをタグクラウドっぽくボタン風(タグ風)にCSSで表示してみました。

コードは次のとおり(デザイン設定→カスタマイズ→デザインCSSに以下のコードを入力)

.hatena-module-category .hatena-urllist li {
	display: inline-block;
	font-size: 14px;
	margin: 10px 0 20px;
}

.hatena-module-category .hatena-urllist li a {
	text-decoration: none;
	padding: 9px;
	color: #454545;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 3px;
}

.hatena-module-category .hatena-urllist li a:hover {
	text-decoration: none;
	color: #fff;
	background: #454545;
	border: 1px solid #454545;
}

「display: inline-block」で縦並びだったカテゴリーのリストを横並びにしました。
あとは見た目をボタン風にして完成。リンクを選択したときに色を反転させたのがポイント。

参考にしたブログ・Webサイト
16bit! - 【CSS】はてなブログのカテゴリ欄をタグクラウド風に
えむしとえむふじんがあらわれた - 【カスタマイズ】コピペするだけ!カテゴリーをタグ風にカスタマイズする方法

はてなブログの「前のページ」と「次のページ」を逆にしてみる

今まであまり気にしたことがなかったというか、ブログはそういうものなんだと勝手に思っていたのが、「前のページ」「次のページ」と「前の記事」と「次の記事」の関係ですかね。

        ブログ的には
      • 「次のページ」=「古い記事」
      • 「前のページ」=「新しい記事」
        個人的には
      • 「次のページ」=「新しい記事」
      • 「前のページ」=「古い記事」

個人的には、「前」は過去のこと、「次」は未来のことだと思っていますが、ブログは逆。
よくよく考えると、どっちがどっちだっけと、わけがわからなくなって、混乱してしまう。

そんなわけで、トップページやカテゴリ、月別アーカイブの記事一覧の「次のページ」と「前のページ」のリンクをCSSで逆(反対)に表示してみることにしました。

※ 個別記事の下にある前後の記事へのリンク(ページャ)が記事のタイトルではなく「次のページ」と「前のページ」になってしまいます...。

コードは次のとおり(デザイン設定→カスタマイズ→デザインCSSに以下のコードを入力)。

.pager a {
  	font-size: 0;
}

.pager-prev a:before {
	font-size: 14px;
 	content: "次のページ";
}

.pager-next a:after {
	font-size: 14px;
 	content: "前のページ";
}

リンクテキスト(「前のページ」、「次のページ」、個別記事のページャの記事タイトル)の文字列を「font-size: 0」で見えなくして、前のページのリンク(の前)に「次のページ」、次のページのリンク(の後)に「前のページ」という文字列を挿入してそれぞれ表示します。

参考にしたブログ・Webサイト
Qiita - CSSでテキストを書き換える方法
いろいろ研究所 - 新しくなったはてなブログのページャーを見やすく整形する
16bit! - 【UX】「次の記事」は新しい記事のことだけど、「次のページ」は古い記事のこと
はてなブログ開発ブログ - 目的の記事にたどり着きやすくなるよう、前後の記事へのリンクと記事一覧ページを修正しました

はてなブログに「前のページ」ボタンを設置する(jQuery)

はてなブログでは、カテゴリや月別アーカイブの記事一覧には、前のページに戻るリンクがあるのですが、なぜか、トップページには、前に戻るリンクがなく、ブラウザの戻るボタンで戻るしかありません。

そこで、JavaScriptjQuery)で「前のページ」ボタンを設置してみることにしました。

まず、はてなブログで自動的に組み込まれるjQueryを強制的に先に読み込ませます。
(ブログのhead部分、ヘッダ、フッタのいずれかに以下のコードを入力する)

<script type="text/javascript" src="https://cdn.blog.st-hatena.com/js/external/jquery.min.js?version=1.12.3"></script>

次に、「前のページ」ボタンのスクリプト本体を設置します(上記jQueryの下に設置)。
(デザイン設定→カスタマイズ→フッタに以下のコードを入力する)

<script type="text/javascript">
$(function() {
	if(document.referrer.indexOf(document.domain) !== -1) {
		if(location.href.indexOf('archive') == -1) {
			if(location.search !== '') {
				var str_prev = '<span class="pager-prev"><a href="#" onClick="history.back(); return false;" rel="prev">前のページ</a></span>';
				if($('.pager-next').length) {
				    $('.pager').prepend(str_prev);
				}
				else {
				    var str_html = '<div class="pager autopagerize_insert_before">' + str_prev + '</div>';
				    $('#main-inner').append(str_html);
				}
			}
		}
	}
});
</script>
    何もしない(「前のページ」ボタンを設置しない)
  • 自分のブログのリンク以外(検索やブックマーク)からきた場合
  • カテゴリや月別アーカイブの記事一覧(はじめから「前のページ」ボタンがあるので)
  • トップページの1ページ目や個別の記事(URLに「?page=」という文字がないページ)
    「前のページ」ボタンを設置する
  • 自分のブログのリンクからきた場合
  • トップページの2ページ目以降のページ(はじめから「次のページ」ボタンがある)
    →「次のページ」ボタンの前に「前のページ」ボタンを挿入して表示する
    トップページの最後のページ(はじめから「次のページ」ボタンがない)
    →ページの一番下に「前のページ」ボタンを表示する
  • 「前のページ」ボタンをクリックしたときは、ブラウザ履歴の1つ前のページに戻る処理を実行する

参考にしたブログ・Webサイト
CATTAIL - はてなブログの「前のページへボタン」を表示する方法(jQuery)
IMUZA.com - はてなブログのトップページに「前のページ」を実装する
まろりかモンスター - はてなブログの記事一覧に「前のページ」ボタンを追加する方法【コピペOK】
Plain Note - 【はてなブログ】トップページの2ページ目以降に「前に戻る」を付ける

基本的にコピペしかできない素人が、わかってないで書いてるところがありますので、説明に間違いがあったらごめんなさい...。

続「ページトップへ戻る」ボタンの設置

「ページトップへ戻る」ボタンを設置するの続きなのですが、トップへ戻るボタンの表示を「CSS+Webアイコンフォント(Font Awesome)」から「JavaScriptjQuery)+画像ファイル」に変更しました。戻る動作を実行するスクリプト本体に変更はありません。

ボタンの画像は、icon rainbow丸枠付きの矢印アイコン素材を使わせてもらいました。
(アイコン素材を無料(フリー)でダウンロードできるICOOON MONOもいいと思います)

ボタンを表示するHTMLは次のとおりです(画像に「arrow」というidをつけました)。

<div id="page-top">
<a id="move-page-top"><img id="arrow" src="https://cdn-ak.f.st-hatena.com/images/fotolife/s/simadzu/20181107/20181107142014.png" alt="Icon rainbow" /></a>
</div>

ボタンの表示をマウスオーバーで切り替えるJavaScriptは次のとおりです。

<script type="text/javascript">
$(function() {
    $('<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/s/simadzu/20181107/20181107142015.png">');
    $('#arrow').hover(function() {
        $(this).attr('src', 'https://cdn-ak.f.st-hatena.com/images/fotolife/s/simadzu/20181107/20181107142015.png');
    }, function() {
        $(this).attr('src', 'https://cdn-ak.f.st-hatena.com/images/fotolife/s/simadzu/20181107/20181107142014.png');
    });
});
</script>

先にマウスオーバー後の画像を読み込むことで、ボタンの切り替えをスムーズにしています。

参考にしたブログ・Webサイト
flatFlag - jQueryのhover()でマウスオーバーの処理
SOFTELメモ - 【jQuery】マウスオーバーで画像を切り替える
Web Design Leaves - jQuery で画像をプリロード

ボタンの表示位置などを指定するCSSは、以前より削って少なくしました。

#page-top {
	display: none;
	position: fixed;
	right: 20px;
	bottom: 40px;
}

#move-page-top {
	cursor: pointer;
}

@media screen and (max-width:640px) {
	#move-page-top { display: none;	}
}

最後のほうの記述で、スマートフォンなどでボタンを表示させないようにしています。

はてなフォトライフに1.5KB程度のフルカラーのボタン画像(png)をアップロードしたのですが、仕様なのか、2.1KB程度にサイズが増えて、256色に変換されてしまいました...。

最近のブログカスタマイズを箇条書き

今のところ、人が見にこない、人に見られないブログなので、モチベーションを高めるため、自分が見たくなるように、ブログを書きたくなるように、ブログをカスタマイズしています。

上記のそれぞれの項目について、関連する記事を修正、更新しました。疲れたー。