【WordPress】サムネイル付きカテゴリ別新着記事をトップページに表示する〜マテリアル編

time 2016/01/16 　所要時間:約 2 分

folder WordPress

【WordPress】サムネイル付きカテゴリ別新着記事をトップページに表示する〜マテリアル編

1 元々の要望は、部長ナビのページ
2 「loop.php」を編集する
3 モバイルでは表示しない設定
4 style.cssへ追記

こんにちは。ちゃぼPです。

このサイトでは、WordPressテーマ「マテリアル」を使用しています。

先日より、トップページのデザインが大きく変わっていますが、カテゴリ別のサムネイル付き新着記事を三つ並べてみました。

先に最新の記事を大きく表示するようにしたのですが、

【WordPress】マテリアルのトップページで最新記事を大きく表示してみたぞ | 風の羅針盤 | Destination of winds.

こんにちは。

このサイトではNobuoさん制作の「マテリアル」をテーマとして使用しています。

http://wp-material.net/

こういうパネル調のデザインのテーマって、…

風の羅針盤 | Destination of winds.

カテゴリ別は、目立たせたいカテゴリだけをピックアップして目立たせることを目的としました。

今日はその方法をご紹介します！

元々の要望は、部長ナビのページ

私ちゃぼPは、昨年末に部長ナビさんから「カテゴリ別の新着記事を表示したいんだよねー」と要望を貰いまして、いろいろと調べながらの作業でした。

【DIY】トップページにサムネ付きカテゴリ別新着記事を実装する・・・作業中（笑） | 風の羅針盤 | Destination of winds.

こんにちは。chaboです。

なんか朝から左目が痛くて、涙が出ます。日曜治らなかったら眼科に行こうかな。

パソコンの見過ぎかもしれないですね・・
現在鋭意作業中！
部長ナビさんのスタッ…

風の羅針盤 | Destination of winds.

部長ナビのページはカテゴリーが多いので、６個のカテゴリーを表示するようにしています。ってか、本当は６個でも足りないくらいページ数が多いっすね。

Simplicityで「主要カテゴリ最新記事」を表示する方法

こんにちは。部長ナビ（@nabi_1080）です今日も、ちゃぼPプロデュースのSimplicityカスタマイズコードを紹介します！どうしてもやりたかった、gori.me風「主要カテゴリ最新記事一覧」gori.meでは、主要カテゴリの最新記事

部長ナビのページ

私のサイトはページ数も少ないですから、三つにしています。

「loop.php」を編集する

まず、子テーマ内に、「loop.php」が存在しない場合は、子テーマ内にファイルをコピーしてから編集しましょう。

