現役エンジニアがオススメするデスク周りの商品紹介

STINGER8をカスタマイズ！記事一覧をカード形式でおしゃれに表示する方法！

6分

STINGER8をカスタマイズ！記事一覧をカード形式でおしゃれに表示する方法！

SHARE

読者の悩み

  • Stinger8を使っています。
  • トップ画面の記事一覧をカード形式にしたい！
  • コピペで簡単にできる方法を教えてください

こんな悩みに答える記事になっています。

無料テーマでも人気の高いStinger8。

シンプルな見た目のため、デザインをカスタマイズしやすく、カスタマイズしがいがあります。

今回は、そんなStinger8のトップページやカテゴリー一覧などでの記事一覧をおしゃれにしていく方法を解説します！

1.Stinger8記事一覧の完成前と完成後

初期状態では、以下のようになっています。

stinger8完成前

完成後は、以下の通りです。

maipyon

ラベルを追加して、カテゴリーごとに色を変化。サムネイルを全部（横長で）表示させて、シンプルに投稿日とタイトルだけが表示されるようにしました。

stinger8完成後

マウスホバーで少し浮き上がるようにしています。

これをするだけでも、「おっ、このサイトはなにか違うぞ」と思ってもらえますし、タイトルとアイキャッチ画像だけでシンプルなので、読み手にもわかりやすいです。

きにぶろぐさんの『STINGER8の記事一覧をおしゃれなカード型にカスタマイズする方法』を元に、自分なりにアレンジにアレンジを重ねた結果です。

私の書き方が分からなければ、きにぶろぐさんの記事も参考にしつつ、やってもらえればと思います。

2.Stinger8の記事一覧をカスタマイズする方法

さて、実際にカスタマイズしていきましょう！

変更箇所

  • itiran.php
  • style.css

変更するには、上記2つの部分をいじっていきます。

編集する箇所
外観
テーマエディター
style.css or itiran.php

まずは、itiran.phpについて変更していきます。

まず、カテゴリーと抜粋文を消す必要があります。

以下の部分を探して、コメントアウトして消しましょう。

itiran.php
<?php the_time( 'Y/m/d' ); ?> &nbsp;
<span class="pcone">
	<!-- <i class="fa fa-folder-open-o" aria-hidden="true"></i>-<?php the_category( ', ' ) ?><br/>
	<?php the_tags( '<i class="fa fa-tags"></i>&nbsp;', ', ' ); ?>
</span></p>
</div>
<div class="smanone2">
  <?php the_excerpt(); //抜粋文 ?>
</div> -->
</dd>
</dl>

上から三行目に<!--、下から三行目に-->を追加すればコメントアウトできます。

そして、この部分を以下のように書き換えましょう。

itiran.php
<div class="blog_info">
  <time class="itiran-time">
	<i class="fa fa-clock-o"></i>
	<?php the_time( 'Y/m/d' ); ?>
	&nbsp;</time>
  <h2 class="kanren-t">
    <?php the_title(); ?>
  </h2>
</div>

次に、itiran.phpの上の方にあるコードを、多少書き換えます。

itiran.php
	<div class="itiran-custom clearfix">
　<article class="clearfix">
  <a href="<?php the_permalink(); ?>">
    <?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?>

２行目についてですが、divタグだったものをarticleタグに変えたので、下側は</div>ではなく</article>にしなければなりません。

itiran.php
</article>
<?php endwhile;
	else: ?>
<p>記事がありません</p>
<?php endif; ?>
</div>

一行目のように変更しましょう。（変更場所を他の部分を参考に探してください）

画像の上にカテゴリーを重ねよう

画像の上にカテゴリー名を重ねましょう。

itiran.phpの1~2行目の部分を探し、その下に少し追加していきます。

itiran.php
<a href="<?php the_permalink(); ?>">
<?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?>

<div class="eyecatch-t">
<?php the_post_thumbnail( 'medium' ); ?>
<p class="eyecatchlabel-t <?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->slug;} ?>">
<?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->cat_name; } ?>
</p>
</div>

元々あった5行目の部分は、「thumbnail」から「medium」に変更しています。

これで、画像を正方形の小さいものから横長のサムネイルにしています。

ちなみにですが、これより下にある「サムネイルを持っていないときの処理」に関しては消さないようにしましょう！

3.Stinger8の記事一覧のCSS

デザインを整えていくCSSを変更していきましょう。

以下のものをコピペすれば簡単に利用可能です。

CSS
/*-- トップページ記事一覧エリアをカード化 --*/
.blog_info{
  display: table-cell;
  width: calc(100% - 280px);
  height: calc(100% - 12px);
  float: right;
  padding-top: 12px;
}

.itiran-time{
  text-align: left;
  padding-bottom: 0px;
  margin-top: -15px;
  color: #9c9c9c;
}

.kanren-t{
  height: 140px;
  padding-bottom: 0px;
  text-align: left;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp: 3;/*タイトルは3行分だけ*/
  overflow:hidden;
  text-overflow:ellipsis;
}

