【SANGO】トップページのカスタマイズで記事やタブの表示件数を変更する方法

SHARE

当サイトで紹介している「トップページのカスタマイズ」の関連記事です。
おすすめ記事・カテゴリ別最新記事・タブの表示件数を変更する方法を説明しています。この記事のソースコードのみを記述しても動作しませんのでご注意ください。

おすすめ記事・カテゴリ別最新記事

表示件数を変更する

トップページに表示されるおすすめ記事・カテゴリ別最新記事の表示件数を変更するには、HTML 部分を編集します。
コメントを参考に、タグID、カテゴリID を記入した行を探してください。ID の後にある「num="〇"」という部分の数字が表示件数になります。

1列に表示される件数を変更する

デフォルトのデザインだと、おすすめ記事の表示件数は4記事で、PC：4記事×1列、タブレット：2記事×2列、モバイル：1記事×4列、という配置。
カテゴリ記事の方は、各カテゴリ6記事ずつの表示で、PC：3記事×2列、タブレット：2記事×3列、モバイル：1記事×6列となっています。

これらを変更するには、まずソースコードの中の「おすすめ記事の表示件数」「カテゴリ別最新記事の表示件数」というコメントがついている部分を探してください。上の方と下の方に2ヶ所あります。
この中の「width:calc(〇〇 - 20px) 」という行を変更していきます。

PC・タブレットで1列に表示する記事数

コメントに（PC）と入っている方がPCからの表示、下の方の「レスポンシブ対応用」というコメントの後にあるものがタブレットからの表示になります。
変更の仕方はおすすめ記事もカテゴリ記事も同じです。このCSSで記事カードの横の長さを指定しているので、表示したい記事数が横に並ぶようにパーセンテージで指定してあげるだけです。

5記事width:calc(20% -20px);
4記事width:calc(25% - 20px);
3記事width:calc(100%/3 - 20px);
2記事width:calc(50% - 20px);
1記事width:calc(100% - 20px);

モバイルで1列に表示する記事数

モバイルで表示される記事数は、デフォルトではどちらも1列1記事です。
これを変更したい場合は、CSSの下の方にあるメディアクエリの「@media only screen and (max-width: 480px) 」という部分を探してください

そのすぐ下にクラス名がたくさん書かれた行がありますので、おすすめ記事の方を変更する場合は「.tag_posts .c_linkto,」、カテゴリ別最新記事の方を変更する場合は「.tab_posts .c_linkto,」というクラス名を削除します。

そして少し下の「表示件数を変更する時に追記するエリア」というコメントが入っている部分を、以下のように書き換えてください。
おすすめ記事を変更する場合は「tag_posts」で始まる方、カテゴリ記事を変更する場合は「tab_posts」で始まる方を書き換えます。

おすすめ記事を1列に2記事表示する場合

css

.tag_posts .c_linkto{
width:calc(50% - 5px);
}
.tag_posts .c_linkto_text{
font-size:.8em;
padding: 10px;
}
.tag_posts .c_linkto:nth-child(odd){
margin:5px 5px 10px 0;
}
.tag_posts .c_linkto:nth-child(even){
margin:5px 0 10px 5px
}

カテゴリ別記事を1列に2記事表示する場合

css

.tab_posts .c_linkto{
width:calc(50% - 5px);
}
.tab_posts .c_linkto_text{
font-size:.8em;
padding: 10px;
}
.tab_posts .c_linkto:nth-child(odd){
margin:10px 5px 5px 0;
}
.tab_posts .c_linkto:nth-child(even){
margin:10px 0 5px 5px
}

両方とも変更する場合はこんな風にまとめてもOK

css

.tag_posts .c_linkto, .tab_posts .c_linkto{
width:calc(50% - 5px);
}
.tag_posts .c_linkto_text, .tab_posts .c_linkto_text{
font-size:.8em;
padding: 10px;
}
.tag_posts .c_linkto:nth-child(odd){
margin:5px 5px 10px 0;
}
.tag_posts .c_linkto:nth-child(even){
margin:5px 0 10px 5px
}
.tab_posts .c_linkto:nth-child(odd){
margin:10px 5px 5px 0;
}
.tab_posts .c_linkto:nth-child(even){
margin:10px 0 5px 5px
}

カテゴリタブの数を変更する場合

HTML部分

カテゴリタブを増減したい場合は、まず HTML の「タブ」とコメントが入っている所を探してください。
各タブはコメントの上の「input」と表示するタブ「label」、それからタブの中身の div で囲まれている部分、の3つがセットになっています。

