STINGER7：記事一覧をカード型にカスタマイズ【その２】

STINGER7の記事一覧カスタマイズ【その２】でございます！
前回はとりあえずカード型にするところまでやりましたね↓

STINGER7：記事一覧をカード型にカスタマイズ【その１】

...

web-ashibi.net

2016.05.04

今回はタイル型に並べるつもりだったんですけど、その前にもう少し細かいところまでいじってみたいと思います！
完成するとこんな感じです↓

前回の記事で「CSSでカード型に装飾」のところまでやっていただくと、今回の内容もスムーズに導入できます！
では早速やっていきましょう！

子テーマの使用方法

テーマファイルをカスタマイズする時は子テーマを使うことが推奨されています。
子テーマを使用すると、テーマ本体をアップデートしてもカスタマイズ内容が消えないというメリットがあります。

STINGER7での子テーマの使用方法はこちら↓
STINGER7：テーマのインストールと子テーマの使用方法

特にSTINGER7の場合は「header.php」を編集する際には注意が必要です。
こちらの記事を参考にしてください↓
STINGER7：親テーマの任意のファイルを子テーマで編集する方法

サムネイルを長方形にする

以前に書いた記事でも紹介していますが、まずはサムネイルを正方形から長方形に変えてみましょう。

STINGER7/Plus：トップページ記事一覧のサムネイル画像のサイズを変える方法

STINGER7で「サムネイルのサイズを変更したい」というリクエストを頂いたので早速カスタマイズしたいと思います！

web-ashibi.net

2016.03.04

「 itiran-thumbnail-on.php 」を編集します。
この部分を探してください↓

<?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?>
<?php the_post_thumbnail( 'thumbnail' ); ?>
<?php else: // サムネイルを持っていないときの処理 ?>

見つけたら、「 <?php the_post_thumbnail( ‘thumbnail‘ ); ?> 」の赤字の部分を変更して、「 <?php the_post_thumbnail( ‘medium‘ ); ?> 」と変更します。

これによって画像の上限サイズが「設定 → メディア」で設定されている「中サイズ」になりました。
変更していなければ中サイズは300×300で設定されていると思います。

次にCSSで少し大きくします↓

@media only screen and (min-width: 414px) {
.itiran-custom dt {
	width: 300px;
}
 
.itiran-custom dt img {
	width: 300px;
}
 
.itiran-custom dd {
	padding-left: 320px;
}
}

結構大きめにしてみました。スマホは除外しているので小さいままです。

スマホでは通常通りの正方形にしたい場合は、さきほどの「 itiran-thumbnail-on.php 」をこのように変えてください↓

<?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?>
<?php if ( st_is_mobile() ): ?>
<?php the_post_thumbnail( 'thumbnail' ); ?>
<?php else: ?>
<?php the_post_thumbnail( 'medium' ); ?>
<?php endif; ?>
<?php else: // サムネイルを持っていないときの処理 ?>

ちなみにサムネイルを「medium」に変更すると、普段使用しているアイキャッチ画像の縦横の比率でそのまま縮小されて表示されるので、アイキャッチ画像のサイズがバラバラだと記事一覧の画像サイズも縦の長さがバラバラになります。
普段からアイキャッチ画像のサイズは統一しておくとキレイに表示されますよ♪

投稿日・カテゴリー・タグをカスタマイズ（パターン１）

次は投稿日やカテゴリーの部分をいじってみます。
「itiran-thumbnail-on.php」のこの部分を探してください↓

<div class="blog_info <?php st_hidden_class(); ?>">
<p><i class="fa fa-clock-o"></i>
<?php the_time( 'Y/m/d' ); ?>
&nbsp;<span class="pcone"><i class="fa fa-tags"></i>
<?php the_category( ', ' ); ?>
<?php the_tags( '', ', ' ); ?>
</span></p>
</div>

見つけたらこのコードに書き換えてみてください↓

