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

ちょっと忙しくて間が空いてしまいました、すみません(^^;)
お待たせしました！「記事一覧の表示をカスタマイズ」をしたいと思います！

記事一覧のカスタマイズは問い合わせが多かったので、２タイプに分けてやってみようと思います。
今回は初期状態と同じように１行に１つの記事でカード型にするタイプです。
完成するとこんな感じになります↓

それでは早速やっていきましょう〜♪

子テーマの使用方法

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

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

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

記事一覧部分の背景を消す

まずは記事一覧を囲む大枠の背景を消します。
以下のファイル全ての同じ部分を変更します。

home.php（トップページ記事一覧）
category.php（カテゴリー別の記事一覧）
archive.php（タグ別、年別などの記事一覧）
search.php（検索結果の記事一覧）

上から5行目辺りにあるこのコードを↓

<main <?php st_text_copyck(); ?>>

このように変更します（class名を追加）↓

<main class="backnon" <?php st_text_copyck(); ?>>

「<?php st_text_copyck(); ?>」の部分は、STINGER管理の画面にあるSEO関連設定の「テキスト選択不可にする」というチェックを入れた場合に必要になるので念のため残してあります。
テキストを選択してコピーできないようにする設定ですね。

class名を追加したら、CSSで背景と余白を削除します。
style.cssに以下のコードを追記してください↓

.backnon {
	background: none;
	padding: 0 10px;
}
@media only screen and (min-width: 781px) {
.backnon {
	padding: 0;
}
}

これで記事一覧を囲っている大枠の白い背景が消えたと思います。
上記CSSはPCとタブレット以下（780px以下）のサイズで左右の余白を変えています。

ちなみに当ブログのように記事ページや固定ページの背景も全部消したい場合はこのコードを追加してください↓

main {
	background: none;
}

itiran-thumbnail-on.phpを編集

記事一覧をカード型にする下準備として「itiran-thumbnail-on.php」を少し編集します。

抜粋文を削除

下から10行目辺りにある以下のコードを探して削除してください↓
抜粋文を残したままにしたい場合は飛ばしてください。

<div class="smanone2">
	<?php the_excerpt(); //抜粋文 ?>
</div>

class名を追加

編集に必要なクラス名を追加します。
itiran-thumbnail-on.phpの一番上にあるこのコードを↓

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

このように変更して「itiran-custom」というクラスを追加します↓

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

CSSでカード型に装飾

ではいよいよカード型にしてみましょう！
以下のコードをcssに追加してください↓

.itiran-custom dl {
	border: none; /* 下にあるボーダーを消す */
	background: #fff; /* カードの背景色 */
	padding: 10px; /* カード内側の余白 */
}
.itiran-custom dl:last-child {
	padding-bottom: 10px; /* 最後のカードに設定されている余白を修正 */
}
@media only screen and (min-width: 414px) { /* スマホは除外 */
.itiran-custom dl h3 a {
	font-size: 20px; /* 記事タイトルの文字サイズ */
	line-height: 1.4em; /* 記事タイトルの行の高さ */
}
}

これでとりあえずカードっぽくなったと思います！
以下のカスタマイズはお好みでどうぞ↓

サムネイル画像のサイズを変更する

サムネイル画像のサイズ変更は以前に記事を書いていますので参考にしてみてください。

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

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

web-ashibi.net

2016.03.04

サムネイル画像の角を丸くする

メイン部分のサムネイル画像のみ角を丸くする場合は以下のcssを追記してください↓

.itiran-custom dt a img {
	border-radius: 10px;
}

「記事下の関連記事」や、「サイドバーのNEW POST」のサムネイル画像も全て角を丸くする場合は以下のコードで↓

.kanren dt a img {
	border-radius: 10px;
}

数字を大きくすると丸みも大きくなります。
お好みで調整してくださいね。

カードに影を付ける

css3の「box-shadow」でカードに影を付けてみましょう。
先ほどcssに追加した「.itiran-custom dl」に以下のように追加してみます↓

.itiran-custom dl {
	border: none;
	background: #fff;
	padding: 10px;
	margin-bottom: 20px; /* カード下に余白を追加 */
	box-shadow: 1px 3px 3px #999999;
	-moz-box-shadow: 1px 3px 3px #999999;
	-webkit-box-shadow: 1px 3px 3px #999999;
}

「box-shadow」の値はそれぞれ以下の様な指定になっています。

１番目の数字・・・横方向の向き。正の値は右へ、負の値は左へ移動します。
２番目の数字・・・縦方向の向き。正の値は下へ、負の値は上へ移動します。
３番目の数字・・・ぼかしの大きさ。値が大きいほどぼかしが強くなります。

影の色も好きな色に変更できるし、「 background: #fff; 」を削除すると背景色が無くて影だけ付くのでこんな感じになります↓

あなたのサイトに合わせて色々試してみてくださいね(^^)

まとめ

ということで今回はSTINGER7の記事一覧をカード型にするカスタマイズでした！
次回はさらに応用編をやってみたいと思います！

【その２】書きました↓

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

...

web-ashibi.net

2016.05.05

【その３】も書きました↓

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

...

web-ashibi.net

2016.05.11

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

STINGER7：カスタマイズまとめ

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

web-ashibi.net

2016.03.24