Diviでページ付けのスタイルを設定する方法に関する便利なガイド

公開: 2019-03-11

ページ付けは、特にデザインに関しては見過ごされがちなWebサイトの要素の1つです。そして、ページネーションがあなたのウェブサイトで使用するのに適切であるかもしれない複数の場所があります。基本的に、ページ付け（またはページ付けメニュー）を使用すると、ユーザーはアイテムの複数のページ（投稿のアーカイブなど）をナビゲートできます。これは、最初のページのコンテンツを削減するのに特に役立ちます。

Diviには、組み込み設定を使用してスタイルを設定できるページネーション（ギャラリーモジュールなど）を含む複数のモジュールがあります。これらのモジュールの一部（ブログやポートフォリオなど）は、Diviテーマ（またはWordPress）のデフォルトのページ付けを継承しますが、一部のサイトでは単純化しすぎる可能性があります。しかし、プラグインの助けを借りて、テーマ全体のページネーションをより複雑なものに置き換えることができます。次に、必要に応じてCSSでスタイルを設定できます。

このチュートリアルでは、Divi全体でページ付けのスタイルを設定する方法を紹介します。これが私たちが検討することです：

Diviでページ付けをスタイリングするときに考慮すべき事項
Diviギャラリーモジュールとフィルター可能なポートフォリオモジュールのページ付けのスタイリング
ギャラリーモジュールおよびフィルター可能なポートフォリオモジュールの高度なページ付けスタイル
ブログモジュールとポートフォリオモジュールのページ付けのスタイリング
WP-PageNaviプラグインを使用してDiviに複雑なページ付けを追加する
カスタムCSSを使用したWP-PageNaviページ付けのスタイリング

始めましょう。

スニークピーク

この投稿は主にページ付けのスタイルを設定する方法についてです。ただし、ここでは、構築方法を示す複雑なページ付けスタイルをいくつか紹介します。

diviでのスタイルのページ付け

入門

私たちのYoutubeチャンネルを購読する

このチュートリアルでは、次のものが必要になります。

Diviテーマがインストールされてアクティブになっています。
さまざまなモジュールのページネーションデザインをテストするには、いくつかのモックコンテンツが必要になります。たとえば、ポートフォリオ（またはフィルター可能なポートフォリオ）モジュールのページネーションを設計するには、テーマに約12〜16のプロジェクトを追加して、ページネーションを有効にするのに十分なコンテンツを用意する必要があります。ギャラリーモジュールの場合、ギャラリーにデータを入力するには、約12〜16枚の画像も必要です。
WP-PageNaviプラグインを使用する場合は、プラグインをインストールしてアクティブ化する必要があります。これは、サイトのWordPressダッシュボード内からWordPressディレクトリからダウンロードできる無料のプラグインです。プラグイン>新規追加に移動し、WP-PageNaviを検索するだけです。

模擬コンテンツを配置したら、新しいページを作成する準備が整います。 WordPressダッシュボードから、[ページ]> [新規追加]に移動します。ページにタイトルを付けて、DiviBuilderをデプロイします。「最初から構築する」オプションを選択します。次に、クリックしてフロントエンドでビルドします。

これで、いくつかのページ付けデザインのテストを開始する準備が整いました。

Diviでページ付けをスタイリングするときに考慮すべき事項

一般的に言って、ページ付けのデザインに夢中になりすぎたくないでしょう。他のナビゲーションメニューと同様に、ページ付けをシンプルで直感的に保つことが重要だからです。ただし、Diviでページ付けを設計するときに考慮すべきことがいくつかあります。

ページ付けフォント

ページ付けは、サイトで使用しているメインフォントから離れるのに最適な場所です。ユーザーインターフェイスとナビゲーションに合わせた最適なフォントを選択する必要があります。また、ページネーションにはほとんどの数字が含まれているため、フォントにすべての数字が同じ高さと幅で表示されるようにする必要があります（タイポグラフィの専門家はライニングと表形式と呼んでいます）。私の保守的なお気に入りには、Oxygen、Nunito Sans、Source SansProなどがあります。また、ページネーションに多数のページがある場合は、FjallaOneやRobotoCondensedなどの凝縮フォントを使用してスペースを解放する必要がある場合があります。

ページ付けフォントスタイル