挿入するコードは、以下のようになります。

	<?php if ($paged <= 1): ?>

		<?php if ($counter <= 1): ?><!--　最初の記事判別　-->

			<!-- 新着カテゴリ1 -->
			<div class="cat_article1">

			<?php
			    $cat = 'pc';
			    $num = '1';
			    global $post;
			 
			    $term_id = get_category_by_slug($cat)->term_id;
			    $myposts = get_posts('numberposts=' .$num. '&category_name=' .$cat);
				if ($myposts) {
					foreach($myposts as $post):
			        		setup_postdata($post);
			?>
						<a class="anchor" href="/apps/wordpress/pc">PC</a>
						<a class="thumbnail" href="<?php the_permalink() ?>">
						<div class="cat_article_thumb">
							<?php if(has_post_thumbnail()){ ?>
								<?php $title= get_the_title(); the_post_thumbnail(array(640, 480), array( 'alt' =>$title, 'title' => $title)); ?>

							<?php }else{ ?>
						               <i class="ico-camera-alt"></i>
							<?php } ?>
							<p class="postcat1">最新記事</p>
							<span class="cat_text_area"><?php the_title(); ?></span>
							<span class="cat-update"><span class="lsf">time </span><?php the_time('Y/m/d') ?></span>
						</div>
						</a>
			<?php
					endforeach;
			?>
				<?php }else{ ?>
				    <p>記事がありません</p>
				<?php } ?>
			</div>

			<!-- 新着カテゴリ2 -->
			<div class="cat_article2">

			<?php
			    $cat = 'iphone';
			    $num = '1';
			    global $post;
			 
			    $term_id = get_category_by_slug($cat)->term_id;
			    $myposts = get_posts('numberposts=' .$num. '&category_name=' .$cat);
				if ($myposts) {
					foreach($myposts as $post):
			        		setup_postdata($post);
			?>
						<a class="anchor" href="/apps/wordpress/iphone">iPhone</a>
						<a class="thumbnail" href="<?php the_permalink() ?>">
						<div class="cat_article_thumb">
							<?php if(has_post_thumbnail()){ ?>
								<?php $title= get_the_title(); the_post_thumbnail(array(640, 480), array( 'alt' =>$title, 'title' => $title)); ?>
							<?php }else{ ?>
						               <i class="ico-camera-alt"></i>
							<?php } ?>
							<p class="postcat1">最新記事</p>
							<span class="cat_text_area"><?php the_title(); ?></span>
							<span class="cat-update"><span class="lsf">time </span><?php the_time('Y/m/d') ?></span>
						</div>
						</a>
			<?php
					endforeach;
			?>
				<?php }else{ ?>
				    <p>記事がありません</p>
				<?php } ?>
			</div>

			<!-- 新着カテゴリ3 -->
			<div class="cat_article3">

			<?php
			    $cat = 'wordpress';
			    $num = '1';
			    global $post;
			 
			    $term_id = get_category_by_slug($cat)->term_id;
			    $myposts = get_posts('numberposts=' .$num. '&category_name=' .$cat);
				if ($myposts) {
					foreach($myposts as $post):
			        		setup_postdata($post);
			?>
						<a class="anchor" href="/apps/wordpress/wordpress">WordPress</a>
						<a class="thumbnail" href="<?php the_permalink() ?>">
						<div class="cat_article_thumb">
							<?php if(has_post_thumbnail()){ ?>
								<?php $title= get_the_title(); the_post_thumbnail('large', array( 'alt' =>$title, 'title' => $title)); ?>
							<?php }else{ ?>
						               <i class="ico-camera-alt"></i>
							<?php } ?>
							<p class="postcat1">最新記事</p>
							<span class="cat_text_area"><?php the_title(); ?></span>
							<span class="cat-update"><span class="lsf">time </span><?php the_time('Y/m/d') ?></span>
						</div>
						</a>
			<?php
					endforeach;
			?>
				<?php }else{ ?>
				    <p>記事がありません</p>
				<?php } ?>
			</div>
			
		<?php else:?>

			<?php if($count == $row_new*3+1 && !is_paged() && is_home()){ echo "<div class='hide'>"; } ?>
			<div class="post<?php if($count%2==0){echo ' col-2';} if($count%3==0){echo ' col-3';} ?>">
			<div class="thumb-box sub-color-background">

			<?php if(has_post_thumbnail()){ ?>
				<a href="<?php the_permalink() ?>">
				<?php $title= get_the_title(); the_post_thumbnail(array(400, 400), array( 'alt' =>$title, 'title' => $title)); ?>
				</a>
			<?php }else{ ?>
				<a href="<?php the_permalink() ?>" class="no-deco">
				<div class="no-thumbnail"><p>No thumbnail</p></div>
				</a>
			<?php } ?>

			</div><!-- .thumb-box -->
			<div class="post-info">
			<p class="up-date"><span class="lsf">time </span><?php
	the_time('Y/m/d') ?></p>
			<?php
			$days = 3;
			$today = date_i18n('U');
			$entry = get_the_modified_date('U');
			$news = date('U',($today - $entry)) / 86400 ;
			if( $days > $news ){ print '<p style="text-align: right;"><span class="back-red" style="color: #ffffff;">New!</span></p>'; }
			?>
			<h3 class="post-title"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3>
			<?php get_template_part("sns_count") ?>
			<p class="cat-link"><span class="lsf cat-folder">folder </span><?php the_category(' ') ?></p>
			</div><!-- .post-info -->
			</div><!-- .post -->
			<?php
			if($count==6){ ?>

			<?php }
			if($count%2==0){echo "<div class='clear2'></div>";}
			if($count%3==0){echo "<div class='clear3'></div>";}
			$count++;
			?>

		<?php endif;?><!--　/最初の記事判別　-->
		
	<?php else:?>

		<?php if($count == $row_new*3+1 && !is_paged() && is_home()){ echo "<div class='hide'>"; } ?>
		<div class="post<?php if($count%2==0){echo ' col-2';} if($count%3==0){echo ' col-3';} ?>">
		<div class="thumb-box sub-color-background">

		<?php if(has_post_thumbnail()){ ?>
			<a href="<?php the_permalink() ?>">
			<?php $title= get_the_title(); the_post_thumbnail(array(400, 400), array( 'alt' =>$title, 'title' => $title)); ?>
			</a>
		<?php }else{ ?>
			<a href="<?php the_permalink() ?>" class="no-deco">
			<div class="no-thumbnail"><p>No thumbnail</p></div>
			</a>
		<?php } ?>

		</div><!-- .thumb-box -->
		<div class="post-info">
		<p class="up-date"><span class="lsf">time </span><?php
