【Simplicity】改ページ(記事分割)のカスタマイズ方法【まとめ】

Simplicityカスタマイズ

Simplicityは、WordPressの無料テーマの1つです。

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

改ページを使い、ページを分割することで、「滞在時間」と「ページビュー数」の増加に繋がり、Webサイトによっては、AdSence(アドセンス)の収益アップをもたらすことが可能です。

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

改ページのスタイル

WordPress(Simplicity)で「改ページ」を設定するならば、

このタグを本文中に記載することで、ページ内ページネーション(記事分割)ができるようになります。

WordPressでは、「改ページ」といった「クイックタグ」が設けられており、記事の執筆中に1クリックで記事分割ができるようになっています。

改ページ

AdSence(アドセンス)の収益アップに繋がるのなら、是非、利用してみたいタグですよね。

当サイトでは、WordPressの無料テーマ、Simplicity(シンプリシティ)を利用しています。

「カスタマイズ」「拡張性」に優れた無料テーマで、WordPressテーマの中でも数少ない日本語が対応した日本人の扱いやすいテーマです。

このテーマ(Simplicity)での元々のデザイン(改ページ)のスタイルは以下のとおりです。

ページネーション
元々の改ページスタイルは「丸みを帯びたシンプルなスタイル」に仕上がっていますね。

この改ページ(記事分割)を、CSS(スタイルシート)だけを用いて、カスタマイズしたいと思います。

改ページに使用されていたソースコード

WordPress(Simplicity)で使われていた「改ページ」の大まかの要素は3つです。

それぞれの項目をカスタマイズし、オリジナルのページネーションを作成してみます。

カスタマイズ内容(サンプル:ブルーベース)

ソースコードを並べても解りづらいだけなので、見た目からソースコードを見ていくことにします。

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

ブルーベース

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

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

以上の5つです。

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

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

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

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

まとめ

いかがでしたか。

Simplicityは本当に使いやすいテーマです。

始めからSEO対策が施された数少ない日本語テーマでありながら、「カスタマイズ性」「デザイン性」「操作性」に優れた無料テーマです。

是非、この際に、Simplicityを利用し、自分にあったWebサイトを作成してみてはいかがでしょうか。