また、いくつかのフォントスタイルを試して、ページネーションを際立たせることもできます。たとえば、大文字のフォントスタイルを使用して、「次の」リンクと「前の」リンクをより目立たせ、ページ番号の高さと同じにすることができます。ただし、リンクがすでにナビゲーションメニューにあることを考えると、下線フォントスタイルの追加は少し冗長になる可能性があります。

ページ付け文字の間隔

文字間隔は、ページネーションにもう少し水平方向の間隔を追加するための優れた方法です。これにより、優れたデザイン要素が追加され、ナビゲーションが目立つようになります。

ページ付けテキストの配置

Diviでは、ページ付けをページの左、中央、または右に簡単に揃えることができます。したがって、Webページをデザインするときはいつでもこれを忘れないでください。

クリック可能なスペース

ページ付けリンク用に十分なクリック可能なスペースを確保することが重要です。デフォルトでは、これはかなり小さくなります。より大きなテキストを使用するか、行の高さを増やすことで、クリック可能なスペースを増やすことができます。ただし、CSSを使用して、これらのリンクの周囲にパディングを追加することもできます。

ページ付けテキストサイズ

通常、ページ付けテキストのサイズはかなり小さいです。これはおそらく、ページのコンテンツからユーザーの注意をそらさないようにするためです。ただし、テキストサイズを大きくすると、ページネーションリンクのクリック可能なスペースが増え、ユーザーが目立つようになります。大きなページネーションテキストにはvwの長さの単位を使用して、ブラウザやコンテンツに合わせて適切に拡大縮小できるようにするのが好きです。

ページネーションラインの高さ

通常、ページネーションは1行にとどまるため、クリック可能なスペースを追加するために、リンクに行の高さをもう少し追加することで回避できます。

ページ付けテキストシャドウ

テキストシャドウは、使用が不十分な場合、気が散る可能性があります。あなたがそれを微妙に保つことを計画しない限り、それを省くのが最善です。そのようなことをしたい場合は、テキストの周りに創造的な輝きを加えるためにも使用できます。

ページネーションアクティブページ

ページ付けのこの側面は、ナビゲート時に現在どのページを表示しているかをユーザーに知らせるために重要です。アクティブなページリンクのスタイルと非アクティブなページリンクのスタイルには明確な対照があるはずです。デフォルトでは、Diviは、テーマカスタマイザーで設定されたプライマリアクセントカラーを、Diviのアクティブなページリンクの色として使用します。ただし、これをCSSの行でオーバーライドできます。

ページネーションのあるモジュールの場合、Diviには、ページネーションのさまざまな要素をスタイリングするための組み込みのデザインオプションがあります。さらに、[詳細設定]タブにCSSのスニペットを簡単に追加して、1つの便利な場所でデザインをさらに細かく制御できます。

ただし、テーマレベルでのページ付けについては、カスタムCSSでWP-PageNaviプラグインを使用して複雑なソリューションを取得できます（これについては後で詳しく説明します）。

とりあえず、Diviモジュールでページ付けのスタイルを設定する方法から始めましょう。

Diviギャラリーモジュールとフィルター可能なポートフォリオモジュールのページ付けのスタイリング

新しいページでDiviBuilderをアクティブにして、1列の行を持つ新しい通常のセクションを作成します。次に、フィルター可能なポートフォリオモジュールを行に追加します。前述のように、ページネーションを確認できるように、12〜16個のプロジェクトが作成されていることを確認してください。

フィルタ可能なポートフォリオ設定で、以下を更新します。

投稿番号：4（ページネーションでより多くのページリンクを見ることができるように）

タイトルを表示：いいえ
カテゴリを表示：いいえ

デフォルトでは、Diviはページ付けを表示するので、そのオプションをYESに設定したままにします。

ポートフォリオの右下にページネーションが表示されます。

diviでのスタイルのページ付け

ページネーションのスタイルを設定するには、[デザイン]タブに移動し、[ページネーションテキスト]トグルを開いて、使用可能なすべてのオプションを確認します。以下を更新します。

レイアウト：グリッド
ページ付けフォント：Source Sans Pro
ページ付けフォントスタイル：TT
ページ付けテキストの配置：中央
ページ付けテキストの色：#cccccc
ページ付けテキストサイズ：4vw（デスクトップ）、38px（タブレットと電話）
ページ付け文字の間隔：1vw
ページ付けラインの高さ：2em

次に、[詳細設定]タブをクリックし、[ページ付けアクティブページ]の下に次のCSSスニペットを追加します。

