読者です 読者をやめる 読者になる 読者になる

中央線に乗って考える

好きなモノとか、欲しいモノとか、日々のこととか

naverまとめ風のページネーションを設置してみた。

Technology Technology-Web

長い記事を分割してみたかった。

長い記事、特に画像を多用した記事は、重くなりがち。
あと、折角設置したサイドの広告が途中でなくなってしまう。

 

ということで、こんなページャーを設置してみました。 

(このページ内のアンカーに飛ぶだけです。) 

しかし、デメリットが多いので、設置をあきらめました。

 

分割するデメリット

記事を2つに別けて設置したのですが、rel=”next” と rel=”prev” をヘッダに追加しないとGoogle様が、ちゃんとインデックスしてくれない。

 

はてなブログですと、個別にヘッダに何かを追加ができないので、javascriptなどでどうにかしないといけないのかな?(自分はjavascriptはちょっと・・・。)

 

そもそも、2ページ目のタイトルをどうするか。「ページ2」、「その2」、「2/2」とか付けるか?
何も付けずに、同じタイトルにするか?

 

最大のデメリット

ブックマークが分散します。

最初のページだけにブックマークするように、2ページ目のソーシャルボタンを消すか、2ページ目に最初のページのソーシャルボタンを移植するなど、面倒なことをすれば、1つにまとめられそうですが。

 

設置したページャーのCSS

naverまとめ風のページャーのCSSと設置したHTMLです。

CSS
.Pagination {
	font-family: Arial,Helvetica,sans-serif;
	text-align: center;
	line-height: 1.2;
	margin: 30px 0px 30px;
}
.Pagination strong,.Pagination a {
	margin: 0px 2px;
}
.Pagination strong {
    padding: 9px 11px;
    color: #000;
}
.Pagination a:link,.Pagination a:visited {
    border: 1px solid #EBEBEB;
    color: #999;
    text-decoration: none;
    padding: 8px 11px;
}
.Pagination a:hover,.Pagination a:active,.Pagination a:focus{
    cursor:pointer;
    background-color:#f0f0f0;
    color:#000;
    text-decoration:none;
}

 

HTML
<div class="Pagination"><strong>1</strong><a href="#anchor1">2</a></div>

 

上記はページ内のアンカーにリンクしていますが、a href="2ページ目のアドレス"にすると別ページにリンクが貼れます。