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

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

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

タイトルを入力します。

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

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

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

step
3Display Setteingsを設定

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

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

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

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

こちらをコピーします。

/*カード風記事（カード全体）*/

.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;
}

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

.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に「/*記事タイトルの文字の大きさ*/」という記述があります。

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

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

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

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

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

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

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

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

.

変更の仕方はカンタン。

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

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

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

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