ブログ

新着記事の一覧ページの作り方を解説!プラグイン【Content Views】でどのテーマでも作れる!

\ シェアしてね! /

この記事の内容

新着記事の一覧ページの作り方を解説!

プラグインを利用するので、どのテーマを使っていても適用可能🙌

スッキリしたトップページを作りたい方にオススメ💕

私のブログでは、トップページで新着記事を表示しています。

イメージは以下のような感じです。

【新着記事一覧ページの作成方法】トップページのイメージ-min

トップページに表示した新着記事のイメージ。

トップページに掲載している新着記事は3件

それより以前の新着記事は、その下の「新着記事はこちら」のリンクから、「新着記事一覧ページ」へリンクしています。

リンク先の「新着記事一覧ページ」のイメージは以下のような感じ。

【新着記事一覧ページの作成方法】新着記事一覧ページのイメージ-min

新着記事一覧ページのイメージ。

イメージとしては、「新着記事はこの3件!さらに新着記事が見たい人は、この「新着記事一覧」を見れば、もっと見られまっせ!」という仕様です。

そして先日、このリンク先である「新着記事一覧ページの作り方を教えてほしい」というお問い合わせをみゆもさん(@miyumo_3boysmom)よりいただきました。

そこで、この記事では新着記事一覧ページの作り方を解説していきます。

トップページで新着記事を一覧でズラリと表示するのも良いのですが、少し読みづらく感じてしまうんですよね…。トップページに表示させる新着記事は数件程度で良い、という方は、この方法を使うとトップページをスッキリできますよ~☆

プラグインを利用するので、どのテーマでも作成OK♪サイト型のブログも作りやすくなりますよ。

新着記事一覧ページの作り方

「新着記事一覧ページ」を作る流れを大まかに分けると、以下の5ステップです。

  1. 固定ページを作成
  2. プラグイン(Content Views)で新着記事を表示するコードを作成
  3. ②のコードを➀の固定ページに貼る
  4. CSSで整える
  5. ➀の固定ページを公開して、トップページにリンクを貼る

おそらく新着記事の一覧のページは自動で生成されません。

なので何らかの形で、新着記事の一覧を取得する必要があります。

私の場合は「➀プラグインで新着記事の一覧を取得して」、「②固定ページで新着記事の一覧を表示する」という方法を取っています。

この流れの中でポイントとなるのは、

  • プラグイン(Content Views)の設定方法
  • プラグイン(Content Views)のCSSの調整

の2つ。

ここからは、新着記事一覧ページを作成する手順や設定方法、CSSなどを順番に解説していきます。

1.固定ページの作成

固定ページを作成します。

私は以下のように固定ページを作成しています。

  • タイトル:新着記事一覧
  • URL:https://asatosayaka.com/new-entry/

2.プラグイン「Content Views」で新着記事の一覧を取得するコードを作成

「Content Views」というプラグインで、新着記事の一覧を取得するコードを作成します。

まずはContent Viewsのプラグインをダウンロードし、有効化しましょう。

【新着記事一覧ページの作成方法】Content Viewsのプラグイン-min

Content Viewsのプラグインはこんな感じです。

有効化したら、ダッシュボードにContent Viewsのメニューが出てきます。

【新着記事一覧ページの作成方法】Content Viewsを有効化したらダッシュボードにメニューが表示される-min

Content Viewsのメニューがダッシュボードに表示されます。

このメニューをクリックし、新着記事一覧を表示するコードを作成していきます。

新着記事一覧を表示するコードの作成方法は以下の通りです。

 Content Viewsで新着記事一覧を表示するコードの作成方法

step
1
「新規追加」を選択。

【新着記事一覧ページの作成方法】Content Viewsー1.「新規追加」を選択-min

Content Viewsを選択し、「新規追加」を選択。

step
2
タイトルの設定&Filter Setteingsで「投稿」にチェック

【新着記事一覧ページの作成方法】Content Viewsー2.Filter Setteingsの設定-min (1)

Filter Setteingsのタブで「投稿」にチェックを付ける。

タイトルを入力します。

ここはユーザーに見えないタイトルなので、自分が管理しやすいタイトルを付けて構いません。

私は「新着記事一覧」と入力しています。

Filter Setteingsのタブでは「Content type」の「投稿」のラジオボタンにチェックが入っていることを確認し、他のボックスはすべてカラにします。

「Common」の「Limit」に数値が自動的に入っているかもしれません。

ここは「表示する記事数」です。

すべての記事を表示させたい場合は、このボックスを空にしましょう。

step
3
Display Setteingsを設定

【新着記事一覧ページの作成方法】Content Viewsー3.Display Setteingsの設定-min (1)

Display Setteingsのタブで上記のように設定。

Display Setteingsのタブで、上記の画像のように設定します。

設定したら、保存をクリックします。

step
4
Content Viewsのコードをコピー

【新着記事一覧ページの作成方法】Content Viewsー4.コードが表示される-min

