naverまとめ風のページネーションを設置してみた。
長い記事を分割してみたかった。
長い記事、特に画像を多用した記事は、重くなりがち。
あと、折角設置したサイドの広告が途中でなくなってしまう。
ということで、こんなページャーを設置してみました。
12
(このページ内のアンカーに飛ぶだけです。)
しかし、デメリットが多いので、設置をあきらめました。
分割するデメリット
記事を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ページ目のアドレス"にすると別ページにリンクが貼れます。