color: #0096eb !important;

行の高さを大きくしてテキストを大きくすることで、ユーザーがクリックできるスペースが増えます。配置を中央に変更し、文字間隔を少し追加すると、ページネーションがより目立つようになります。また、対照的なアクティブページの色を使用したカスタムページ付けテキストの色は、ユーザーが現在のページを知るのに役立ちます。

その他のクイックCSSスニペット

これは、ページ付けのデザインを変更するためのすばやく簡単なCSSスニペットです。

ページネーションの真上にあるデフォルトの境界線を削除するには、ポートフォリオページネーションの下に次のCSSを入力します。

border: none;

diviでのスタイルのページ付け

ページ付けに完全な境界線を付けるには、PortfolioPaginationの下に次のCSSを入力します。

border: 2px solid #dddddd;

diviでのスタイルのページ付け

ページ付けに背景色を付けるには、PortfolioPaginationの下に次のCSSを入力します。

background: #333333;

diviでのスタイルのページ付け

ギャラリーモジュールでも動作します

これと同じデザイン設定は、ギャラリーモジュールでも機能します。実際、フィルター可能なポートフォリオモジュールからページネーションテキストスタイルをコピーして、ギャラリーモジュールに貼り付けることができます。 CSSスニペットも転送するようにしてください。

diviでのスタイルのページ付け

ギャラリーモジュールおよびフィルター可能なポートフォリオモジュールの高度なページ付けスタイル

diviでのスタイルのページ付け

Filterable PortfolioおよびGalleryモジュールのページネーションのためのより高度なデザインを取得したい場合は、より高度なカスタムCSSを使用できます。この特定の例で私が気に入っているのは、カスタムCSSがモジュールの組み込み設定と連携して機能することです。

実例を示すために、フィルター可能なポートフォリオをもう一度使用してみましょう。今回は、次のようにデザインオプションを更新します。

レイアウト：グリッド
ページ付けテキストサイズ：16px
ページ付けラインの高さ：2.5em

diviでのスタイルのページ付け

[詳細設定]タブで、次のCSSクラスを追加します。

CSSクラス：pagi-space

これにより、CSSをこのモジュールにのみ適用できるようになります。

diviでのスタイルのページ付け

次に、設定を保存して、[ページ設定]ポップアップモーダルを開きます。 [詳細設定]タブで、[カスタムCSS]ボックス内に次のCSSコードを追加します。

.et_pb_filterable_portfolio.pagi-space .et_pb_portofolio_pagination, .et_pb_gallery.pagi-space .et_pb_gallery_pagination {
  border: none; 
}

.et_pb_filterable_portfolio.pagi-space .et_pb_portofolio_pagination ul li a, .et_pb_gallery.pagi-space .et_pb_gallery_pagination ul li a {
  padding: 1em 1.5em;
  background: #eeeeee;
  border: 1px solid #eeeeee;
}

.et_pb_filterable_portfolio.pagi-space .et_pb_portofolio_pagination ul li a:hover, .et_pb_gallery.pagi-space .et_pb_gallery_pagination ul li a.hover {
  border-color: #333333;
}

.et_pb_filterable_portfolio.pagi-space .et_pb_portofolio_pagination ul li a.active, .et_pb_gallery.pagi-space .et_pb_gallery_pagination ul li a.active {
  background: #333333;
  color: #ffffff;
  border-color: #333333;
}

diviでのスタイルのページ付け

コードを配置すると、ページリンクごとにクリック可能なスペースがページネーションに追加されたことがわかります。また、リンクには背景色が追加されているため、クリック可能なボタンのように見えます。ホバーの各リンクにも微妙な境界線が追加されます。アクティブなページリンクは、明るいテキスト色と対照的な暗い背景で際立っています。

このコードは、フィルター可能なポートフォリオモジュールとギャラリーモジュールの両方のページネーションのスタイルを設定します。モジュールを有効にするには、CSSクラス「pagi-space」をモジュールに追加してください。

これがフィルター可能なポートフォリオモジュールの結果です。

diviでのスタイルのページ付け

ブログモジュールとポートフォリオモジュールのページ付けのスタイリング

ブログモジュールとポートフォリオモジュールは、デフォルトのWordPressページ付けを継承しており、「古いエントリ」へのリンクと「次のエントリ」へのリンクを使用して投稿アーカイブをナビゲートできます。

Diviテーマのブログアーカイブページでのデフォルトのページ付けは次のようになります。

