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

STINGER7の記事一覧カスタマイズ、完結編でございます！
今回はカード型にしたものをタイル状に並べてみたいと思います。
前回までの記事はこちら↓

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

今回は完成するとこんな感じです↓

だいぶ雰囲気変わりますね♪
それでは早速やっていきましょう！

子テーマの使用方法

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

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

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

下準備

まずは【その１】の記事の「CSSでカード型に装飾」の見出しのところまでカスタマイズしてください。
こちらの記事です↓

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

...

web-ashibi.net

2016.05.04

記事一覧に使用する画像の準備

新しいサムネイルサイズを追加する

記事一覧に使用するサムネイル画像を準備します。

「設定 → メディア」を見ると、３種類の画像が設定されていますね。
今回は400pxぐらいの画像を使いたいけど、デフォルトの中サイズだと少し足りない、大サイズだとデカすぎ。
ということで新しいサイズのサムネイルを追加してみることにします。

「 functions.php 」に以下のコードを追加しましょう↓

add_image_size( '400_thumbnail', 400, 400 );

ちなみに最後に「true」を付けると自動で切り抜いて縮小されます↓

add_image_size( '400_thumbnail', 400, 400, true );

「true」がある場合と、ない場合の違いを少し説明しますね。
試しに「幅640px × 縦427px」のこの画像をアップしてみます↓

「true」なしだと縦横比を保ったまま縮小されるので、仕上がりサイズは「400 × 267」となります↓

「true」ありの場合は縦横どちらかが指定サイズに達したら余った部分がカットされます。
今回は高さが先に指定の「400」になるので、左右の余り部分はカットされ、仕上がりサイズは「400 × 400」です↓

記事一覧に使用することを考えた場合「true」なしだと毎回ちゃんと同じサイズの画像をアップしないと、縮小された時にサイズがバラバラになってしまいます。

でも「true」を付けておけば、多少サイズがバラバラでもちゃんと指定のサイズになるように切り抜いてくれるわけです。

記事一覧用だとそんなに高さはいらないので、高さを指定するなら「400 × 200」ぐらいの横長でも良いかもしれないですね↓

add_image_size( '400_thumbnail', 400, 200, true );

上記の「400, 200, ture」だとこうなります。
今度は横幅が先に指定サイズに達しているので、高さがカットされていますね↓

毎回画像のサイズを揃えるのは面倒だ！という人は「true」を入れておくと楽だと思います。

STINGER7のメインカラムの横幅は740pxなので、一行に２つのサムネイルを並べるとして幅400pxにしてみました。
サイズはお好みで調整してみてください♪

「Regenerate Thumbnails」でサムネイルを再作成

画像サイズを新しく追加した場合、過去にアップした画像には適用されません。
なので過去にアップした画像も新しいサイズで再作成してくれる便利なプラグイン「Regenerate Thumbnails」を使用します。

「プラグイン → 新規追加」で検索してインストールしたら有効化してください。

すると管理画面の「ツール」に「Regen. Thumbnails」という項目が出るのでクリックして、「すべてのサムネイルを再生成する」ボタンを押しましょう↓

これだけです！
画像の数が多いと数分かかりますので少し待ちましょう。

追加したサイズの画像を記事一覧に使用する

では新しく追加したサムネイルサイズを記事一覧に適用しましょう！
「 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( ‘400_thumbnail‘ ); ?> 」と変更します。

これで画像の準備は一通りオッケーです(^^)

記事一覧をカード型にしてタイル状に並べる

いよいよカード型＆タイル状に並べていきます。
まずは「itiran-thumbnail-on.php」の、一番最初の行をこのように変更してください↓

<div class="kanren itiran-custom clearfix <?php st_marugazou_class(); //サムネイルを丸くする ?>">

クラス名に「clearfix」を追加しました。

１行に２つの記事を並べる場合

１行に２つの記事を並べてみます。
「style.css」にこのコードを追加してください↓