出来上がったContent Viewsのコードをコピーする

保存すると、Content Viewsのコードが生成されます。

こちらをコピーします。

3.Content Viewsで作成したコードを固定ページに貼り付け

②で作成した「新着記事一覧を表示させるコード」を、➀で作成した固定ページに貼り付けます。

【新着記事一覧ページの作成方法】固定ページにContent Viewsで作成したコードを貼り付ける-min

作成したコードを、作成した固定ページに貼り付け。

4.CSSでContent Viewsのデザインを調整

新着記事一覧をCSSで整えていきます。

私は以下のCSSを利用しています。

 Content ViewsのCSS(記事一覧)

Content ViewsのCSS(記事一覧)


/*カード風記事(カード全体)*/

.pt-cv-ifield{
 box-shadow: 0 0 5px #ccc;
 margin-top:2em;
}

.pt-cv-ifield:hover {
 box-shadow: 0 0 10px #aaa;
 transition: 0.3s;
 text-decoration: none!important;
 -ms-transform: translateY(-8px);
 -webkit-transform: translateY(-8px);
 transform: translateY(-8px);/*上に動く*/
	
}


/*カード風記事(記事名)*/

.pt-cv-title{
 height: 150px;/*記事タイトルボックスの高さ*/
 padding: 0 1em 2em 1em;
 background:#fff;
 font-size:1.2em;/*記事タイトルの文字の大きさ*/
}

.pt-cv-title a{
 color: #555;
 font-weight:bold;
}

.pt-cv-wrapper{
 margin-bottom: 2em;
}

.pt-cv-wrapper [class*=pt-cv-] a {
 background: #fff;
}

	
/*カード風記事(スマホ閲覧時)*/

@media only screen and (max-width: 599px){
	
.pt-cv-ifield{
 margin:1em 0;
}
	
.pt-cv-title{
 height: auto;
 padding: 0.5em 1em 1em;
 font-size:1.2em;/*記事タイトルの文字の大きさ*/
}
}

.pt-cv-1-col{
 padding-left: 7px;/*スマホで見たときの余白調整*/
 padding-right: 7px;
}

.pt-cv-colsys {
 margin-left: 0;
 margin-right: 0;
}

 Content ViewsのCSS(ページネーション)

Content ViewsのCSS(ページネーション)


/*ページネーション*/

.pt-cv-pagination-wrapper{
 text-align: center;
}

.pt-cv-pagination-wrapper .pt-cv-pagination.pagination a,
.pt-cv-pagination-wrapper .pt-cv-pagination.pagination > li:first-child > a,
.pt-cv-pagination-wrapper .pt-cv-pagination.pagination > li:last-child > a {
 width:30px!important;
 height:40px!important;
 border-radius: 50%;
 text-align:center;
 line-height: 40px;
 vertical-align: middle;
 color:#fff;
 margin:1px;
 white-space: nowrap;
}

.pt-cv-pagination-wrapper .pt-cv-pagination.pagination a:hover,
.pt-cv-pagination-wrapper .pt-cv-pagination.pagination > li:first-child > a:hover,
.pt-cv-pagination-wrapper .pt-cv-pagination.pagination > li:last-child > a:hover {
 color:#fff!important;
 background-color:#8cbfdb;/*ホバー時*/
 box-shadow: 0 0 10px #aaa;
}

.pt-cv-wrapper .pagination>li>a,.pt-cv-wrapper .pagination>li>span{
 background-color:#b3cedd;/*丸の背景色*/
 border:none;
 text-align: center;
}

.pt-cv-wrapper .pagination>li:first-child>a,.pt-cv-wrapper .pagination>li:first-child>span{
 margin-left:8px;
 background-color:#b3cedd;/*一番左の丸*/
}

.pt-cv-wrapper .pagination>.active>a, .pt-cv-wrapper .pagination>.active>a:focus, .pt-cv-wrapper .pagination>.active>a:hover, .pt-cv-wrapper .pagination>.active>span, .pt-cv-wrapper .pagination>.active>span:focus, .pt-cv-wrapper .pagination>.active>span:hover {
 background-color: #f4babf;/*今いるページの色*/
}


/*ページネーション(スマホ閲覧時)*/

@media only screen and (max-width: 599px){
	
.pt-cv-pagination-wrapper .pt-cv-pagination.pagination a,
.pt-cv-pagination-wrapper .pt-cv-pagination.pagination > li:first-child > a,
.pt-cv-pagination-wrapper .pt-cv-pagination.pagination > li:last-child > a {
 width:10px!important;
 height:20px!important;
 line-height: 20px;
 font-size:0.8em;
}

}

/*ページネーションの下の余白調整*/

.pt-cv-clear-pagination{
 margin-bottom:10px;
}

ちなみにですが、私が利用している上記のCSSは、特定の環境下(おそらく一部のタブレットで表示した時?)でズレる可能性があります。

私のCSSの勉強不足なんだな…。

色や余白などは、自分のブログにあったものに微調整していってください。