the_time('Y/m/d') ?></p>
		<?php
		$days = 3;
		$today = date_i18n('U');
		$entry = get_the_modified_date('U');
		$news = date('U',($today - $entry)) / 86400 ;
		if( $days > $news ){ print '<p style="text-align: right;"><span class="back-red" style="color: #ffffff;">New!</span></p>'; }
		?>
		<h3 class="post-title"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3>
		<?php get_template_part("sns_count") ?>
		<p class="cat-link"><span class="lsf cat-folder">folder </span><?php the_category(' ') ?></p>
		</div><!-- .post-info -->
		</div><!-- .post -->
		<?php
		if($count==6){ ?>

		<?php }
		if($count%2==0){echo "<div class='clear2'></div>";}
		if($count%3==0){echo "<div class='clear3'></div>";}
		$count++;
		?>

	<?php endif; ?>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

<?php if ($paged <= 1): ?>

<?php if ($counter <= 1): ?>

<?php

$cat = 'pc';

$num = '1';

global $post;

$term_id = get_category_by_slug($cat)->term_id;

$myposts = get_posts('numberposts=' .$num. '&category_name=' .$cat);

if ($myposts) {

foreach($myposts as $post):

setup_postdata($post);

<?php if(has_post_thumbnail()){ ?>

<?php $title= get_the_title(); the_post_thumbnail(array(640, 480), array( 'alt' =>$title, 'title' => $title)); ?>

<?php }else{ ?>

<?php } ?>

</div>

</a>

<?php

endforeach;

<?php }else{ ?>

<p>記事がありません</p>

<?php } ?>

</div>

<?php

$cat = 'iphone';

$num = '1';

global $post;

$term_id = get_category_by_slug($cat)->term_id;

$myposts = get_posts('numberposts=' .$num. '&category_name=' .$cat);

if ($myposts) {

foreach($myposts as $post):

setup_postdata($post);

<a class="anchor" href="/apps/wordpress/iphone">iPhone</a>

<?php if(has_post_thumbnail()){ ?>

<?php $title= get_the_title(); the_post_thumbnail(array(640, 480), array( 'alt' =>$title, 'title' => $title)); ?>

<?php }else{ ?>

<?php } ?>

</div>

</a>

<?php

endforeach;

<?php }else{ ?>

<p>記事がありません</p>

<?php } ?>

</div>

<?php

$cat = 'wordpress';

$num = '1';

global $post;

$term_id = get_category_by_slug($cat)->term_id;

$myposts = get_posts('numberposts=' .$num. '&category_name=' .$cat);