.itiran-custom dl {
	width: 48%;
	float: left;
	padding: 0;
	margin-right: 4%;
	margin-bottom: 20px;
}
.itiran-custom dl:nth-child(2n) {
	margin-right: 0;
}
.itiran-custom dl:last-child {
	padding: 0;
	margin-bottom: 20px;
}
.itiran-custom dt {
	float: none;
	width: 100%;
}
.itiran-custom dt img {
	width: 100%;
	height: auto;
}
.itiran-custom dd {
	height: 120px; /* タイトル・日付・カテゴリ部分のボックスの高さ */
	padding: 10px;
}
@media only screen and (max-width: 413px) {
.itiran-custom dl {
	width: 100%;
	float: none;
	margin-right: 0;
	margin-bottom: 20px;
}
.itiran-custom dd {
	height: auto;
	padding: 10px;
}
}

これでこんな感じになると思います↓

タブレットサイズまでは２列のまま縮小して、スマホサイズになるとfloatを解除して１列になります。

１行に３つの記事を並べる場合

今度は１行に３つの記事を並べてみましょう！
「style.css」にこのコードを追加します↓

.itiran-custom dl {
	width: 32%;
	float: left;
	padding: 0;
	margin-right: 2%;
	margin-bottom: 20px;
}
.itiran-custom dl:nth-child(3n) {
	margin-right: 0;
}
.itiran-custom dl:last-child {
	padding: 0;
	margin-bottom: 20px;
}
.itiran-custom dt {
	float: none;
	width: 100%;
}
.itiran-custom dt img {
	width: 100%;
	height: auto;
}
.itiran-custom dd {
	height: 160px; /* タイトル・日付・カテゴリ部分のボックスの高さ */
	padding: 10px;
}
@media only screen and (max-width: 413px) {
.itiran-custom dl {
	width: 100%;
	float: none;
	margin-right: 0;
	margin-bottom: 20px;
}
.itiran-custom dd {
	height: auto;
	padding: 10px;
}
}

するとこんな感じに↓

高さを指定してキレイに揃うようにしているので、タイトルが長すぎたりすると枠からはみ出てしまうかもしれません。
「タイトル・日付・カテゴリ部分のボックスの高さ」とコメントを入れてあるところをお好みで調整してください。

これでとりあえずカード型にしてタイル状に並べることができましたね！
以下はお好みでカスタマイズして、さらにオリジナリティを出してみてください！

記事タイトルの調整

タイトルの文字の装飾をいじってみましょう。
サイトのテーマカラーなどに合わせて色も変えてみると雰囲気が変わってなかなか良いですよ♪

.itiran-custom dl h3 a { /* スマホサイズでの指定 */
	font-size: 16px; /* 文字サイズ */
	line-height: 1.4em; /* 行の高さ */
	color: #47BEA0; /* 文字の色 */
}
@media only screen and (min-width: 414px) {
.itiran-custom dl h3 a { /* タブレット・PCサイズでの指定 */
	font-size: 20px;
	line-height: 1.4em;
	color: #47BEA0;
}
}

投稿日・カテゴリー・タグをカスタマイズ

タイトルの下の、「投稿日」や「カテゴリ」の部分も変えてみましょう。
前回の記事に2パターン書いていますが、同じやり方でできるので参考にしてみてください↓

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

...

web-ashibi.net

2016.05.05

タイトル部分の背景を消す

タイトル・投稿日・カテゴリのボックスの背景を消してみます。
CSSにこちらを追加してください↓

.itiran-custom dl {
	background: none;
}
.itiran-custom dd {
	padding: 10px 0 0 0;
}

ここまでやるとこんな感じになります↓

まとめ

ということで記事一覧のカスタマイズは第３回目にしてひとまず完結です！
無事にカスタマイズできましたか？

ただコピペして終わりじゃなくて、個性を出したり、好みに合わせていじれるように紹介してみました。
色を変えたりするだけでも雰囲気が変わるので、色々試してみてください(^^)

間違ってる部分とか、分からないことなどあればコメント・メッセージくださいませ。
ではまた〜♪

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

STINGER7：カスタマイズまとめ

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

web-ashibi.net

2016.03.24