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サイトにページネーション(記事分割)を実装してみてはいかがでしょうか。