if ($myposts) {

foreach($myposts as $post):

setup_postdata($post);

<a class="anchor" href="/apps/wordpress/wordpress">WordPress</a>

<?php if(has_post_thumbnail()){ ?>

<?php $title= get_the_title(); the_post_thumbnail('large', array( 'alt' =>$title, 'title' => $title)); ?>

<?php }else{ ?>

<?php } ?>

</div>

</a>

<?php

endforeach;

<?php }else{ ?>

<p>記事がありません</p>

<?php } ?>

</div>

<?php else:?>

<?php if($count == $row_new*3+1 && !is_paged() && is_home()){ echo "<div class='hide'>"; } ?>

<?php if(has_post_thumbnail()){ ?>

<?php $title= get_the_title(); the_post_thumbnail(array(400, 400), array( 'alt' =>$title, 'title' => $title)); ?>

</a>

<?php }else{ ?>

<a href="<?php the_permalink() ?>" class="no-deco">

<div class="no-thumbnail"><p>No thumbnail</p></div>

</a>

<?php } ?>

</div>

<p class="up-date"><span class="lsf">time </span><?php

the_time('Y/m/d') ?></p>

<?php

$days = 3;

$today = date_i18n('U');

$entry = get_the_modified_date('U');

$news = date('U',($today - $entry)) / 86400 ;

if( $days > $news ){ print '<p style="text-align: right;"><span class="back-red" style="color: #ffffff;">New!</span></p>'; }

<?php get_template_part("sns_count") ?>

<p class="cat-link"><span class="lsf cat-folder">folder </span><?php the_category(' ') ?></p>

</div>

</div>

<?php

if($count==6){ ?>

<?php }

if($count%2==0){echo "<div class='clear2'></div>";}

if($count%3==0){echo "<div class='clear3'></div>";}

$count++;

<?php endif;?>

<?php else:?>

<?php if($count == $row_new*3+1 && !is_paged() && is_home()){ echo "<div class='hide'>"; } ?>

<?php if(has_post_thumbnail()){ ?>

<?php $title= get_the_title(); the_post_thumbnail(array(400, 400), array( 'alt' =>$title, 'title' => $title)); ?>

</a>

<?php }else{ ?>

<a href="<?php the_permalink() ?>" class="no-deco">

<div class="no-thumbnail"><p>No thumbnail</p></div>

</a>

<?php } ?>

</div>

<p class="up-date"><span class="lsf">time </span><?php

the_time('Y/m/d') ?></p>

<?php

$days = 3;

$today = date_i18n('U');

$entry = get_the_modified_date('U');

$news = date('U',($today - $entry)) / 86400 ;

if( $days > $news ){ print '<p style="text-align: right;"><span class="back-red" style="color: #ffffff;">New!</span></p>'; }

<?php get_template_part("sns_count") ?>

<p class="cat-link"><span class="lsf cat-folder">folder </span><?php the_category(' ') ?></p>

</div>

</div>

<?php

if($count==6){ ?>

<?php }

if($count%2==0){echo "<div class='clear2'></div>";}

if($count%3==0){echo "<div class='clear3'></div>";}

$count++;

<?php endif; ?>

上の図のように、

カテゴリスラッグ名
カテゴリトップのURL
カテゴリ表示名

を自分のサイトに合うように変更します。

スラッグ名は、「投稿」–「カテゴリー」から調べられます。

なお、上記の例では、ページネーション機能によるトップページのページ送り２ページ目以降では表示させないようにしています。

１ページ目

２ページ目以降

モバイルでは表示しない設定

モバイル表示ではこのボックスは表示しないようにします。

function.phpへのモバイル定義の記述がされていない場合は、以下のページを参考に記載を行います。

【WordPress】テーマ「マテリアル」のスマホ画面をスケルトンに！ | 風の羅針盤 | Destination of winds.

WordPressのテーマを「マテリアル」に変更してしばらく経ちましたが、このテーマは見た目もすっきりしていて本当に見やすいですね。

このテーマの特徴の一つに、画面のサイズに応じて、メインカラム…

風の羅針盤 | Destination of winds.