.kanren-t{ /*もともとあるh2タグの設定を打ち消す*/
  margin: 0;
  padding-top: 0;
  padding-right: 10px;
  padding-left: 0;
  color: #494949;
  background: none;
  border-left: none;
  border-bottom: none;
  font-size: 19px;
  font-weight: bold;
}

.itiran-custom article {
  height: 160px;
  background: #ffffff;/*背景色*/
  padding: 0px;/*内側の余白*/
  margin: 0px;/*外側の余白*/
  margin-bottom: 1.3rem;/*カード下の余白*/
  margin-top: 1em;/*カード上の余白*/
  box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.12), 0 2px 3px 0 rgba(0, 0, 0, 0.22);/*影をつける*/
  transition: .3s ease-in-out;
}

.itiran-custom article:first-child{/*1番上の記事だけ*/
  margin-top: 0px;
}

.itiran-custom article:hover {/*ホバーしたとき*/
  box-shadow: 0 15px 30px -5px rgba(0, 0, 0, 0.15), 0 0 5px rgba(0, 0, 0, 0.1);
  transform: translateY(-4px);
}

.itiran-custom div img {/*アイキャッチ画像*/
  width: 280px;/*画像幅*/
  height: 160px;/*画像の高さ*/
  vertical-align: middle;
}

.itiran-custom a {/*記事タイトル*/
  font-weight: bold;
  color: #494949;
  font-size: 15px;
  text-decoration: none;
}

.eyecatch-t {/*-- 記事一覧画像にカテゴリー追加 --*/
  position: relative;
  display: table-cell;
}

p.eyecatchlabel-t {
  position: absolute;
  font-size: 13px;
  font-weight: bold;
  color: #ffffff;/*文字色*/
  background-color: rgba(240,98,146 ,0.9);/*背景色*/
  padding: 0px 20px;
  left: 3px;
  top: 3px;
  border-radius: 20px;
  z-index: 2000;
}

p.kanren-t a{
  color:#494949;
}

/*記事一覧カード化のスマホ対応*/
@media only screen and (max-width: 720px) {
.blog_info{
    width: calc(100% - 150px);
    height: 90px;
    padding-top: 0px;
}
	
.kanren-t{
    height: 55px;
    line-height: 1.3;
    padding-top: 0px;
    padding-right: 5px;
    font-size: 14px;
    font-weight: bold;
}
.itiran-custom article {
    float: none;/*配置なし*/
    height: 90px;
}
	
.itiran-custom div img {/*アイキャッチ画像*/
    max-width: 100%;
    width: 140px;/*画像幅*/
    height: 90px;/*画像の高さ*/
}
.itiran-custom a{/*記事タイトル*/
    font-size: 0.8em;/*文字サイズ*/
}

p.eyecatchlabel-t {
    font-size: 10px;/*カテゴリー文字サイズ*/
    padding: 0px 5px;/*縦と横の幅*/
}

.itiran-time {
    font-size: 10px;/*投稿日時文字サイズ*/
    padding-bottom: 0px;
    margin-top: 0px;
}
}

スマホについても上記のCSSで対応できていますので、ご安心を。

これをコピペで一応完成形にはなるのですが、このままではカテゴリを表示するラベルが1色です。

この最初の1色に関しては、p.eyecatchlabel-t{ ...にある背景色の部分で直せます。

カテゴリ別でラベルの色を変える方法

今回紹介しているカスタマイズでは、カテゴリごとにラベルの色を変えていくことが可能です。

stinger8完成後

ブログ運営なら水色、ブログカスタマイズならオレンジ色になっています。

やりかたは簡単で、カテゴリのURLに沿った形でCSSを追加するだけです。

CSS
/*カテゴリーごとに色を設定*/
.eyecatch-t .html-css-manual{/*カテゴリのURLが「html-css-manualなら」*/
	background-color: rgba(33,150,243,0.9)!important;
}

.eyecatch-t .blog{/*カテゴリのURLが「blog」なら*/
	background-color: rgba(79,195,247 ,0.9)!important;
}

上記の例に習って、一つずつ設定していけばOKです。

.eyecatch-t .URL{ ... の形ですね。

4.Stinger8をカスタマイズして記事一覧を変更する方法まとめ

Stinger8でなくとも、無料テーマであれば同じようにカード化することができるでしょう。

一番最初の状態は正直文字だらけで見にくいですし、せっかくのアイキャッチ画像の利点も損なわれます。

是非、この記事を参考にきれいなデザインを目指していただければと思います！

以下の記事で、Stinger8でできるカスタマイズについても少し紹介していますので、参考にしてみてください。

その他Stinger8でできるカスタマイズを見る

前の記事

【Rinker】リクエスト回数が多すぎます。エラーの回避方法は？問い合わせて解決！
【Rinker】リクエスト回数が多すぎます。エラーの回避方法は…

次の記事

SANGO+PORIPUにテーマを乗り換えで大変だった点【10…