diviでのスタイルのページ付け

これと同じページ付けが、ブログモジュールとポートフォリオモジュールで使用されます。

diviでのスタイルのページ付け

ブログモジュール（またはポートフォリオモジュール）を使用している場合は、組み込みの設定を使用してページネーションテキストのスタイルを設定できます。

diviでのスタイルのページ付け

これは、ほとんどの場合、シンプルでエレガントなソリューションです。ただし、デフォルトのDivi / WordPressページ付けを置き換えるためのより複雑なページ付けを探している場合は、非常に簡単なソリューションがあり、驚くかもしれません。

WP-PageNaviプラグインを使用してDiviに複雑なページ付けを追加する

ブログモジュールとポートフォリオモジュールを含むDiviテーマ全体に対してより高度なページ付けが必要な場合は、WP-PageNaviと呼ばれる人気のあるプラグインを使用して、デフォルトのWordPressページ付けを別のページ付けに置き換えることができます。このプラグインはDiviでうまく機能します。デザインは基本的ですが、CSSを使用して簡単にカスタマイズできます。

プラグインをDiviに追加する

まだ行っていない場合は、投稿の上部にある「はじめに」セクションの説明に従って、プラグインをインストールしてください。プラグインがインストールされてアクティブになると、新しい形式のページ付けがテーマ全体に自動的に表示されます。

diviでのスタイルのページ付け

また、ブログモジュールとポートフォリオモジュールにも影響します。

diviでのスタイルのページ付け

プラグイン設定

[設定]> [WP-PageNavi]に移動すると、WordPressダッシュボードからプラグイン設定を見つけることができます。

diviでのスタイルのページ付け

設定は主に、表示される機能とテキストコンテンツをカスタマイズするためのものです。ただし、ページネーションのスタイルを設定する場合は、カスタムCSSを使用する必要があります。

カスタムCSSを使用したWP-PageNaviページ付けのスタイリング

おそらくテーマ全体のページネーションのスタイルを設定する必要があるため、CSSをテーマカスタマイザーまたは子テーマのstyle.cssファイルに追加するのが最も理にかなっています。先に進み、次のCSSをテーマカスタマイザーの[追加のCSS]ボックスに配置します。

/*styles the wp-pagenavi pagination links*/
.wp-pagenavi a, .wp-pagenavi span {
  padding: 0.3em 0.8em !important;
  font-size: 2em !important;
  color: #333333;
  line-height: 2em;
  background: #eeeeee;
  transition: all .5s;
}

/*styles the wp-pagenavi current page number*/
.wp-pagenavi span.current {
  color: #ffffff !important;
  background: #333333 !important;
}

/*styles the wp-pagenavi pagination links on hover*/
.wp-pagenavi a:hover {
  color: #ffffff !important;
  background: #333333 !important;
}

/*styles the wp-pagenavi pages text*/
.wp-pagenavi .pages {
  background: none;
}

diviでのスタイルのページ付け

これが最終結果です。

diviでのスタイルのページ付け

ブログモジュールとポートフォリオモジュールでのWP-PageNaviのスタイリング

前述のように、ブログモジュールとポートフォリオモジュールはデフォルトのWordPressページナビゲーションを継承します。これはWP-PageNaviの新しい複雑なページネーションに置き換えられたため、モジュールはこの新しいページネーションも表示します。

組み込みのページ付けテキストデザインオプションを使用して、ページ付けにさらにスタイルを追加できます。

diviでのスタイルのページ付け

一部のオプションは、外部のカスタムCSSが配置されていると期待どおりに機能しない可能性があることに注意してください。

最終的な考え

ディビでウェブサイトを構築するとき、ページ付けは後から考え続ける必要はありません。ページ付けを使用するモジュールを支援するための便利な組み込みオプションがいくつかあります。また、カスタムCSSを使用すると、任意のスタイルを作成できます。 WP-PageNaviプラグインは、Diviテーマ全体に複雑なページネーションを追加するためのエレガントなソリューションです。 Diviとシームレスに連携するだけでなく、簡単にカスタマイズできる追加のオプションを提供します。 WP-PageNaviページネーションのスタイリングにはCSSが必要ですが、この記事で使用されているテンプレートが正しい方向に進むことを願っています。

この投稿のサンプルデザインは、意図的に単純なものです。

コメントでお返事をお待ちしております。

乾杯！