Stinger3カスタマイズ！2カラムのおしゃれ記事一覧をつくろう！

このごろよく見る大きな写真に記事タイトルという形の記事一覧。おしゃれでかっこいいですよね。
今回はStingerをカスタマイズして2列タイプのおしゃれな記事一覧をつくっていきます。

▼まだどのidやclassがどの部分なのかわからないよ、という方はこちらにささっと目を通していただけるとスムーズに進められると思います。

完成するとこんな感じになります。

今回のカスタマイズ概要

まずはじめにトップページの「home」部分のid名を変更します。
Stingerでは記事ページ、アーカイブページでも「#main」というidを使っています。そのため「#main」を直接変更するとトップページ以外の部分にも影響が出てしまいます。
これを防ぐため、トップページのみid名を「#homemain」に変更します。

次に「#homemain」の背景色、枠線、さらに記事本文の抜粋を消します。

あとはCSSで見た目をカード型に整えて今回のカスタマイズは終わりです。

カスタマイズ手順

Step1　#homemainを作成

「#main」の指定は「header.php」の最後で行われています。

header.phpを開いて一番最後の

<div id="wrap">
<div id="wrap-in">
<div id="main">

の部分を以下のように書き換えます。

<div id="wrap">
  <div id="wrap-in">
  
    <?php if(is_mobile()) { ?> <!-- スマホサイトは変更しない -->
      <div id="main">
    <?php } else { ?> <!-- ここからパソコン版の動作 -->
      <?php if(is_front_page() ): ?> <!-- トップページは#homemain -->
        <div id="homemain">
      <?php else :?> <!-- 他のページは#main -->
        <div id="main"> 
      <?php endif; ?>
    <?php } ?>

これでidを分けられました。

Step2　#homemainのCSSを設定

この段階でサイトを見ると「#homemain」のCSSが設定されていないので、ひどく乱れた状態になります。
「#homemain」に「#main」と同様のCSSを適用していきましょう。
上で述べた「背景色の透過」と「枠線の消去」、サイズの調整も同時に進めていきます。
元テーマを直接編集されている方はCSSの一番下に、子テーマをお持ちの方はそちらに以下のコードを記述してください。(以降CSSの変更は同様に行ってください)

/*-----------------------#homemainの設定---------------------*/
#wrap #wrap-in #homemain {
	float: left;
	width: 630px;
	padding-right: 0px;
	padding-left: 0px;
	padding-top: 0px;
	background-color: transparent;
	padding-bottom: 20px;
}

ここまで終えるとこのようになっているはずです。

Step3 記事の抜粋を消す

続いて記事の抜粋と「続きを見る」を消します。変更するのは「home.php」。
以下の2行を削除してください。

 <p class="dami"><?php echo mb_substr( strip_tags( stinger_noshotcode( $post->post_content ) ), 0, 100 ) . ''; ?></p>
      <p class="motto"><a class="more-link" href="<?php the_permalink() ?>">続きを見る</a></p>

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

このままCSSを調整しても2カラムにはできるのですが、今回はサムネイルサイズを変更して収まりのいいキレイな形に整えます。

「functions.php」に次の行を追加してください。高さはお好みで。

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

続いて「home.php」を変更してサムネイルを適用します。以下の部分を探してください。

<?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?>
      <?php
$title= get_the_title();
the_post_thumbnail(array( 150,150 ),
array( 'alt' =>$title, 'title' => $title)); ?>

array(150,150)の部分を「’thumb2column’」に書き換えてください。

<?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?>
      <?php
$title= get_the_title();
the_post_thumbnail('thumb2column',
array( 'alt' =>$title, 'title' => $title)); ?>

このままではサムネイルサイズは変更できていません。今回設定したサムネイルサイズは150px以上なので、CSSも変更する必要があります。

今回は次のStepで同時進行していきます。

Step5 CSSを調整して2列のカード型に

いよいよ2カラムにしていきます。以下のCSSをまるまる書き加えてください。

/*--------------------2カラムに整えます-----------------*/
#wrap #wrap-in #homemain .entry{
	width: 300px;
	height: 300px;
	margin-right: 13px;
	margin-bottom: 14px;
	padding:0px;
	float:left;
	border:1px groove;
	background-color: #ffffff;
}

#wrap #wrap-in #homemain .post .entry .entry-content {/*トップページ記事一覧のタイトル長さ調整*/
	float: left;
	width: 300px;
	padding-left: 10px;
	padding-right: 10px;
	background-color: transparent;
}

#wrap #wrap-in #homemain .entry .entry-title-ac{
	width:280px;
	padding:0px;
	margin:0px;
	margin-top:5px;
}

#homemain .entry .sumbox {
	float: left;
	margin-left: 0px;
	margin-top: 0px;
	height: 173px;
	width: 300px;
	padding: 0px;
	background: #fff;
	border: none;
}

以上でカスタマイズは完了です。終わってみるとこのようになります。