ページ切替ボタン(前ページ・次ページ)の表示を変える方法

ページ切替ボタン(前ページ・次ページ)の表示を変える方法

アメブロカスタマイズのわざめーばです。

こんにちは。

読者さんから、

『アメブロのページ切替ボタンの「<<前ページ」と「次ページ>>」の表記が、どちらに行くと古くて、どちらに行くと新しいのかが直観的にわからない』

というメッセージを頂きました。

そういえば、最近はすっかり慣れてしまって、気になることがなかったんですが、以前は、

「わかりにくいなぁ」

と思ってたことを思い出しました。

このページ切替ボタンの表記は、あまりアメブロに慣れていない訪問者さんにとっては、時系列がハッキリわかる内容の方が親切かもしれませんね。

というわけで、CSSを編集することで変える方法を考えてみました。

ページ切替ボタンの表示文字を「<<新しい記事」「古い記事>>」に変える

それでは、一例として、ページ切替ボタンの表示文字を「<<新しい記事」「古い記事>>」に変える方法をご紹介します。

(今回は、新デザイン向けです)

ページ切替ボタンの表示文字を変えるには、以下のコードをユーザーCSSの最後に追加してみて下さい(⇒ユーザーCSSの編集に関してはこちらを参考にして下さい)

/***********************************************************
  ページ切替ボタンの表示文字を変える
***********************************************************/
.nextPrevPaging a,
.nextPrevPaging ~ article .entryPaging a {
  height: 1.4em;
  line-height: 1.4em;
  overflow: hidden;
}
.nextPrevPaging ~ article .entryPaging a{
  vertical-align: top;
}
.nextPrevPaging .pagingPrev:before,
.nextPrevPaging ~ article .entryPaging .pagingPrev:before {
  display: block;
  white-space: pre;
  content:"3c3c20新しい記事aaa";
}
.nextPrevPaging .pagingNext:before,
.nextPrevPaging ~ article .entryPaging .pagingNext:before {
  display: block;
  white-space: pre;
  content:"古い記事203e3eaaa";
}

もし「新しい記事」「古い記事」以外にしたい場合は、赤文字の部分を変えると、ボタンに表示される文字を変えることができますので、お好みの内容を表示してみてください。

また、上記コードの『1.4em』の部分を変更するとボタンの高さを調整することができます(「height」と「line-height」の値を同じにするのがコツです)

「em」は概ね「文字の高さの何倍?」と言った意味ですので、上記コードの場合は、「1.4文字分」ということになります。

あと、見慣れない「¥」付きの暗号みたいなのがありますが、これは、文字化けしてしまう文字などを別の表現方法で表すやり方で、今回の場合、

¥20・・・スペース
¥3c・・・<
¥3e・・・>
¥a・・・改行

の文字を表しています(が、覚えなくていいと思います)。

以上、よかったら参考にしてみて下さい。

ちなみに、本件提案して下さったのは、こちらの方です

ありがとうございました。

関連記事

CSSを編集してアメブロをカスタマイズする方法
アメブロカスタマイズ目次
アメブロカスタマイズで成功するブログを作ろう トップページ