トップページの2ページ目以降は、なぜか「次へ」しかないような?!
アーカーブページの2ページ目には、「前へ」「次へ」がちゃんとあるような!?
仕様がどうなってるのかよくわかりませんが、トップページの2ページ目以降にも「前へ」というのを付けてみました。
上手くいけば、こんな感じになるかと思います。
Javascript
<script>
// <![CDATA[
document.addEventListener('DOMContentLoaded', function(){
(function(){
if(document.body.classList.contains('page-index')){
if(location.href.indexOf('?page=') !== -1){
var entries = document.getElementsByClassName('archive-entries')[0];
var pager = document.getElementsByClassName('pager')[0];
var elemSpan = document.createElement('span');
var prev;
if(document.referrer.indexOf(document.domain) !== -1) {
prev = '<a href="#" onClick="history.back(); return false;">前のページ</a>';
}else{
prev = '<a href="/">ホーム</a>';
}
elemSpan.innerHTML = prev;
elemSpan.classList.add('pager-prev');
if (typeof pager === "undefined") {
var el_div = document.createElement('div');
el_div.classList.add('pager');
el_div.classList.add('prev-only');
el_div.appendChild(elemSpan);
entries.parentNode.insertBefore(el_div, entries.nextSibling);
}else{
pager.insertBefore(elemSpan, pager.firstChild);
}
}
}
}());
}, false);
// ]]></script>
・はてなブログのトップページに「前のページ」を実装する - IMUZA.com
上記を参考に作成しました。
上記のままだと、最終ページに「前のページ」というのが表示できないので、その処理を追加しています。
「 if (typeof pager === "undefined") {」あたりの部分がそうです。
CSS
/*pager-prev*/
.page-index .pager .pager-prev{
width: 50%;
}
.page-index .pager.prev-only .pager-prev{
width: 100%;
}
/*pager-next*/
.page-index .pager .pager-next{
width: 100%;
}
.page-index .pager .pager-prev + .pager-next{
width: 50%;
}
1つの時と2つの時は、上記のような感じでCSSで切り分けてます。幅が50%の時は2つ並んでいる時です。
スポンサーリンク
コメントを残す