Stinger5カスタマイズ！記事一覧をオシャレな写真付き2カラムにする方法、もちろんレスポンシブ対応だよ

最近いろんなサイトで見かける「大きな写真に記事タイトル」というカード型デザイン。
スタイリッシュでカッコイイ上どんな記事かひと目でわかる、まさにいいことづくめのスタイルです。

今回はStinger5であのデザインを再現してみたいと思います。
完成するとこんな感じになりますよ。

※Stinger3で同様のカスタマイズをしたい方はこちらの記事をご覧ください。

カスタマイズ概要

まず記事一覧の背景色を消去します。

つづいてカテゴリーや抜粋分などいらないものを取り除いていきます。

最後にcssで見た目をカード型に整えて、今回のカスタマイズはおしまいです！

カスタマイズ手順

Step1 main部分の背景色を透過

まずは背景色の透過から。main部分の白背景を消去します。
ただし！「style.css」は触りません。「home.php」と「archive.php」、「search.php」に直書きします。

「home.php」「archive.php」「search.php」の以下の部分を書き換えてください。

修正前: <main>
修正後: <main style="background-color:transparent; padding-left:0px;">

背景を透過する他に余白の調整も同時に行っています。

Step2 余計な部品を削除

続いて記事一覧から投稿日やカテゴリーを消去します。
「itiran.php」の以下のコードを削除してください。

<div class="blog_info">
        <p><i class="fa fa-clock-o"></i>&nbsp;
          <?php the_time('Y/m/d') ?>
          &nbsp;<span class="pcone"><i class="fa fa-tags"></i>&nbsp;
          <?php the_category(', ') ?>
          <?php the_tags('', ', '); ?>
          </span></p>
</div>
<div class="smanone">
        <?php the_excerpt(); //スマートフォンには表示しない抜粋文 ?>
</div>

Step3 サムネイルサイズを変更する

次はサムネイルサイズの変更です。
サムネイルサイズの詳しい考え方はこちらの記事に書きましたので合わせてご覧ください。

【関連】Stinger5カスタマイズ！サムネイル画像を好きな大きさに変更する方法

まず「functions.php」に以下のコードを追加します。高さは使っているサムネイルの比率に合わせて入力してくださいね。
※この記事では高さを160pxにしたとしてcssを調整しています。

add_image_size('thumb2column',300,ここに高さを入力,true);

続いて「itiran.php」のサムネイルを呼び出す部分を書き換えます。

修正前: <?php the_post_thumbnail( 'thumb150' ); ?>
修正後: <?php the_post_thumbnail( 'thumb2column' ); ?>

style.cssの設定は次のステップでまとめて行っていきますね。

Step3 見た目をカード型に整える

いよいよカード型にしていきます。
style.cssの領域①と領域③に以下のコードを追記してください。
※Stinger5のstyle.cssは4つの領域に分かれています。詳しくはこちらの記事をご覧ください。

領域①に追加

#topnews dl{
	border: 1px solid #ccc;
	float:left;
	background-color: #fff;
	box-shadow: 1px 1px 1px rgba(0,0,0,0.2);
	margin-left:10px;
	margin-right: 10px;
}
#topnews dt{
	width:100%;
}
#topnews dd{
	padding: 0 10px 0 10px;
}
#topnews dl:first-child {
	padding-top: 0px;
}
#topnews dd h3{
	/*記事タイトルが入りきらない場合はここを編集してください*/
	font-size:15px;
	height:220px;	
}
.sns{
	margin-left: 10px;
}

領域③に追加

#topnews dl{
	/*幅の取り方を変える*/
	-webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;	

	width:45.7%;	/*border,paddingまで含めて45.7%*/
	margin-left: 0px;
	margin-right: 4.3%;
}
#topnews dt{
	width:100%;
}
#topnews dd{
	padding: 0 10px 0 10px;
}

途中に出てくる「box-sizing」はカスタマイズにとても役立つ便利なコード。
こちらのサイトで詳しく解説されているので参考にしてください。
CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定｜TM Life

以上で今回のカスタマイズは完了です。
うまくいっていればこんな風に表示されます。

あとがき

@Jimon_sさんをフォロー