【はてなブログ】記事ページのページャーにサムネイルを追加して整形するカスタマイズ

f:id:nuruta:20170312013233j:plain

はじめに

久々にガッツリとカスタマイズをしましたので覚書です。

ページャーについて。

記事ページにあるページャーが目立ってなくて、なんか嫌でした。
そこで、サムネイルを追加して、良い感じに整形したいという欲求に駆られました。
理想のイメージは、スマホ版ですね。
f:id:nuruta:20180216224044j:plain
↑こういうスマートな形。
これを目指してやってます。

完成形イメージ

取り敢えずの僕のブログでの完成イメージです。

メインブログのみに付けてます。
アニメな日々、漫画な月日

パソコン版はこんな感じ。
f:id:nuruta:20180216224414j:plain

スマホ（レスポンシブ）だとこうです。
f:id:nuruta:20180216224618j:plain

JavaScript

基本的なソースコードはGHETTOさんが公開されているものをお借りしています。
universal-zero.hatenablog.com
このコードを元に改変してます。

2018.02.17
森岡さんよりアドバイスを頂けましたので、コードを変更しました。
ありがとうございます。

ブロック要素とインライン要素がぐっちゃぐちゃだったので修正

$(function() {

  /* 前ページ */
  if($(".page-entry .pager-prev").length) {
    var prev = $(".page-entry .pager-prev").find("a").attr("href");
    var html = get_img(prev,".page-entry .pager-prev");

	var thtml = "";
	thtml += '<a href="' + prev + '" rel="prev">' + html + '</a>';
	$(".page-entry .pager-prev").html(thtml);
  }

  /* 次ページ */
  if($(".page-entry .pager-next").length) {
    var next = $(".page-entry .pager-next").find("a").attr("href");
    var html = get_img(next,".page-entry .pager-next");

	var thtml = "";
	thtml += '<a href="' + next + '" rel="next">' + html + '</a>';
	$(".page-entry .pager-next").html(thtml);  }
});

function get_img(url,tag) {
  var nopic = 'サムネイル無し画像のURL';
  var getData = $.ajax({url: url, async: false}).responseText;

  /* DOM変換 */
  var parser = new DOMParser();
  var dom = parser.parseFromString(getData,"text/html");

  /* メイン画像取得 */
  var img = $("meta[property='og:image']",dom).attr('content');

  /* 画像無? */
  if (img.indexOf($("html")[0].dataset.author) == -1) {
    img = nopic;
  }

  var atext = $(tag).find("a").text();
  var tit = $("meta[property='og:title']",dom).attr('content').split('-',1);
  atext = atext.replace(atext,tit);

  var html = '<span><img src="' + img + '"></span><span>' + atext + '</span>';
  return html;
}

生成されるHTML

元のページャーリンク（aタグ）を以下のように変更しています。
生成されるHTMLを記します。

<div class="pager pager-permalink permalink">
    <span class="pager-prev">
        <a href="記事URL" rel="prev"><span><img src="サムネイル画像"></span><span>記事タイトル </span></a>
    </span>
    <span class="pager-next">
        <a href="記事URL" rel="next"><span><img src="サムネイル画像"></span><span>記事タイトル </span></a>
    </span>
</div>

改変した点。

元のコードは、サムネイル画像を取得して、ページャーの前後に追加するというものです。
これを以下のように変えました。

(1)記事タイトルを取得

はてなの仕様では、記事タイトルの文字数が長すぎると、途中で省略されていました。
タイトル全文表示させたかったので、取得し直しています。
尚、タイトルに「-」があると、それ以降省略されます。
これは、取得元のタイトルが「記事タイトル - ブログ名」となっているからです。
（splitを用いて、ブログ名をカットしてます）

(2)HTMLを書き換え

画像の追加では無く、HTML自体を書き換えています。
元々あった

<span class="pager-arrow">« </span>

は消しています。

CSS

一例として、僕が使っているCSSを記します。

.page-entry .pager .pager-prev,
.page-entry .pager .pager-next {
  background: #eaf3ff;
  border-bottom: solid 3px #516ab6;
  width:100%;
  text-align:left;
  margin-bottom:0.5em;
  }

.page-entry .pager .pager-prev span,
.page-entry .pager .pager-next span {
  display: table-cell;
  padding:0.5em;
}

* html .page-entry .pager .pager-prev span,
* html .page-entry .pager .pager-next span {
  display: inline;
  zoom: 1;
}
*:first-child+html .page-entry .pager .pager-prev span,
*:first-child+html .page-entry .pager .pager-next span {
  display: inline;
  zoom: 1;
}

.page-entry .pager img {
  width               : 60px;
  height              : 60px;
  object-fit          : cover;
  vertical-align: middle;
}

.page-entry .pager .pager-prev a,
.page-entry .pager .pager-next a {
  color: #CC6666;
  text-decoration:none;
}

.page-entry .pager .pager-prev a:before {
  content:"次の記事：";
  color: #516ab6;
  vertical-align: middle;
  padding:0.5em;
}

.page-entry .pager .pager-next a:before {
  content:"前の記事：";
  color: #516ab6;
  vertical-align: middle;
  padding:0.5em;
}