先ほど挿入したコードを、下記の「ここに上のコードが入る」の部分に挿入します。

<?php if (is_mobile()) :?>

	<?php if($count == $row_new*3+1 && !is_paged() && is_home()){ echo "<div class='hide'>"; } ?>
	<div class="post<?php if($count%2==0){echo ' col-2';} if($count%3==0){echo ' col-3';} ?>">
	<div class="thumb-box sub-color-background">
	<?php if(has_post_thumbnail()){ ?>
		<a href="<?php the_permalink() ?>">
		<?php $title= get_the_title(); the_post_thumbnail(array(720, 480), array( 'alt' =>$title, 'title' => $title)); ?>
		</a>
	<?php }else{ ?>
		<a href="<?php the_permalink() ?>" class="no-deco">
		<div class="no-thumbnail"><p>No thumbnail</p></div>
		</a>
	<?php } ?>
	</div><!-- .thumb-box -->
	<div class="post-info">
	<p class="up-date"><span class="lsf">time </span><?php the_time('Y/m/d') ?></p>
	<?php
	$days = 3;
	$today = date_i18n('U');
	$entry = get_the_modified_date('U');
	$news = date('U',($today - $entry)) / 86400 ;
	if( $days > $news ){ print '<p style="text-align: right;"><span class="back-red" style="color: #ffffff;">New!</span></p>'; }
	?>
	<h3 class="post-title"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3>
	<?php get_template_part("sns_count") ?>
	<p class="cat-link"><span class="lsf cat-folder">folder </span><?php the_category(' ') ?></p>
	</div><!-- .post-info -->
	</div><!-- .post -->

	<?php
	if($count==6){ ?>
		
	<?php }
	if($count%2==0){echo "<div class='clear2'></div>";}
	if($count%3==0){echo "<div class='clear3'></div>";}
	$count++;
	?>

<?php else: ?>

ーーここに上のコードが入るーー

<?php endif; ?>

<?php if (is_mobile()) :?>

<?php if($count == $row_new*3+1 && !is_paged() && is_home()){ echo "<div class='hide'>"; } ?>

<?php if(has_post_thumbnail()){ ?>

<?php $title= get_the_title(); the_post_thumbnail(array(720, 480), array( 'alt' =>$title, 'title' => $title)); ?>

</a>

<?php }else{ ?>

<a href="<?php the_permalink() ?>" class="no-deco">

<div class="no-thumbnail"><p>No thumbnail</p></div>

</a>

<?php } ?>

</div>

<?php

$days = 3;

$today = date_i18n('U');

$entry = get_the_modified_date('U');

$news = date('U',($today - $entry)) / 86400 ;

if( $days > $news ){ print '<p style="text-align: right;"><span class="back-red" style="color: #ffffff;">New!</span></p>'; }

<?php get_template_part("sns_count") ?>

<p class="cat-link"><span class="lsf cat-folder">folder </span><?php the_category(' ') ?></p>

</div>

</div>

<?php

if($count==6){ ?>

<?php }

if($count%2==0){echo "<div class='clear2'></div>";}

if($count%3==0){echo "<div class='clear3'></div>";}

$count++;

<?php else: ?>

ーーここに上のコードが入るーー

<?php endif; ?>

style.cssへ追記

次にstyle.cssへの追記です。

/* 最新のカテゴリ記事
--------------------------------------------------------- */
.cat_article1 {
	margin:0 5px 20px 0px;
	float: left;
	width: 32%;
}

.cat_article2 {
	margin:0 8px 20px 8px;
	float: left;
	width: 32%;
}

.cat_article3 {
	margin:0 0px 20px 5px;
	float: left;
	width: 32%;
}

.cat_article_thumb {
	width: 100%;
	overflow: hidden;
	position: relative;
}

.cat_article1 .anchor {
  padding: 3px 5px;
  display: block;
  color: #fff;
  background: #333;
  font-size: 16px;
  text-decoration: none;
  overflow: hidden;
  *zoom: 1;
  text-align: center;
}

