次の投稿、前の投稿へ移動するボタンにタイトルを付けたかったのと、おしゃれにしたかったのでサムネ付きを使ってみました。
Bloggerにサムネ画像付きページャーを導入する | IB-Note
前後の投稿などを分かりやすく表示してくれるページャーですが、例によってBloggerのページャーは超絶シンプル。これではあまりにも味気ないので、少しおしゃれな感じにしてみたいな～と思いサムネ画像付きページャーを作ってみました。
itblogger-note.blogspot.com
この記事を参考に作業をしました。
ただ背景が白いサイトではボタンがあるのか分かりづらかったので
少しカスタマイズしました。
.pager-divの項目を編集
.pager-div {
word-break: break-all;
margin-bottom: 13px;
border: 1px solid #999999; /* 追記 */
box-shadow: 3px 3px 5px -2px #aaa; /* 追記 */
border-radius: 3px; /* 追記 */
transition: .2s; /* 追記 */
}囲み線と影を入れてボタンっぽくしました。
.pager-link:hoverの項目を編集
.pager-link:hover {
opacity: 0.6;
text-decoration: none;
box-shadow: 5px 5px 5px 3px #aaa; /* 追記 */
}あとはデザインの問題か左と右が分かりづらいので色を付け足したいです。
0 件のコメント:
コメントを投稿