<div class="blog_info <?php st_hidden_class(); ?>">
<p class="itiran-time"><?php the_time( 'Y.n.d' ); ?></p>
<p>
<span class="itiran-cat"><i class="fa fa-folder" aria-hidden="true"></i> <?php the_category( ', ' ); ?></span>
<span class="itiran-tag"><i class="fa fa-tags" aria-hidden="true"></i> <?php the_tags( '', ', ' ); ?></span>
</p>
</div>

CSSでちょいと見た目を修正します↓

.itiran-time { /* 投稿日の装飾 */
	color: #999 !important;
}
.itiran-cat { /* カテゴリーとタグの間の余白 */
	margin-right: 0.5em;
}
.itiran-cat .fa-folder { /* カテゴリーアイコンの装飾 */
	color: #359E84;
}
.itiran-cat a { /* カテゴリー名の装飾 */
	color: #359E84 !important;
}
.itiran-tag .fa-tags { /* タグアイコンの装飾 */
	color: #359E84;
}
.itiran-tag a { /* タグ名の装飾 */
	color: #359E84 !important;
}

投稿日に付いていたアイコンを消して、カテゴリーとタグにはそれぞれ別のアイコンを付けてカラーも変更しました。
ここまでやるとこんな感じになります↓

細かい変更ですけど雰囲気が少し変わりますね(^^)
ちなみに前回の記事の最後の方に書いてある「カードに影を付ける」っていうのも入っています。

投稿日・カテゴリー・タグをカスタマイズ（パターン２）

では違うパターンもやってみましょう！
今度は「itiran-thumbnail-on.php」の先ほどと同じ箇所をこのように書き換えます↓

<div class="blog_info <?php st_hidden_class(); ?>">
<p class="itiran-time"><i class="fa fa-clock-o" aria-hidden="true"></i><?php the_time( 'Y年n月j日' ); ?></p>
<p class="itiran-cat"><?php the_category( ' ' ); ?><?php the_tags( '','','' ); ?></span></p>
</div>

今度は投稿日のアイコンを復活させて「◯年◯月◯日」という表示に。
カテゴリーとタグはアイコンを消しました。
そしてCSSをこうすると↓

.itiran-time { /* 投稿日の装飾 */
	color: #999 !important;
	margin-bottom: 6px !important;;
}
.itiran-cat a { /* カテゴリー・タグの装飾 */
	background: #47BEA0;
	margin-right: 6px;
	margin-bottom: 6px;
	color: #fff !important;
	padding: 4px 6px;
	border-radius: 4px;
	font-size: 12px;
	display: inline-block;
}
@media only screen and (max-width: 413px) {
.itiran-cat a {　/* カテゴリー・タグの装飾（スマホ） */
	font-size: 10px;
}
}

こんな感じになります↓

スマホだとこんな感じですね↓

投稿日の表示の種類

パターン１とパターン２で投稿日の表示方法を変えてみましたが、他にも色々と変えることができます。
いくつか例を載せておきますね。

16/5/5(木)

<?php the_time('y/n/j(D)'); ?>

2016.05.05 Thu

<?php echo get_post_time('Y.m.d D'); ?>

2016.5.5 Thursday

<?php echo get_post_time('Y.n.j l'); ?>

October 5th, 2016

<?php echo get_post_time('F jS, Y'); ?>

Oct 5, 2016

<?php echo get_post_time('M j, Y'); ?>

微妙にテンプレートタグが違っていますよね！
月や曜日は「the_time」だと日本語表記、「get_post_time」を使用すると英語表記になります。

「itiran-thumbnail-on.php」の該当箇所を変更すれば好きな表示に変えられますのでお試しください(^^)

まとめ

ということで記事一覧のカスタマイズ【その２】でした！
CSSを変更して色々とお好みでカスタマイズしてみてください。

次回は一行に２つ以上の記事を並べるタイル型にします！
お楽しみに〜♪

【その３】書きました↓

STINGER7：記事一覧をカード型にカスタマイズ【その３】

...

web-ashibi.net

2016.05.11

STINGER7のカスタマイズ記事をまとめました↓

STINGER7：カスタマイズまとめ

このブログでも使用させて頂いているWordPressテーマ「STINGER7」のカスタマイズ記事をまとめました。

web-ashibi.net

2016.03.24