【広告】

Amazonブラックフライデーが12月2日まで開催中です!

個人的には、Anker製品か、コカ・コーラがかなり安くなっているのでおすすめです!

高級キーボードで有名な東プレが最近発売した「REALFORCE R3」もセールをやっていました!詳しくはこちらの記事を確認してみてくださーい。

【Luxeritas】1ページあたりの記事表示数を増やす方法。ページネーションのカスタマイズもちょろっと紹介

ブログ

ページネーション の設定画面

この記事では、WordPressの無料テーマ「Luxeritas」で1ページあたりの記事表示数を増やす方法について書きます。

Luxeritas → カスタマイズ → ページネーションの「1ページに表示する最大投稿数」から変更できます。

ナポリタン寿司のPC日記 のスクリーンショット

僕のサイトは、1ページに表示される記事数が10件で固定されていて、下のほうに余分な空白が生まれてしまっていました。

僕は「Luxeritas」を利用してるんですが、初心者の僕でも設定しやすいデザインや名称で本当に感謝です。

しかし、この1ページに表示される記事数の設定が全然見つからない!まさかデフォルトでは設定できずに、CSS を弄らないといけないのか~?とかあれやこれやしてたら、思わぬところに設定項目があったので忘れない用に書いておきます。

1ページあたりの記事表示数を増やす方法

Luxeritas→カスタマイズ→ページネーションの「1ページに表示する最大投稿数」から設定できます。

初期では10件になっていたところを24件に設定してみました。

Luxeritas カスタマイザー

カスタマイズ(外観)じゃなくて、カスタマイズからだったんですね。盲点盲点。それに「ページネーション」って初心者には全く聞き覚えのない名称だったから余計見落としてました。

メモ

ページネーションとは、ホームページや記事を分割する機能です。1ページに大量の文字や画像を表示すると表示速度が低下するので、分散させるためにページ下に番号を設けて移動できるようになっているんですね。

ちなみにページネーション ではなく、ページャーリンク と呼ぶこともあるそうです。

参考:ページネーション(パジネーション)とは – IT用語辞典 e-Words

Luxeritas → カスタマイズ(外観)からじゃないのがポイントです。

Luxeritas → カスタマイズ(外観)ではない

多分増やしすぎると、1ページあたりの情報量が増えて、サーバーに負荷がかかったり、表示スピードが落ちたりするんじゃないかと思います。なので、ほどほどがいいのかなと思います。

設定できたら、忘れずに「変更を保存」をクリックします。

サイトを確認してみます。1ページ下に綺麗に記事が収まっています。余分な空白も生まれてません。余白が生まれる方は、余白分数字を減らすか増やすかしてぴったりになるように調整してみてください。

綺麗に記事が表示

余談ですが、デフォルトの数値は、設定 → 表示設定の「1ページに表示する最大投稿数」から設定できました。トップページやカテゴリーごとに個別設定するのがめんどくさい場合、ここから一括で変更できます。

表示設定 ‐ 1ページに表示する最大投稿数

【余談】ページネーションをカスタマイズ

変更前のページネーション

ついでに、ページネーション(ページャーリンク)のデザインちょっと変えてみようかな~と思ったので、思い切って変えてみました。

設定からポチポチクリックするのではなく、CSS と呼ばれるコードを記述することでカスタマイズしていきます。通常よりもリスクもあるのでやる時は慎重にしましょう。あらかじめCSS とは何かを理解しておくことを推奨します。

①バックアップ

CSS(スタイルシート)に追記していくので、バックアップを取ります。CSS はデザインをつかさどっているので、何か失敗したらサイトデザインの表示が崩れる可能性があります。バックアップしておけば、失敗した時でも元に戻すことができます。

Luxeritas → 管理機能 → バックアップタブからバックアップできます。

Luxeritas のバックアップ

僕は、どれをバックアップすればいいのかいまいちわかっていないので「子テーマのバックアップ」も一緒に作成しています。

左が子テーマのバックアップファイル、右が全カスタマイズデータのバックアップファイルです。

バックアップファイル

②カスタマイズする

Luxeritas → 子テーマの編集 → スタイルシートにCSS を書き込んでいきます。

子テーマの編集 → スタイルシート
余談

インターネットを見てると、「スタイルを書き込んでいく~」とか「CSSを書き込んでいく~」って言葉がちらほらあって「何が違うのよ」って思ってたんですが、一緒の意味で使われているそうです。

そもそも、CSSが「Cascading Style Sheets(カスケーディング スタイル シート)」の略称で、スタイルシートの意味と一緒でした。これでまた一つ賢くなった気分に浸れました。

参考:CSSとは?HTMLとCSSの違いからわかるCSSの基礎知識と書き方 | デジタルハリウッドSTUDIO札幌

注意点は、絶対に37行目以降から書き込んでいくことです。36行目までは何も変更しないようにしましょう。

37行目以降から記述する

今回、書き込んだのは以下のCSSです。

/* ページネーション角丸 */
.pagination > li > a,
.pagination > li > span {
border-radius: 25%;
line-height: 25px

これにより、デフォルトのスタイルから角丸デザインになります。

変更後のページネーション

いい感じになったのでよかったです。角丸デザイン最高です。

参考:簡単!Luxeritasルクセリタスのページャーリンクをカスタマイズ | 綾糸.net

まとめ

以上、Luxeritas で1ページあたりの記事表示数を増やす方法でした。

初心者でも、簡単に変更できたのでよかったです。

Posted by ナポリタン寿司