STINGER8の記事一覧をおしゃれなカード型にカスタマイズする方法

どうも、「きにぶろぐ.com」の自由に憧れるフリーマン(@free_manJJ)です。

まだSTINGER8のカスタマイズで、トップページの記事一覧にはあまり手をつけていなかったので、おしゃれな「カード型」デザインのものに変更することに決めました。

ですが、ネットで調べてもSTINGER8でカスタマイズされている方がなかなか見つからなかったので、ある程度は自分で何とかしようと作業を開始したら、完成するまでに半日はかかりましたね。

プラグインは極力使いたくないので、CSSでなんとかデザインの変更を挑戦していますが、やはり私のような初心者では１つ変更するのも一苦労です。

それではSTINGER8のトップページを、おしゃれなカード型にカスタマイズする方法についてご紹介していきます。

変更前と完成系のイメージ

変更前のトップページ記事一覧は、基本的にはほとんどデフォルトの状態ものになっています。

上記の画像はデフォルトのものですが、今までは右下に「続きを読む」ボタンを表示させていましたので、カスタマイズ方法が気になる方はこちらの記事をご覧ください。

参考：続きを読むボタンはどこだ？STINGER8で表示させるカスタマイズ方法

ここからCSSで新たにカスタマイズした完成系イメージはこちらになります。

「このブログ、前と全然変わったなぁ。」と思ってもらえるような、カード型のデザインに仕上がったと私ながら満足しています。

因みに「続きを読む」ボタンは、「この記事を見る」に内容を変更しているだけです。

それでは早速STINGER8でカスタマイズを行っていきましょう。

記事一覧をカード型にカスタマイズ

STINGER8のトップページの記事一覧をカード型にするには、以下のテーマファイルを編集していきます。

itiran.php
style.css

ファイルの編集はアップデートしても、カスタマイズ内容が消えることのない「子テーマ」で編集するのが基本となります。

親テーマにしか対象ファイルがない場合は、「FTPソフト」などでファイルを子テーマにアップロードしておきましょう。

また、テーマの編集は何かと不都合が起きる可能性があるので、事前にデータのバックアップなどを取っておくことをオススメします。

「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>

３列目から９列目が対象のコードになるのでコメントアウトを行いますが、このままでは「続きを読む」ボタンも表示されなくなってしまう場合があります。

もしボタンを利用されている方は上記コードのところに、以下の３列目のコードを追記して下さい。

		　　　　　<?php the_time( 'Y/m/d' ); ?>
			&nbsp;<span class="pcone">
<p class="readmore"><a href="<?php the_permalink(); ?>">この記事を見る</a></p>
				<!-- <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>

コードが追記できたら、またそのすぐ上にあるコードのところに以下の２列目のコードを追加して、３列目の最初にある「<p>」を削除します。

		<div class="blog_info">
<p class="itiran-time">
			<i class="fa fa-clock-o"></i>
				<?php the_time( 'Y/m/d' ); ?>

「class」を指定しておくことで、記事一覧の投稿日時だけのデザインをカスタマイズすることができるようになります。

次にitiran.phpの上の方にある「class=”kanren”>」を、以下の６列目のコードに変更しましょう。

<?php
/**
 * トップやアーカイブ一覧
 */
?>
<div class="itiran-custom clearfix">
	<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
		<dl class="clearfix">

ここで「class」を変更しておかないと、この後に行うstyle.cssの変更内容が記事一覧だけでなく、「関連記事」や「新着記事」欄にも同時に反映されてしまいます。

すでにカスタマイズされている方やトップページだけを変更したい場合は、必ず新しいclassを指定しておきましょう。

これでカード型にする準備は完了になります。

画像上にカテゴリーを重ねる場合は

先程カテゴリーを非表示にしたのは、アイキャッチの画像上にカテゴリーを重ねているからで、２つも表示する必要がないからです。

もし通常のカテゴリー表示のままでいいという方は、コメントアウトの最初の部分を一段下にするだけで簡単に表示できます。

カテゴリーを画像上に重ねる場合は、itiran.phpから以下の３列目と５～８列目のコードを追加します。

		<dt><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->cat_name; } ?>
</P>
</div>

また、４列目の「thumbnail」をここでは「medium」に変更しています。

これは表示されている画像が元々小さめで設定されている為、拡大した時に画像が荒れてぼやけてしまいます。

そこでmediumに変更することで、ワードプレスの「設定」⇒「メディア」で設定されている、「中サイズ」の設定値(既存で300×300)に拡大されます。

