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

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

:2014/10/4 STINGER Wordpress

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

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

完成図

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

スポンサーリンク

記事内リード文下_PC

カスタマイズ概要

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

背景色を削除

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

要らないものを削除

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

カスタマイズ手順

Step1 main部分の背景色を透過

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

どうしてcssに書かないの?

今回変更したいのは記事一覧の「main」部分。
style.cssでコードを指定してしまうと、記事ページにも変更が反映されてしまうんですね。
変更をトップページとアーカイブ、検索結果だけに留めるために今回は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つの領域に分かれています。詳しくはこちらの記事をご覧ください。

cssの有効範囲

領域①に追加

#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

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

完成図

あとがき

「Stinger5でもあのカスタマイズをやりたいんだけど」と質問を頂いたので新たに書き直しました。

やっぱり大きな写真はいいですね!
見栄えもいいしわかりやすい!

今回はサムネイルを横幅いっぱいにしましたが、小さいサイズでもまた違った見た目になって楽しいですよ。
1画面にたくさん記事を出したいんだ!という方はぜひ取り入れてみてください。

最後まで読んでいただきありがとうございました。
Jimon(@jimon_s)でした。

jimon


記事下_W左_PC

記事下_W右_PC

-STINGER, Wordpress
-,

サイドバー上_PC

CATEGORY
この記事のカテゴリ
STINGERの親カテゴリ
ブログ内の他のカテゴリ
更新チェックはこちらから!