5.固定ページを公開し、トップページからリンクを貼る

CSSの調整まで出来たら公開します。

あとはこの固定ページへのリンクを、トップページに貼って完成です。

サイドバーがあると文字がはみ出す

上記のContent Viewsの設定とCSSを適用させた場合、サイドバーがあると高確率で文字がはみ出します

【新着記事一覧ページの作成方法】Content Viewsーサイドバーがあると文字がズレるので対策を取ろう!-min

サイドバーがあると、タイトルのボックス内に納まらず、はみ出すことに…。

この対策としては、

  • サイドバーを非表示にする
  • 文字サイズを小さくする
  • タイトルのボックスを大きくする
  • 横の記事数を3列から2列にする方法

の4種類があります。

それぞれの対策方法は以下を参照してください。

サイドバーを非表示にする方法

 サイドバーを非表示にする

ただいま手順を作成中です。

しばらくお待ちください。

文字サイズを小さくする方法

 文字サイズを小さくする

上記のCSSに「/*記事タイトルの文字の大きさ*/」という記述があります。

この記述のfont-size:1.2em;の数字を変えることで、文字サイズを調節できます。

ちなみに1.2emは「1.2倍」です。

小さくするなら1em(厳密には1emならこの記述はまるごと削除してもOK)か、0.8em0.9emあたりが良さそうです。

タイトルのボックスを大きくする方法

 タイトルのボックスを大きくする方法

上記のCSSに「/*記事タイトルボックスの高さ*/」という記述があります。

この記述のheight: 150px;の数字を変えることで、タイトルボックスのサイズを調節できます。

この記述を削除すると各文字の量に合わせたサイズになりますが、サイズがバラけてあまりキレイではありません。

【新着記事一覧ページの作成方法】height150pxを削除するとボックスのサイズがズレる-min

height: 150px;を削除すると、文字の量によってタイトルボックスの大きさがズレる。

そのため、文字が入りきる量でheightの数値を調節してあげるのがオススメです。

【新着記事一覧ページの作成方法】height150pxを調節したら文字がキレイにボックス内に納まりました-min

heightの数値を、文字が入りきる量で調節。すべての文字がボックス内に納まり、ボックスのサイズも統一された。

横の記事数を3列から2列にする方法

 横の記事数を3列から2列にする方法

記事数を横3列から横2列にすると、ボックスの横幅が広がり、文字がボックス内に納まります。

【新着記事一覧ページの作成方法】横2列にすると横幅が広がって文字がボックス内に納まる!-min

横2列にしても、文字がキレイにボックス内に納まりやすくなる!

.

変更の仕方はカンタン。

Content Viewsの「Display Setteings」タブの「Items Per row」で横幅の数値を調節するだけ。

例えばPC表示時、タブレット表示時に横2列で表示するには、以下の設定でOKです。

【新着記事一覧ページの作成方法】横2列で設定したい時の設定方法-min

PC表示時、タブレット表示時に横2列表示にする方法。

この方法が一番手っ取り早く出来て、ラクかもしれません。

横2列にした場合は、「Items Per Page」(1ページに表示させる記事数)を偶数に設定しておくのがオススメです!

新着記事一覧ページを作成するにあたっての注意点・知っておきたいこと

新着記事一覧ページを作成するにあたり、知っておきたいことや注意点は以下のとおりです。

新着ページを自動で取得してくれるため、一度作成すれば何もしなくてOK

Content Viewsでは、記事を公開するたびに、自動でその記事を取得してくれます。

そのため、一度設定したら基本的に放置でOK。

「記事を公開するたびに何か設定をする」といった作業は一切ありません。

サイトマップに自動で追加される

利用しているサイトマップによっては、固定ページを公開すると、自動でサイトマップに表示されます。

サイトマップは基本的にSEOに関係のないページは除外した方が良いと言われていますよね。

作成した新着記事一覧ページがサイトマップに表示されるのがイヤという場合は、サイトマップの除外設定をしておきましょう。

まとめ:新着記事一覧ページはContent Viewsを使えば簡単に作成できる!

新着記事一覧ページはContent Viewsを使うと簡単に作成できます。

Content Viewsでは該当する記事を自動で取得できるため、一度このやり方で新着記事一覧ページを作成しておくと、あとは自分で何かする必要がなくてラク。

表示方法はCSSで調整できるので、自分のブログに合ったデザインにカスタマイズできる楽しみもありますよ。

新着記事一覧ページを作成したい方はぜひ参考にしてくださいね!

以上、「新着記事の一覧ページの作り方を解説!プラグイン【Content Views】でどのテーマでも作れる!」の内容でした。

みゆもさん(@miyumo_3boysmom)、CSS適用後の情報等の提供をありがとうございました☺この場を借りて、お礼申し上げます。

Sponsored Link
\ シェアしてね! /

-ブログ

Copyright© 節約帳 , 2020 All Rights Reserved Powered by AFFINGER5.