カテゴリ一覧から記事を探す

コピペでOK!関連記事を2列以上でタイル状に表示する方法

関連記事を2列でタイル状に表示させる

WordPressでブログをやっているけど、関連記事を画像付きで綺麗に2列以上で表示したい!

という方におすすめできる記事になっています。

コピペで簡単に変更可能です!

関連記事を2列以上にし、デザインを見やすくきれいにすることで1画面でより多くの記事が目につくので、回遊率も上がります。

1.関連記事をタイル形式で2列にしたときの完成品

まずは完成品からお見せします。

実装できると、以下の画像のような形で表示できます。

関連記事をタイル化

PCだとこんな感じ。(右上はマウスホバー中)

関連記事をタイル化

スマホだとこんな感じ。

特に大きな差はありませんが、スマホのときは一つ一つをより小さくして2列表示できるようにしています。

タイル1つ1つの幅を各自で指定してもっと小さくしてもらえば、3列表示とかも可能になります。

2.関連記事をタイル化するためのHTML

まずはHTMLからいじっていきます。

関連記事を表示させるための場所(私の場合kanren.php)をいじっていきます。

表示したい記事数の指定が難しく書かれている後の部分を以下のHTMLに変更します。

最初にあるdivタグが関連記事内を囲っている要素になります。

kanren.php
<div class="random">
	<?php
	if ( $st_query->have_posts() ): ?>
	
		<?php
		while ( $st_query->have_posts() ) : $st_query->the_post(); ?>

<ul class="clearfix">
 <li><a href="<?php the_permalink() ?>">
 <?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?>
 <?php the_post_thumbnail( 'medium' ); ?>
 <?php else: // サムネイルを持っていないときの処理 ?>
 <img src="<?php echo get_template_directory_uri(); ?>/images/no-img.png" alt="no image" title="no image" width="100" height="100" />
 <?php endif; ?>
	 <p><?php the_title(); ?></p>
 </a></li>
</ul>

 <?php endwhile; ?>
<?php else: ?>
 <p>関連記事はありませんでした</p>
	<?php endif; ?>
	<?php wp_reset_postdata(); ?>
</div>

なにをしているかというと、以下の画像のようなhtml構成にしています。

関連記事のHTML

灰色:<div class=”random”>の部分
白色:aタグ(記事へのリンク)
画像:imgタグ(記事のサムネイル)
タイトル:pタグ

これらをulタグとliタグを使って列表示させている感じですね。

意味が分からなければHTMLの記事をみることを推奨します。

3.関連記事を2列以上でタイル化するためのCSS

つぎにCSSを設定して終わりです。

以下のCSSになります。

CSS
/*-- 関連記事エリア --*/
.random {
  padding: 0px;
  margin: 0px;
  text-align: center;/*記事エリアを中央揃え*/
}

.random a{
  transition: all ease-in-out .3s;
  display: block;
  text-decoration: none;
  background-color: #fff;
  border: 1px solid #F1F2F4;
  box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
  width: 230px;/*各自で調節してもOK*/
  height: 210px;/*各自で調節してもOK*/
  padding: 10px;
  border-radius: 5px;
  overflow: hidden;
}

.random a:hover{
  cursor: pointer;
  box-shadow: 0 10px 20px -5px rgba(0,0,0,0.2);
  -moz-transform: translateY(-2px);
  -webkit-transform: translateY(-2px);
  transform: translateY(-2px);
}
 
.random ul {
  padding: 0px;
  margin: 0px;
  display: inline-block;/*横並びでブロック配置*/
}
 
.random li {
  float: left;
  position: relative;
  list-style: none;
}
 
.random li:last-child {/*記事の間隔*/
  margin-right: 10px;
  margin-bottom: 5px;
  margin-top: 5px;
}
 
.random li p{/*記事タイトル*/
  width: 90%;
  font-size: 1rem;
  font-weight: bold;
  line-height: 1.4em;
  text-align: left;
  padding-bottom: 0;
  margin-top: 0.5em;
  margin-left: 5%;
  color: #494949;
  /*タイトルを3行しか表示させないためのCSS*/
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
}
 
.random li img{/*アイキャッチ画像*/
  width: 100%;/*画像幅*/
  height: 130px;/*画像の高さ*/
}

@media only screen and (max-width: 550px) {/*スマホ用*/
.random a{
  width: 130px;
  height: 120px;
}
.random li img{/*アイキャッチ画像*/
  width: 100%;/*画像幅*/
  height: 80px;/*画像の高さ*/
}
.random li p{/*記事タイトル*/
  font-size: 10px;
}
}

これで完成です。

各自で調節したほうがいい場所もあると思いますので、その辺りを説明します。

スマホへの対応について

私の場合、@media only screen and (max-width: 550px) {・・・で画面横幅が550px以下になれば画像やタイトルを小さくして、2列にできるようにしています。

しかし、あなたのサイトの関連記事の幅・画面の横幅次第では関連記事が1列で表示されてしまう可能性もあります。

そのため、ここの550pxについては各自で調節が必要かと思います。

確認方法は、デベロッパーツールを開けば1px単位の横幅で確認可能です!

関連記事を3列で表示させたい

関連記事を3列以上で表示させたい!という場合は、aタグのwidthとheightを各自で調節しましょう。

それに従って画像の高さやタイトルの大きさも変えたほうがいいかと思います。

以下の部分のCSSを調節すればOKでしょう。

CSS
.random a{
  width: 230px;/*各自で調節してもいいかも*/
  height: 210px;/*各自で調節してもいいかも*/
}
 
.random li p{/*記事タイトル*/
  font-size: 1rem;
}
 
.random li img{/*アイキャッチ画像*/
  width: 100%;/*画像幅*/
  height: 130px;/*画像の高さ*/
}

@media only screen and (max-width: 550px) {/*スマホ用*/
.random a{
  width: 130px;
  height: 120px;
}
.random li img{/*アイキャッチ画像*/
  height: 80px;/*画像の高さ*/
}
.random li p{/*記事タイトル*/
  font-size: 10px;
}
}

各自でこの辺りをいじり、幅が小さくなれば自動で3列にも4列にもなります。

4.まとめ

今回は、関連記事のデザインを書き換える方法について書きました。

アイキャッチ画像のサイズによっては多少引き延ばされたりとか、私のいつも設定する画像サイズでは変に見える!ということもあるかもしれませんので、適宜調節してみてください。

ブログのデザインをいじるのが面白くて他にも色々していますので、よかったらぜひ。