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

2016/4/9 その他

Simplicityカスタマイズ

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

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

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

などなど。

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

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

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

そこで、レポ部は・・・
【Simplicity】改ページ（記事分割）のカスタマイズサンプル【まとめ】
をレポートしたいと思います。

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

以下のデザインが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;
}

まとめ

いかがでしょうか。

ページネーション（改ページ）は「記事分割」だと訪問者に分かりやすく伝えることが大切です。

記事分割には「背景色」や「特殊効果」、そして、訪問者の視点に立ってインターフェイスを考えることが大切だと改めて実感しました。

皆様も宜しければ、今回の「改ページ」のカスタマイズサンプルを取り入れて、Webサイトにページネーション（記事分割）を実装してみてはいかがでしょうか。

今すぐ使えるかんたん WordPress入門

posted with カエレバ
Amazon
楽天市場
スポンサードリンク

      レポート部長