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

公開日: : 最終更新日:2014/08/17 Stinger, Wordpress ,

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

Photo by:Edyn|Kickstarter

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

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

【関連】Stingerカスタマイズ!あると嬉しいclass,id構造早見表 -トップページ編-

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

完成図

今回のカスタマイズ概要

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

#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も変更する必要があります。

【関連】Stingerカスタマイズ!サムネイルが大きくできないときは.sumboxが原因かも

今回は次の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;
}

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

2カラムになりました

あとがき

画像&タイトルのカードはスタイリッシュでかっこいいですね。ただ僕の場合、背景にも画像をつかっているのでごちゃごちゃして見づらくなってしまいました。
実装する場合は背景色も気にかけてやってくださいね。

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

jimon


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

Comment

  1. […] Stinger3のデフォルトだとやはり野暮ったいので、2カラムのカード式にできないかと情報収集。『これは!ログ』様のこちらの記事を参考にしました。これもなかなか悪戦苦闘しましたが、なんとか形になってよかったです。 […]

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

  3. […] Stinger3カスタマイズ!2カラムのおしゃれ記事一覧をつくろう! […]

Message

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

PROFILE

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

About


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

PAGE TOP ↑