【Simplicity】改ページ（記事分割）のカスタマイズサンプル【まとめ】

WordPressでは、長文の記事を「改ページ」として分割することができます。

分割することで起きるメリットは、

ページビュー数の増加
広告への視野の拡大
平均滞在時間の上昇

などなど。

広告への視野角が拡大することから、AdSence（アドセンス）などのクリック報酬型の報酬率が増加し、アフィリエイトサイトの運営には欠かせない「報酬面の上昇」をページ分割（改ページ）は生み出すことがことができます。

WordPressテーマの1つ「Simplicity」は、アフィリエイトサイトに用いられることが多いテーマです。

今回は、Simplicityでの「改ページ」のカスタマイズサンプルを、CSS（スタイルシート）だけを使用し、私自身がカスタマイズしたソースコード（サンプル）を公開したいと思います。

そこで、レポ部は・・・

【Simplicity】改ページ（記事分割）のカスタマイズサンプル【まとめ】

をレポートしたいと思います。

1 元々の「改ページ」のデザイン
2 ブルーベース
- 2.1 ソースコード（ブルーベース）
3 ブラックベース
- 3.1 ソースコード（ブラックベース）
4 ピンクベース
- 4.1 ソースコード（ピンクベース）
5 まとめ

元々の「改ページ」のデザイン

以下のデザインがWordPress（Simplicity）の「改ページ」のスタイルとなります。

シンプルですが、訪問者から分かりやすいデザインです。

今回は、管理人が作成した「カスタマイズサンプル」を幾つか用意しました。

宜しければ、各ソースコードを「コピー＆ペースト」し、ご自身のWebサイトにお役立てください。

Simplicityのバージョンによっては動作しない場合があります。ただ、ページネーションの決められた要素（メソッド）を使用してカスタマイズを行なっています。他のテーマでも実行すれば動作する場合もありますがテストはしてません。

ブルーベース

ブルーベースを表示させると以下の画像のようになります。

ブルーベースで行ったカスタマイズ内容（要素の追加）は、

角の調整
ボックスサイズの調整
マウスオーバー時の背景色を変更（ブルー色）
マウスオーバー時の文字色を変更（ホワイト色）
選択した背景色の変更（ホワイト色）

以上の5つです。

元々の「改ページ」の丸みを無くし、アフィリエイト向けの直角スタイルを実装しました。

背景色をブルーベースにすることにより、ページ内ページネーション（改ページ）を目立たせ、クリックを誘いやすい形状にしています。

以下にブルーベース（サンプル）のソースコードを記します。

ソースコード（ブルーベース）

.page-link{
text-align:center;
}
.page-link span{
margin-right: 3px;
padding: 8px 11px;
border: 1px solid #ddd;
background: #ffffff;
border-radius:0px;
}
.page-link a span{
background: #41a69c;
color:#ffffff;
}
.page-link a span:hover{
background: #33827A;
color:#ffffff;
}

ブラックベース

ブラックベースを表示させると以下の画像のようになります。

ブラックベースで行ったカスタマイズ内容（要素の追加）は、

角の調整
ボックスサイズの調整
リンクボックスを点線で表示
マウスオーバー時の背景色を変更（薄：灰色）
マウスオーバー時の文字色を変更（ホワイト色）

以上の5つです。

改ページのページネーションボックスに点線を使うとクリック数 ÷ 表示回数（CTR）が上昇しました。

推測ですが、他サイトの改ページのデザインの多くが、1本線（solid）のボックスデザインですが、破線（dashed）のボックスは、カラーリングだけのページ分割とは違い、破線にすることで、1本線からの破線への切り替え（視野角）に「ぎこちなさ」が生まれると同時に「ぎこちなさ」による「好奇心」がインパクト性へと変化し、訪問者へと伝わるからではないでしょうか。

インパクト性をもたせるならば「1本線」よりも「破線」を用いたボックスデザインを選択した方が「CTR」は増加するという結果になりました。

以下にブラックベース（サンプル）のソースコードを記します。

ソースコード（ブラックベース）

.page-link{
text-align:center;
}
.page-link span{
margin-right: 3px;
padding: 8px 11px;
border: 1px solid #ddd;
background: #ffffff;
border-radius:0px;
}
.page-link a span{
background: #696969;
border: 1px dashed #ddd;
color:#ffffff;
}
.page-link a span:hover{
background: #A9A9A9;
color:#ffffff;
}

ピンクベース

ピンクベースを表示させると以下の画像のようになります。

ピンクベースで行ったカスタマイズ内容（要素の追加）は、

角を丸める
ボックスサイズの調整
リンクボックスを点線で表示
フェードイン、フェードアウト
マウスオーバー時の背景色を変更（濃い：ピンク色）
マウスオーバー時の文字色を変更（ホワイト色）

以上の6つです。

ピンクベースは女性向けに作成してみました。

ピンク色をベースに角に丸みを付け、柔らかい操作性を訪問者に与えるために、マウスオーバー時にはフェードイン、マウスアウト時にはフェードアウトといった「特殊効果」を、CSS（スタイルシート）だけで実装しています。

ブラックベースで検証したときのクリック数 ÷ 表示回数（CTR）の上昇に繋がった「破線」を取り入れ、ふんわりとした女性向けのインターフェイスに仕上がったと感じています。

以下にピンクベース（サンプル）のソースコードを記します。

ソースコード（ピンクベース）

.page-link{
text-align:center;
}
.page-link span{
margin-right: 3px;
padding: 8px 11px;
border: 1px solid #ddd;
background: #ffffff;
border-radius:5px;
}
.page-link a span{
background: #EE82EE;
border: 1px dashed #ddd;
color:#ffffff;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
transition: all 0.6s ease;
}
.page-link a span:hover{
background: #DA70D6;
color:#ffffff;
}