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

公開日: : Stinger, Wordpress ,

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

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

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

完成図

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

Sponsored Link

カスタマイズ概要

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

背景色を削除

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

要らないものを削除

最後に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


 これは!と思ったらシェアして頂けると嬉しいです
  • このエントリーをはてなブックマークに追加
  • Pocket
  • 111 follow us in feedly
Loading Facebook Comments ...

Comment

  1. […] Stinger5カスタマイズ!記事一覧をオシャレな写真付き2カラムにする方法、… […]

  2. […] 本当はカード型のデザインにしてみたかったのですが、ココを参考にいじってみたのですが、どうしても表示崩れをしてしまい、結局できませんでした(´・ω・`) 2記事目以降はきちんと表示されるのですが、最新記事だけ表示が崩れてしまうんですよねぇ… 書いてある通りに全部やって、それと心当たりがあるとこをちょいちょいいじってみたんですけども,,, またいずれ挑戦してみたいと思います。 […]

  3. ma より:

    質問なのですが、3カラムにしたいのですが、どうしてもサムネの大きさが変更されません。

    間違えてる要素はないと思うのですが、返信お願いします。

  4. ma より:

    連投すみません。
    追記なのですが、カテゴリーや日数を表示したままにしたいのですが、タイトルと文字がかぶってしまうので、その対策もご教授お願いします。

    • Jimon より:

      ご連絡ありがとうございます。

      (1)サムネイルについて
      コード変更後「Regenerate Thumbnails」というプラグインを使って、サムネイルを再生成してみてください。新しいサイズをfunctions.phpに追加した場合には都度再生成が必要です。

      (2)カテゴリ、日数について
      文字が被ってしまうということであれば、カードの大きさを大きくして頂けば解決するかと思います。
      カード周りのheight値を調整してみてください。

  5. お忙しいところ失礼致します。
    質問なのですが、コチラのカスタマイズを実践してみた結果、PCで見た時は一応、数値などを細々調整してキレイにおさまったのですが、スマホで見るとタイトルが枠外にハミ出てしまい下の記事のサムネに被ってしまいます。

    コレを調整するには一体どの部分をどのように修正すればよろしいのでしょうか?

    参考までに・・・
    サムネは「(‘thumb2column’,300,250,true)」としており、領域1の「記事タイトルが入りきらない場合はここを編集してください」の部分は「font-size:14px;  height:300px;」としております。

    この数値をイジってみてスマホでの表示がキレイになっても、今度はPCでの表示が見苦しくなってしまったりで、「あちらを立てればこちらが立たず」な状態です。

    style.cssのスマホの領域になにかしら記述すればイイのか・・・とは思うのですがイマイチどう書けばイイのやらな感じですので、ご教授願います。

    • Jimon より:

      カミカミ大王様

      スマホ、パソコンそれぞれでは最適な表示ができているということであれば
      cssの記述をスマホ部、パソコン部で分ければ解決できるかと思います。
      当記事の記述場所は領域①になっているので、この記述箇所を記事内の領域と対応デバイスの図を参考に書き分けてみてください。

      もし書き分けてうまくいかない場合には、おそらく別のcssと干渉してしまっているためだと思います。
      chromeの要素を検証などで、タイトルに複数のcssが設定されていないか確認してみてください。

      よろしくお願いします。

  6. […] 次に記事一覧をオシャレな写真付き2カラムにする方法を参考にさせていただきながら記事一覧ページを2カラムに […]

  7. toufu より:

    はじめまして。Stinger6で構築中です。この記事を見て2カラムに挑戦しようと思うのですが、Stinger6ではどのような方法で2カラムにすればいいのか教えていただけますでしょうか。お忙しい中、お手数ですが、よろしくお願いします!!

    • Jimon より:

      toufuさん

      こんにちは!
      質問いただいた件ですが、Stinger6は触っていないのでわかりません。
      こちらを参考に構造の近い部分を書き換えてみてください。

  8. yamshu より:

    いつもとてもタメになるので参考にさせていただいています。
    2カラム表示にした際の右側に並ぶサムネイルカードとサイドバーとの余白を狭くしたいのですが、コードのどこの部分を触ればいいのかご教示いただけませんでしょうか。

    記事表示をした際には丁度いい余白幅なのですが、トップのサムネ2カラムを表示した際だけどうしても余白が大きくなってしまいます

  9. まさやn より:

    初めまして!まだサイトを作って間もないのですが、2カラムカード型にしたくて、何日も試行錯誤しているのですが、どうにもこうにも2カラムにすらなりません。
    カード型にはできたのですが…
    よかったらstinger7でカード型2カラムにする方法をご教授いただけないでしょうか??!!

  10. まさやn より:

    stinger7を使用しているのですが、最初からこの記事のレイアウトにあこがれて、色々やってますが全然できません!

    stinger7でこの記事をみても意味ないのでしょうか?

    心の底から、このデザインにしたいんですが、ご教授していただけないでしょうか?

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

PROFILE

Jimon Profile
Jimon
東海地方の大学院生。おしゃれなグッズやiPhone,Macの情報など、人に教えたくなる「これは!」というモノを発信していきます。
お問い合わせ

About


おしゃれな小物とiPhone,Macの情報発信ブログ。
管理人『Jimon』(@jimon_s)がこれは!と思ったアイディア、ニュース、活用術を発信していきます

PAGE TOP ↑