.cat_article1 .anchor:hover, .cat_article1 .anchor:active {
  text-decoration: underline;
}

.cat_article1 .anchor span {
  float: right;
  font-size: 9px;
  background: #fff;
  color: #333;
  padding: 5px 3px;
}

.cat_article1 .thumbnail {
  display: block;
  color: #333;
  background: #fff;
  text-decoration: none;
  line-height: 1.5;
  font-size: 16px;
  position: relative;
  overflow: hidden;
  *zoom: 1;
}

.cat_article1 .thumbnail img {
  width: 100%;
  height: 150px;
  display: block;
}

.cat_article1 .thumbnail:hover {
  color: #e22f26;
  background: #ffffea;
}

.cat_article1 .thumbnail:hover img {
  opacity: 0.7;
  filter: alpha(opacity=70);
}

.cat_article1 .thumbnail .title {
  padding: 3px;
  height: 70px;
}

.cat_article2 .anchor {
  padding: 3px 5px;
  display: block;
  color: #fff;
  background: #333;
  font-size: 16px;
  text-decoration: none;
  overflow: hidden;
  *zoom: 1;
  text-align: center;
}

.cat_article2 .anchor:hover, .cat_article2 .anchor:active {
  text-decoration: underline;
}

.cat_article2 .anchor span {
  float: right;
  font-size: 9px;
  background: #fff;
  color: #333;
  padding: 5px 3px;
}

.cat_article2 .thumbnail {
  display: block;
  color: #333;
  background: #fff;
  text-decoration: none;
  line-height: 1.5;
  font-size: 16px;
  position: relative;
  overflow: hidden;
  *zoom: 1;
}

.cat_article2 .thumbnail img {
  width: 100%;
  height: 150px;
  display: block;
}

.cat_article2 .thumbnail:hover {
  color: #e22f26;
  background: #ffffea;
}

.cat_article2 .thumbnail:hover img {
  opacity: 0.7;
  filter: alpha(opacity=70);
}

.cat_article2 .thumbnail .title {
  padding: 3px;
  height: 70px;
}

.cat_article3 .anchor {
  padding: 3px 5px;
  display: block;
  color: #fff;
  background: #333;
  font-size: 16px;
  text-decoration: none;
  overflow: hidden;
  *zoom: 1;
  text-align: center;
}

.cat_article3 .anchor:hover, .cat_article3 .anchor:active {
  text-decoration: underline;
}

.cat_article3 .anchor span {
  float: right;
  font-size: 9px;
  background: #fff;
  color: #333;
  padding: 5px 3px;
}

.cat_article3 .thumbnail {
  display: block;
  color: #333;
  background: #fff;
  text-decoration: none;
  line-height: 1.5;
  font-size: 16px;
  position: relative;
  overflow: hidden;
  *zoom: 1;
}

.cat_article3 .thumbnail img {
  width: 100%;
  height: 150px;
  display: block;
}

.cat_article3 .thumbnail:hover {
  color: #e22f26;
  background: #ffffea;
}

.cat_article3 .thumbnail:hover img {
  opacity: 0.7;
  filter: alpha(opacity=70);
}

.cat_article3 .thumbnail .title {
  padding: 3px;
  height: 70px;
}

.cat-update{
	font-size: 0.7em;
	position:absolute;
	top:0px;
	left:0px;
	color: #fff;
	background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
}

.cat_text_area {
  padding: 4px 4px 0;
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  color: #fff;
  font-weight: bold;
  overflow: hidden;
  height: 80px;
  line-height: 20px;
  font-size: 15px;
  text-decoration: none;
  background: rgba(3,3,3,0.6);
  background: -webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,0)),to(rgba(2,2,2,1.0)));
  background: -moz-linear-gradient(top, rgba(0,0,0,0), rgba(2,2,2,1.0));
  text-shadow: 0 0 5px rgba(0,0,0,1.0);
}

.postcat1 {
	position:absolute;
	top:0px;
	right:0px;
	background-color: #EA3382;
	border:1px solid #fff;
	color: #ffffff;
	display: inline-block;
	font-size: 12px;
	line-height: 1.5;
	margin: 0;
	padding: 2px 15px 0;
}

