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

固定ページの記事本文エリア

<style>
/*ページ全体*/
#content.page-forfront, #container, #entry {
	background: transparent; /* 背景色を消去 */
}
.page-forfront .entry-content {
	padding: 0;
}
.entry-content img {
	box-shadow: none;
	margin: 0;
}
.page-forfront .entry-content a {
	border-bottom: 0;
}
.cardtype {
	margin-bottom: 0;
}
.c_linkto {
	max-width: 100%;
}
.tab_item, a.more_posts {
	cursor: pointer; /*カーソル*/
}

/*アイキャッチっぽい部分*/
.top_description {
	width: calc(100% - 20px);
	text-align: center;
	font-size: .9em;
	margin: 0 auto;
}

/*ピックアップ4記事（タグ）*/
.tag_posts {
	width: calc(100% - 6px);
	margin: 0 auto 20px;
}

/*おすすめ記事の表示件数（PC）*/
.tag_posts .c_linkto {
	width: calc(25% - 12px);
	margin: 0 6px;
}/*おすすめ記事の表示件数ここまで*/

.tag_posts .c_linkto_text {
	font-size: .85em;
}

/*人気記事・新着記事の見出し*/
/*記事部分の見出しのCSSが適用されるので上書きしています*/
.entry-content h2:before, .entry-content h2:after {
	display: none
}/*疑似要素を使いたい場合はこの3行を削除してください*/

.entry-content .my_popular_posts h2, .entry-content .custom_sc h2, {
	background: 【背景色】; /*タイトル（見出し）部分の背景色*/
	color: 【文字色】; /*タイトル（見出し）の文字色*/
	font-size: 1.3em;
}

/*人気記事・新着記事*/
.my_popular_posts li, .custom_sc li {
	list-style-type: none;
}
.my_popular_posts, .custom_sc {
	display: inline-block;
	width: calc(50% - 20px);
	margin: 20px 10px 0;
	padding: 0 0 10px;
}
.my_popular_posts h2.widgettitle, .custom_sc h2.widgettitle {
	padding: 10px 20px;
	margin: 0 0 20px;
}
.my_popular_posts ul li, .custom_sc ul li {
	margin: 0 15px 0 0;
}
.my-widget li a .my-widget__text {
	padding: 0 0 0 10px;
}
.my_popular_posts li a:hover, .custom_sc li a:hover {
	background-color: #eaf4fc!important; /*記事にカーソルを乗せた時の色*/
}

/*カテゴリ別新着記事*/
.tab_posts {
	background: transparent;
	width: 100%;
	margin 0;
}

/*カテゴリ記事の表示件数（PC）*/
.tab_posts .c_linkto {
	width: calc(100%/3 - 20px);
	margin: 20px 10px 0;
}/*カテゴリ記事の表示件数ここまで*/

.tab_posts .c_linkto_text {
	font-size: .85em;
}

/*タブのスタイル*/
.tab_area {
	width: calc(100% - 20px);
	font-size: 0;
	background: #fcfcfc;/*選択されていないタブの背景色*/
	margin: 0 10px;
	border-radius: 2px;
	box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 10px -2px;
}
/*ラジオボタンを全て消す*/
input[name="tab_item"] {
	display: none;
}
/*タブ切り替えの中身*/
.tab_content {
	display: none;
	padding: 0;
	overflow: hidden;
}
/*タブにカーソルを乗せた時の挙動*/
.tab_item:hover {
	opacity: 0.75;
}

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

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


/*リンク*/
.more_cate_posts {
	width: 100%;
	margin: 20px 0 0;
}
.entry-content .more_cate_posts a.btn {
	width: calc(100%/3 - 20px); /*もっと読むリンクのボタンの大きさ*/
}
#inner-content .more_cate_posts .btn {
	margin: 0;
}
a.more_posts {
	text-align: center;
	background: #eaedf7; /*記事一覧へのリンクの背景色*/
	color: #afafaf; /*文字色*/
	margin: 0;
	padding: 10px 20px;
	display: block;
	width: 100%;
	border-radius: 2px;
}
a.more_posts:hover {
	background: #eaf4fc; /*記事一覧へのリンクにカーソルを乗せた時の背景色*/
	color: #8491c3; /*文字色*/
	border-radius: 2px;
}