※mediumを使うと画像の縦横比率がそのまま縮小表示される為、画像サイズがバラバラになってしまう可能性があるので注意しましょう。

「style.css」でデザインを調整する

style.cssファイルでカード型デザインを整えていきますが、そのまま以下のコードをコピー＆ペーストするだけですぐに使用できます。

/*-- トップページ記事一覧エリア --*/
.itiran-custom {
    position: relative;/*相対位置*/
}
.itiran-custom dl {
    background: #4169e1;/*背景色*/
    border: none;/*ボーダーなし*/
    padding: 0px;/*内側の余白*/
    margin: 0px;/*外側の余白*/
    margin-bottom: 30px;/*カード下の余白*/
    box-shadow: 3px 7px 4px #a0a0a0;/*影をつける*/
}
.itiran-custom dt {
    margin-right: 30px;/*画像とタイトルの間隔*/
    float: left;/*左に寄せる*/
    overflow: hidden;/*拡大領域固定*/
    position: relative;/*相対位置*/
    list-style: none;/*マーカーなし*/
}
.itiran-custom dt img {/*アイキャッチ画像*/
    width: 260px;/*画像幅*/
    height: 200px;/*画像の高さ*/
    transition: .3s;/*拡大・縮小速度*/
}
.itiran-custom dt img:hover {/*マウスホバーで画像拡大*/
    transform: scale(1.2);/*拡大率*/
}
.itiran-custom dd a {/*記事タイトル*/
    font-weight: bold;/*文字を太字に*/
    color: #fff;/*文字色*/
    font-size: 18px;/*文字サイズ*/
    text-decoration: none;/*下線なし*/
}
.itiran-custom dd {
    text-align: center;/*タイトル中央寄せ*/
    display: block;/*ブロック形式で表示*/
    padding: 30px;/*タイトル位置*/
}
.eyecatch-t {/*-- 記事一覧画像にカテゴリー追加 --*/
    position: relative;/*絶対位置*/
}
p.eyecatchlabel-t {
    position: absolute;/*絶対位置*/
    font-size: 13px;/*文字サイズ*/
    font-weight: bold;/*文字を太字に*/
    color: #4169e1;/*文字色*/
    background-color: #7cfc00;/*背景色*/
    padding: 0px 20px;/*縦と横の幅*/
    left: 0;/*左からの位置*/
    top: 0;/*上からの位置*/
    opacity: 0.8;/*透明度*/
    z-index: 2000;/*重なりの順序*/
}

/*-- この記事を見るボタンの配置 --*/
.readmore {
    text-align: right;/*ボタンを中央に移動*/
    margin-top: 2px;/*上からの余白*/
    margin-bottom: -17px;/*下からの余白*/
}

マウスホバー時に画像を拡大させたり、カテゴリーを画像の左上に表示させてみたり、カードに影をつけてみたり色々変更もできるので、各説明文を見ながら簡単に自分好みのカスタマイズができるかと思います。

また、「この記事を見る」ボタンのコードはあくまで配置だけのものになるので、デザインが気になる方やボタンを表示したいという方は、先程の「続きを読む」に関する記事を参考にされて下さい。

スマホ用のデザインはこちら

上記のコードだけではスマホで表示した時にデザインが崩れてしまうので、以下のコードを追記しておきましょう。

@media only screen and (max-width: 413px) {
.itiran-custom dl {
    float: none;/*配置なし*/
}
.itiran-custom dt {
    margin-right: 10px;/*画像とタイトルの間隔*/
}
.itiran-custom dt img {/*アイキャッチ画像*/
    width: 135px;/*画像幅*/
    height: 140px;/*画像の高さ*/
}
.itiran-custom dd a {/*記事タイトル*/
    font-size: 15px;/*文字サイズ*/
}
.itiran-custom dd {
    text-align: left;/*タイトル左寄せ*/
    padding: 3px;/*タイトル位置*/
}
p.eyecatchlabel-t {
    font-size: 10px;/*カテゴリー文字サイズ*/
    padding: 0px 5px;/*縦と横の幅*/
}
.readmore {
    text-align: right;/*ボタン右寄せ*/
    margin-top: -18px;/*上からの余白*/
    margin-bottom: 0px;/*下からの余白*/
}
.itiran-time {
    font-size: 8px;/*投稿日時文字サイズ*/
    margin-top: -25px;/*上からの余白*/
}
}

上記のコードを追加すると、このように表示されます。