/* ここまで

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

/* 最新のカテゴリ記事

--------------------------------------------------------- */

.cat_article1 {

margin:0 5px 20px 0px;

float: left;

width: 32%;

}

.cat_article2 {

margin:0 8px 20px 8px;

float: left;

width: 32%;

}

.cat_article3 {

margin:0 0px 20px 5px;

float: left;

width: 32%;

}

.cat_article_thumb {

width: 100%;

overflow: hidden;

position: relative;

}

.cat_article1 .anchor {

padding: 3px 5px;

display: block;

color: #fff;

background: #333;

font-size: 16px;

text-decoration: none;

overflow: hidden;

*zoom: 1;

text-align: center;

}

.cat_article1 .anchor:hover, .cat_article1 .anchor:active {

text-decoration: underline;

}

.cat_article1 .anchor span {

float: right;

font-size: 9px;

background: #fff;

color: #333;

padding: 5px 3px;

}

.cat_article1 .thumbnail {

display: block;

color: #333;

background: #fff;

text-decoration: none;

line-height: 1.5;

font-size: 16px;

position: relative;

overflow: hidden;

*zoom: 1;

}

.cat_article1 .thumbnail img {

width: 100%;

height: 150px;

display: block;

}

.cat_article1 .thumbnail:hover {

color: #e22f26;

background: #ffffea;

}

.cat_article1 .thumbnail:hover img {

opacity: 0.7;

filter: alpha(opacity=70);

}

.cat_article1 .thumbnail .title {

padding: 3px;

height: 70px;

}

.cat_article2 .anchor {

padding: 3px 5px;

display: block;

color: #fff;

background: #333;

font-size: 16px;

text-decoration: none;

overflow: hidden;

*zoom: 1;

text-align: center;

}

.cat_article2 .anchor:hover, .cat_article2 .anchor:active {

text-decoration: underline;

}

.cat_article2 .anchor span {

float: right;

font-size: 9px;

background: #fff;

color: #333;

padding: 5px 3px;

}

.cat_article2 .thumbnail {

display: block;

color: #333;

background: #fff;

text-decoration: none;

line-height: 1.5;

font-size: 16px;

position: relative;

overflow: hidden;

*zoom: 1;

}

.cat_article2 .thumbnail img {

width: 100%;

height: 150px;

display: block;

}

.cat_article2 .thumbnail:hover {

color: #e22f26;

background: #ffffea;

}

.cat_article2 .thumbnail:hover img {

opacity: 0.7;

filter: alpha(opacity=70);

}

.cat_article2 .thumbnail .title {

padding: 3px;

height: 70px;

}

.cat_article3 .anchor {

padding: 3px 5px;

display: block;

color: #fff;

background: #333;

font-size: 16px;

text-decoration: none;

overflow: hidden;

*zoom: 1;

text-align: center;

}

.cat_article3 .anchor:hover, .cat_article3 .anchor:active {

text-decoration: underline;

}

.cat_article3 .anchor span {

float: right;

font-size: 9px;

background: #fff;

color: #333;

padding: 5px 3px;

}

.cat_article3 .thumbnail {

display: block;

color: #333;

background: #fff;

text-decoration: none;

line-height: 1.5;

font-size: 16px;

position: relative;

overflow: hidden;

*zoom: 1;

}

.cat_article3 .thumbnail img {

width: 100%;

height: 150px;

display: block;

}

.cat_article3 .thumbnail:hover {

color: #e22f26;

background: #ffffea;

}

.cat_article3 .thumbnail:hover img {

opacity: 0.7;

filter: alpha(opacity=70);

}

.cat_article3 .thumbnail .title {

padding: 3px;

height: 70px;

}

.cat-update{

font-size: 0.7em;

position:absolute;

top:0px;

left:0px;

color: #fff;

background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);

}