タブの表示数を変更したい時は、この3つのパーツをセットとして、お好みの数だけ増減してください。

例えばタブを3つに減らしたい場合は、以下の3つの部分を全て削除します。

html

<input id="tab_4" type="radio" name="tab_item">
略
<label id="tab4"class="tab_item" for="tab_4">【タブ４】</label><!-- タブ４タイトル -->
略
<!-- タブ４をクリックした時に表示される記事 -->
<div class="tab_content" id="tab4_content">
<div class="cardtype cf">
[catpost catid="【カテゴリID】" num="6" type="card"]
<div class="more_cate_posts center">
[btn href="【カテゴリページのURL】" class="raised main-bc strong rippler rippler-default"]
<i class="fa fa-mortar-board"></i> もっと読む[/btn]
</div>
</div>
</div>

逆にタブの数を増やしたい時は「tab4」「tab_4」となっている数字の部分を「tab5」「tab_5」、「tab6」「tab_6」というように変更しながら、各パーツの最後尾に好きな数だけ増やしていきます。

CSS部分

次にCSSを編集します。変更箇所は2ヶ所。

まず最初はPCでの表示数。「タブの見た目ここから」とコメントが入っている部分を変更していきます。変更するのは「width」と「border」の部分です。

もう1つはCSSの下の方、メディアクエリの所にある「タブ数を増やした時に変更するエリア」という部分。こちらはモバイルから見た時のタブのスタイルを指定しています。

3×2列＝6個のタブを表示させる場合

css

/*タブの見た目ここから*/
.tab_item {
	width: calc(100%/3); /*タブの大きさ*/
	height: 40px;
	line-height: 40px;
	font-size: 15px;
	text-align: center;
	color: #565656; /*タブの文字色*/
	display: inline-block;
	text-align: center;
	font-weight: bold;
	transition: all 0.2s ease;
}
#tab1.tab_item, #tab2.tab_item{
	border-right:1px solid #eaeaea;
	border-bottom:1px solid #eaeaea;
}
#tab3.tab_item{
	border-bottom:1px solid #eaeaea;
}
#tab4.tab_item, #tab5.tab_item{
	border-right:1px solid #eaeaea;
}

/*選択されているタブのコンテンツのみを表示*/
#tab_1:checked~#tab1_content, #tab_2:checked~#tab2_content, #tab_3:checked~#tab3_content, #tab_4:checked~#tab4_content, #tab_5:checked~#tab5_content, #tab_6:checked~#tab6_content {
	display: block;
}
#tab_1:checked~.tab_area #tab1 {
	border-radius: 3px 0 0 0; /*左上タブの左上角を丸く*/
}
#tab_3:checked~.tab_area #tab4 {
	border-radius: 0 3px 0 0 /*右上タブの右上角を丸く*/
}
#tab_4:checked~.tab_area #tab1 {
	border-radius: 0 0 0 3px; /*左下タブの左下角を丸く*/
}
#tab_6:checked~.tab_area #tab4 {
	border-radius: 0 0 3px 0 /*右下タブの右下角を丸く*/
}
#tab_1:checked~.tab_area #tab1, #tab_2:checked~.tab_area #tab2, #tab_3:checked~.tab_area #tab3, #tab_4:checked~.tab_area #tab4, #tab_5:checked~.tab_area #tab5, #tab_6:checked~.tab_area #tab6{
	background: 【背景色】; /*選択されているタブの背景色*/
	color: 【文字色】; /*文字色*/
}
/*タブの見た目ここまで*/

css

/*タブ数を増やした時に変更するエリア*/
	.tab_item {
		width: calc(100%/2);
		height:40px;
		line-height:40px;
		font-size:15px;
	}
	#tab1.tab_item, #tab2.tab_item, #tab3.tab_item, #tab4.tab_item{
		border-bottom: 1px solid #eaeaea;
	}
	#tab3.tab_item{
		border-right: 1px solid #eaeaea;
	}
	#tab_1:checked~.tab_area #tab1 {
		border-radius: 3px 0 0 0;
	}
	#tab_2:checked~.tab_area #tab2 {
		border-radius: 0 3px 0 0;
	}
	#tab_5:checked~.tab_area #tab3 {
		border-radius: 0 0 3px 0;
	}
	#tab_6:checked~.tab_area #tab4 {
		border-radius: 0 0 0 3px
	}
/*タブ数を増やした時に変更するエリアここまで*/

4×2列＝8個のタブを表示させる場合

css

