WordPressでは、長文の記事を「改ページ」として分割することができます。
分割することで起きるメリットは、
- ページビュー数の増加
- 広告への視野の拡大
- 平均滞在時間の上昇
などなど。
広告への視野角が拡大することから、AdSence（アドセンス）などのクリック報酬型の報酬率が増加し、アフィリエイトサイトの運営には欠かせない「報酬面の上昇」をページ分割（改ページ）は生み出すことがことができます。
WordPressテーマの1つ「Simplicity」は、アフィリエイトサイトに用いられることが多いテーマです。
今回は、Simplicityでの「改ページ」のカスタマイズサンプルを、CSS（スタイルシート）だけを使用し、私自身がカスタマイズしたソースコード（サンプル）を公開したいと思います。
もくじ
元々の「改ページ」のデザイン
以下のデザインがWordPress（Simplicity）の「改ページ」のスタイルとなります。
シンプルですが、訪問者から分かりやすいデザインです。
今回は、管理人が作成した「カスタマイズサンプル」を幾つか用意しました。
宜しければ、各ソースコードを「コピー＆ペースト」し、ご自身のWebサイトにお役立てください。
ブルーベース
ブルーベースを表示させると以下の画像のようになります。
ブルーベースで行ったカスタマイズ内容（要素の追加）は、
- 角の調整
- ボックスサイズの調整
- マウスオーバー時の背景色を変更（ブルー色）
- マウスオーバー時の文字色を変更（ホワイト色）
- 選択した背景色の変更（ホワイト色）
以上の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;
}
まとめ
いかがでしょうか。
ページネーション（改ページ）は「記事分割」だと訪問者に分かりやすく伝えることが大切です。
記事分割には「背景色」や「特殊効果」、そして、訪問者の視点に立ってインターフェイスを考えることが大切だと改めて実感しました。
皆様も宜しければ、今回の「改ページ」のカスタマイズサンプルを取り入れて、Webサイトにページネーション（記事分割）を実装してみてはいかがでしょうか。
