tkmiumのブログ

tkmium-note

プログラミング中に気づいたことや日々の記録を書いていきます。情報関係基礎の解説記事等も作成します。

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

現在、はてなブログのテーマHaruniを使っています。

Haruni - テーマ ストア

 

そこで、「次のページ」ボタンが

f:id:tkmium:20190101124916p:plain

このようにテキストだけだったので、カスタマイズしていきます。

 

まずは、Google Chromeで自分のブログを表示して、右クリック->検証でコードを表示します。

 

コードが表示されたら、左上の

f:id:tkmium:20190101125157p:plain

このマークを押して、次のページボタンをクリック。

 

f:id:tkmium:20190101125233p:plain

このように、次のページ部分のコードが青くハイライトされます。

 

みると、このテーマでは次のページ部分に"pager-next"というクラスが指定されています。

 

なので、デザイン->スパナマーク->デザインcssに以下のコードを追加します。

/* 次のページ */
.pager-next{
 display: inline-block;
 text-decoration: none;
 padding: 0.5em 1em;
 border: double 4px #fa8072;
 border-radius: 3px;
}

変更を保存すると

f:id:tkmium:20190101125632p:plain

このように表示されたかと思います。

色は、salmon(#fa8072)を指定してみました。テーマに合わせて変えてください。

www.colordic.org

 

アニメーションをつけても面白いかも^^

www.nxworld.net