.cat_text_area {

padding: 4px 4px 0;

position: absolute;

bottom: 0;

right: 0;

left: 0;

color: #fff;

font-weight: bold;

overflow: hidden;

height: 80px;

line-height: 20px;

font-size: 15px;

text-decoration: none;

background: rgba(3,3,3,0.6);

background: -webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,0)),to(rgba(2,2,2,1.0)));

background: -moz-linear-gradient(top, rgba(0,0,0,0), rgba(2,2,2,1.0));

text-shadow: 0 0 5px rgba(0,0,0,1.0);

}

.postcat1 {

position:absolute;

top:0px;

right:0px;

background-color: #EA3382;

border:1px solid #fff;

color: #ffffff;

display: inline-block;

font-size: 12px;

line-height: 1.5;

margin: 0;

padding: 2px 15px 0;

}

/* ここまで

これで完成です。

上記の例はマテリアルでの実装例ですが、トップページを表示するテンプレートに記載すれば、特にマテリアルだけではなく実装できると思います。

カテゴリを目立たせたい方は、試してみてくださいね！

この記事が気に入ったら
いいね！しよう

最新情報をお届けします

シェアしてくれると、ちゃぼPめっちゃよろこびます^^v

ちゃぼ

福井県在住。MacBook 12インチと機械式時計と歌をこよなく愛する新しい物好き。最近はWordPressカスタマイズにハマってます^^; [詳細]

フォローする

twitter

facebook

google

feed

line

こんにちは、鈴江です。
部長ナビさんのどころでコード使わせていただきました。
このトップページにカテゴリ新着記事表示やりたかったんです。
ありがとうございます。
鈴江

by 鈴江浩之 2016年6月5日 11:09 AM

どうぞどうぞ！
どんどん使ってやってください。でも少し色を変えるとかした方がいいかもです。
あまりに部長サイトに似てしまうので・・・

by chabo 2016年6月5日 11:56 AM

down
コメントするコメントをキャンセル

WindowsからMacへ乗り換える前に、抑えておくべき9つのこと

【レビュー】カメラだけを持って出かけるなら、Loweproショルダーバッグがおススメ

この記事の関連カテゴリ

WordPressに関する記事一覧

【WordPress】サムネイル付きカテゴリ別新着記事をトップページに表示する〜マテリアル編

【WordPress】マテリアルのトップページで最新記事を大きく表示してみたぞ | 風の羅針盤 | Destination of winds.

元々の要望は、部長ナビのページ

【DIY】トップページにサムネ付きカテゴリ別新着記事を実装する・・・作業中（笑） | 風の羅針盤 | Destination of winds.

Simplicityで「主要カテゴリ最新記事」を表示する方法

「loop.php」を編集する

モバイルでは表示しない設定

【WordPress】テーマ「マテリアル」のスマホ画面をスケルトンに！ | 風の羅針盤 | Destination of winds.

style.cssへ追記

フォローする

コメント

down
コメントするコメントをキャンセル

人気の記事

フォローする

Twitter でフォロー

プロフィール

アーカイブ

【WordPress】 サムネイル付きカテゴリ別新着記事をトップページに表示する〜マテリアル編

【WordPress】マテリアルのトップページで最新記事を大きく表示してみたぞ | 風の羅針盤 | Destination of winds.

元々の要望は、部長ナビのページ

【DIY】トップページにサムネ付きカテゴリ別新着記事を実装する・・・作業中（笑） | 風の羅針盤 | Destination of winds.

Simplicityで「主要カテゴリ最新記事」を表示する方法

「loop.php」を編集する

モバイルでは表示しない設定

【WordPress】テーマ「マテリアル」のスマホ画面をスケルトンに！ | 風の羅針盤 | Destination of winds.

style.cssへ追記

シェアする

書いている人

フォローする

コメント

downコメントする コメントをキャンセル

人気の記事

フォローする

Twitter でフォロー

プロフィール

アーカイブ

【WordPress】サムネイル付きカテゴリ別新着記事をトップページに表示する〜マテリアル編

down
コメントするコメントをキャンセル