はてなブログ[次のページ][前のページ]をカスタマイズ

本ページにはプロモーションが含まれます。

自分用のバックアップも兼ねて、当ブログのHTML/CSSコードをご紹介します。

はてなブログの「次のページ」「前のページ」をカスタマイズしました。

この記事内ではページボタンと呼びますが、正しくはページャーと言うそうです。

使えそうであればご自由にコピペしていただき構いません。

当ブログのページボタン
そもそもページボタンって必要なの？
- ページボタンを消すコード

当ブログのページボタン

はてなブログの「次のページ」「前のページ」カスタマイズ

引用元

↓こちらのサイトで紹介されているコードを元に作成しました。

simadzu‘blog

はてなブログの「前のページ」と「次のページ」を逆にしてみる - simadzu’blog

デザインテーマ・設定

・デザインテーマはSmooth（デフォルト）

・レスポンシブデザイン

ページボタンのコード

【デザインCSS】に貼るコード↓

.pager {
display:flex;
width:100%;
}
.pager-next a{
font-size:0%;
background:none;
margin-right:150px;
margin-left:0px;
}
.pager-next a:before{
color: #fff;
content:'Next-page';
font-size: 18px;
font-weight: bold;
padding:12px 18px;
font-family: 'Lucida Grande', 'segoe UI', Verdana, Arial, sans-serif;
letter-spacing:0.3pt;
background-color: #3cb371;
border-radius: 24px;
}
.pager-prev a{
font-size:0%;
background:none;
margin-right:0px;
}
.pager-prev a:before{
color: #fff;
content:'Prev-page';
font-size: 18px;
font-weight: bold;
padding:12px 18px;
font-family: 'Lucida Grande', 'segoe UI', Verdana, Arial, sans-serif;
letter-spacing:0.3pt;
background-color: #3cb371;
border-radius: 24px;
}
.pager a:hover {
background:none;
}

CSS解説

.pager {
display:flex;ボタンを横並びにする
width:100%;画面に対する幅
}
.pager-next a{
font-size:0%;デフォルト文字を消す
background:none;デフォルト背景を消す

margin-right:150px;次のページボタンの位置を左にずらす
margin-left:0px;次のページボタン左の余白無し
}

.pager-next a:before{
color: 次のページボタンの文字色;
content:'次のページを表す言葉';
font-size: 文字サイズの数値px;
font-weight: 文字太さ（boldで太く、normalで細く）;
padding:文字上下の余白px 文字左右の余白px;
font-family: 字体;
letter-spacing:文字間隔の数値pt;
background-color: #ボタン色（カラーコード）;
border-radius: ボタン角の丸みの数値px;
}↓前のページボタンも同じほぼ内容
.pager-prev a{
font-size:0%;
background:none;

margin-right:0px;
}
.pager-prev a:before{
color: #fff;
content:'前のページを表す言葉';

font-size: 18px;
font-weight: bold;
padding:12px 18px;
font-family: 'Lucida Grande', 'segoe UI', Verdana, Arial, sans-serif;
letter-spacing:0.3pt;
background-color: #3cb371;
border-radius: 24px;
}

.pager a:hover {
background:none;クリックした時にデフォルトで出る色を消す
}