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

Simplicityカスタマイズ

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

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

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

などなど。

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

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

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

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

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

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

ページネーション

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

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

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

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

ブルーベース

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

ブルーベース

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

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

以上の5つです。

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

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

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

ソースコード(ブルーベース)

ブラックベース

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

ブラックベース

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

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

以上の5つです。

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

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

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

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

ソースコード(ブラックベース)

ピンクベース

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

ピンクベース

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

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

以上の6つです。

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

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

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

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

ソースコード(ピンクベース)

まとめ

いかがでしょうか。

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

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

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