Simplicityは、WordPressの無料テーマの1つです。
WordPressでは、長文の記事を「改ページ」として分割することができます。
改ページを使い、ページを分割することで、「滞在時間」と「ページビュー数」の増加に繋がり、Webサイトによっては、AdSence(アドセンス)の収益アップをもたらすことが可能です。
改ページのスタイル
WordPress(Simplicity)で「改ページ」を設定するならば、
<!–nextpage–>
このタグを本文中に記載することで、ページ内ページネーション(記事分割)ができるようになります。 WordPressでは、「改ページ」といった「クイックタグ」が設けられており、記事の執筆中に1クリックで記事分割ができるようになっています。
![]() |
AdSence(アドセンス)の収益アップに繋がるのなら、是非、利用してみたいタグですよね。 当サイトでは、WordPressの無料テーマ、Simplicity(シンプリシティ)を利用しています。 「カスタマイズ」「拡張性」に優れた無料テーマで、WordPressテーマの中でも数少ない日本語が対応した日本人の扱いやすいテーマです。 このテーマ(Simplicity)での元々のデザイン(改ページ)のスタイルは以下のとおりです。
元々の改ページスタイルは「丸みを帯びたシンプルなスタイル」に仕上がっていますね。 この改ページ(記事分割)を、CSS(スタイルシート)だけを用いて、カスタマイズしたいと思います。
改ページに使用されていたソースコード
WordPress(Simplicity)で使われていた「改ページ」の大まかの要素は3つです。
.page-link{ 改ページ(全体の要素) }
.page-link span{ 改ページ(単体の要素) }
.page-link a{ 改ページ(単体の要素:リンク) }
それぞれの項目をカスタマイズし、オリジナルのページネーションを作成してみます。
カスタマイズ内容(サンプル:ブルーベース)
ソースコードを並べても解りづらいだけなので、見た目からソースコードを見ていくことにします。
サンプル:ブルーベースを表示させると以下の画像のようになります。
ブルーベースで行ったカスタマイズ内容(要素の追加)は、
- 角の調整
- ボックスサイズの調整
- マウスオーバー時の背景色を変更(ブルー色)
- マウスオーバー時の文字色を変更(ホワイト色)
- 選択した背景色の変更(ホワイト色)
以上の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; }
まとめ
いかがでしたか。
Simplicityは本当に使いやすいテーマです。
始めからSEO対策が施された数少ない日本語テーマでありながら、「カスタマイズ性」「デザイン性」「操作性」に優れた無料テーマです。
是非、この際に、Simplicityを利用し、自分にあったWebサイトを作成してみてはいかがでしょうか。