/*タブの見た目ここから*/
.tab_item {
	width: calc(100%/4); /*タブの大きさ*/
	height: 40px;
	line-height: 40px;
	font-size: 15px;
	text-align: center;
	color: #565656; /*タブの文字色*/
	display: inline-block;
	text-align: center;
	font-weight: bold;
	transition: all 0.2s ease;
}
#tab1.tab_item, #tab2.tab_item, #tab3.tab_item{
	border-right:1px solid #eaeaea;
	border-bottom:1px solid #eaeaea;
}
#tab4.tab_item{
	border-bottom:1px solid #eaeaea;
}
#tab5.tab_item, #tab6.tab_item, #tab7.tab_item{
	border-right:1px solid #eaeaea;
}

/*選択されているタブのコンテンツのみを表示*/
#tab_1:checked~#tab1_content, #tab_2:checked~#tab2_content, #tab_3:checked~#tab3_content, #tab_4:checked~#tab4_content, #tab_5:checked~#tab5_content, #tab_6:checked~#tab6_content, #tab_7:checked~#tab7_content, #tab_8:checked~#tab8_content {
	display: block;
}
#tab_1:checked~.tab_area #tab1 {
	border-radius: 3px 0 0 0; /*左上タブの左上角を丸く*/
}
#tab_4:checked~.tab_area #tab4 {
	border-radius: 0 3px 0 0 /*右上タブの右上角を丸く*/
}
#tab_5:checked~.tab_area #tab1 {
	border-radius: 0 0 0 3px; /*左下タブの左下角を丸く*/
}
#tab_8:checked~.tab_area #tab4 {
	border-radius: 0 0 3px 0 /*右下タブの右下角を丸く*/
}
#tab_1:checked~.tab_area #tab1, #tab_2:checked~.tab_area #tab2, #tab_3:checked~.tab_area #tab3, #tab_4:checked~.tab_area #tab4, #tab_5:checked~.tab_area #tab5, #tab_6:checked~.tab_area #tab6, #tab_7:checked~.tab_area #tab7, #tab_8:checked~.tab_area #tab8 {
	background: 【背景色】; /*選択されているタブの背景色*/
	color: 【文字色】; /*文字色*/
}
/*タブの見た目ここまで*/

css

/*タブ数を増やした時に変更するエリア*/
	.tab_item {
		width: calc(100%/2);
		height:40px;
		line-height:40px;
		font-size:15px;
	}
	#tab5.tab_item, #tab6.tab_item {
		border-bottom: 1px solid #eaeaea;
	}
	#tab7.tab_item{
		border-right: 1px solid #eaeaea;
	}
	#tab2.tab_item, #tab6.tab_item{
		border-right: none;
	}
	#tab_1:checked~.tab_area #tab1 {
		border-radius: 3px 0 0 0;
	}
	#tab_2:checked~.tab_area #tab2 {
		border-radius: 0 3px 0 0;
	}
	#tab_7:checked~.tab_area #tab3 {
		border-radius: 0 0 3px 0;
	}
	#tab_8:checked~.tab_area #tab4 {
		border-radius: 0 0 0 3px
	}
/*タブ数を増やした時に変更するエリアここまで*/

タブを2個に減らす場合

css

/*タブの見た目ここから*/
.tab_item {
	width: 50%; /*タブの大きさ*/
	height: 50px;
	line-height: 50px;
	font-size: 16px;
	text-align: center;
	color: #565656; /*タブの文字色*/
	display: inline-block;
	text-align: center;
	font-weight: bold;
	transition: all 0.2s ease;
}
#tab1.tab_item{
	border-right:1px solid #eaeaea;
}

/*選択されているタブのコンテンツのみを表示*/
#tab_1:checked~#tab1_content, #tab_2:checked~#tab2_content{
	display: block;
}
#tab_1:checked~.tab_area #tab1 {
	border-radius: 3px 0 0 3px; /*左タブの左側角を丸く*/
}
#tab_2:checked~.tab_area #tab4 {
	border-radius: 0 3px 3px 0 /*右タブの右側角を丸く*/
}
#tab_1:checked~.tab_area #tab1, #tab_2:checked~.tab_area #tab2{
	background: 【背景色】; /*選択されているタブの背景色*/
	color: 【文字色】; /*文字色*/
}
/*タブの見た目ここまで*/

css

/*タブ数を増やした時に変更するエリア*/
	.tab_item {
		width: 50%);
		height:50px;
		line-height:50px;
		font-size:15px;
	}
/*タブ数を増やした時に変更するエリアここまで*/

前の記事

【SANGO】トップページのカスタマイズ（詳細版）

次の記事

【SANGO】人気記事・最新記事を出力するトップページ用テンプ…