/*吹出タイトル*/
.tag_posts p.fukidashi_down {
	margin: 0 50% 20px 4px;
}
.cate_new_posts p.fukidashi_down {
	margin: 0 50% 20px 10px;
}
p.fukidashi_down {
	width: calc(50% - 10px);
	padding: 10px 25px;
	text-align: center;
}
.fukidashi_down {
	position: relative;
	display: inline-block;
	min-width: 120px;
	max-width: 100%;
	color: #4d4c61; /*吹出の文字色*/
	background: #eaedf7; /*吹出の背景色*/
	border-radius: 5px;
}
.fukidashi_down:before {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -40px;
	margin-left: -20px;
	border: 20px solid transparent;
	border-top: 20px solid #eaedf7; /*吹出の背景色*/
}

/*レスポンシブ対応用*/
@media only screen and (min-width: 768px) {
	a.more_posts {
		width: calc(50% - 20px);
		margin: 0 0 20px calc(50% + 10px);
	}
}
@media only screen and (min-width:1030px) {
	.wrap, #inner-header, #inner-content {
		max-width: 1000px; /*表示エリア全体の横幅*/
	}
}
@media only screen and (max-width: 1029px) {
	.entry-content ul.my-widget {
		width: 100%;
		padding: 0 0 0 7px;
	}
	.my_popular_posts ul li, .custom_sc ul li {
		margin: 0 7px 0 0;
	}
	.tag_posts {
		width: 100%;
		margin: 0 auto;
	}

/*おすすめ記事の表示件数*/
	.tag_posts .c_linkto {
		width: calc(50% - 20px);
		margin: 0 9.5px 20px;
	}
/*おすすめ記事の表示件数ここまで*/

/*カテゴリ別最新記事の表示件数*/
	.tab_posts .c_linkto {
		width: calc(50% - 20px);
		margin: 20px 9.5px 0;
	}
/*カテゴリ別最新記事の表示件数ここまで*/

	.my_popular_posts, .custom_sc {
		margin: 20px 9.5px 0;
	}
	.tag_posts p.fukidashi_down {
		margin: 20px 10px 25px;
		width: calc(100% - 20px);
	}
}
@media only screen and (max-width: 480px) {
	.top_description, .head_intro, .thor, .tag_posts .c_linkto, .tab_area, .tab_posts .c_linkto, .my_popular_posts, .custom_sc, p.fukidashi_down, .tag_posts p.fukidashi_down, .entry-content .more_cate_posts a.btn {
		width: 100%;
	}
	.tab_area {
		margin: 10px 0;
	}

/*タブ数を増やした時に変更するエリア*/
	.tab_item {
		width: calc(100%/2);
	}
	#tab1.tab_item, #tab2.tab_item {
		border-bottom: 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_3:checked~.tab_area #tab3 {
		border-radius: 0 0 3px 0;
	}
	#tab_4:checked~.tab_area #tab4 {
		border-radius: 0 0 0 3px
	}
/*タブ数を増やした時に変更するエリアここまで*/

/*表示件数を変更する時に追記するエリア*/
	.tab_posts .c_linkto {
		margin: 20px 9.5px 10px;
	}
	.tag_posts .c_linkto {
		margin: 10px 9.5px 20px;
	}
/*表示件数を変更する時に追記するエリアここまで*/
	.cate_new_posts p.fukidashi_down, .tag_posts p.fukidashi_down {
		margin: 30px auto 20px;
	}
	p.fukidashi_down {
		padding: 10px 5px;
	}
	a.more_posts {
		margin: 0 0 20px;
	}
	.more_cate_posts {
		margin: 10px 0 20px;
	}
	.my_popular_posts, .custom_sc {
		margin: 20px 0 0;
	}
}
</style>