Stinger3カスタマイズ!カード型記事一覧で差をつけよう!

公開日: : 最終更新日:2014/11/02 Stinger, Wordpress ,

Stinger3カスタマイズ!カード型記事一覧で差をつけよう!

無料テーマ「最強」とも言われているwordpressテーマ「Stinger」。
使われている方も多いのではないでしょうか。
このサイトでもStingerを使わさせて頂いています。

とても人気があるテーマなのでカスタマイズ記事もいろいろな方が書かれています。
テーマのカスタマイズって本当に楽しいですよね。

今回は記事一覧をカード型にしてトップページの見た目をがらりと変えていこうと思います。

完成形はこちらです。

完成形はこちら

(注意: 僕はPHPやCSSについては学び始めて数ヶ月の初心者です。掲載しているコードは実装していただければ「動く」コードですが、キレイに最適化された「完璧」なコードではありません。間違いや修正候補等ございましたらコメント欄に記載していただけると非常にありがたいです。)

今回のカスタマイズ概要

Stingerの構造

どこを変えていくのか見る前に、stingerの構造をざっくり見ていきます。
構造がぼんやりとでも頭に入っていると今後のカスタマイズが一層楽しくなりますよ。

Stingerのトップページは大きく「header」「home」「sidebar」「footer」の4つで構成されています。
今回主に変更していくのは「home」の部分です。
なお後述しますがStingerでは「home」の大元になる「#main」をトップページ以外でも使っています
以下ではトップページの場合の構造を説明していきます。

Stinger構造

では「home」部分をさらに詳しく見ていきましょう。
サイトの詳しい構造はGoogle Chromeを使っている場合、右クリック→「要素を検証」から確認できます。

要素を検証って?

Google Chromeに標準装備されている開発者向けツール。
見ているサイトでどのようなHTMLやCSSが使われているのかを簡単に確認できます。

この記事では「どのidの中にどのidやclassがある」のかをわかりやすくするため、範囲の大きさはデフォルメしています。
正確な大きさが知りたい場合は要素の検証を活用してください。

まず「home」部分の大元になる「#main」は「sidebar」部分と一緒に「#wrap」の中の「#wrap-in」に入っています。

#mainは#wrap,#wrap-inの中にあります

さらに「#main」の中には記事一覧全てをカバーする「.post kizi」が入っており、さらにその中にひとつひとつの記事を表す「.entry」が入っています。

記事部分の構造

ひとつの記事を表す「.entry」はサムネイルを表す「.sumbox」と記事タイトルや記事の抜粋などを表す「.entry-content」で構成されています。

.entryの中身

「.entry-content」をさらに分割していくと、タイトルを表す「.entry-title-ac」、カテゴリーとタグを表す「.blog_info contentsbox」、本分の抜粋を表す「.dami」、続きをみるボタンを表す「.motto」に分かれます。

.entry-contentの中身

大まかな構造は以上です。

カスタマイズ内容

では構造を踏まえた上で今回のカスタマイズ内容を見ていきます。

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

#homemainに変更

次に「#homemain」の背景色と枠線を消去します。

背景色、枠線消去

最後に「.entry」の背景色を変更し、シャドウなどでカードのような見た目に整えて今回のカスタマイズは終了です。

カード型にする

カスタマイズ手順

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を分けられました。

※追記
サイドバーの追尾広告を使用している場合、さらにbase.jsを書き換えないと広告ウィジェットが動かなくなってしまいます。追尾広告を使われている場合はbase.jsに「広告のフロート」部分を

修正前:var main = jQuery('#main'); // メインカラムのID
修正後:var main = jQuery('#homemain'); // メインカラムのID

と書き換えたものを追加してください。

Step2 #homemainのCSSを設定

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

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

この状態でサイトを見てみるとこのようになります。

背景色消去後

画像をよく見ると記事タイトル部分の背景色が白になってしまっています。

タイトルしただけ背景色がついたまま

このままでは「.entry」の背景色を変更した際に、タイトル部分だけ違う色になってしまうのでここも変更しておきましょう。
以下のコードをCSSに追記してください。

/*---------------------記事タイトル背景色の透過------------*/
#homemain .entry-title-ac{
	background-color: transparent;
}

Step3 .entryのCSSを変更

次に「.entry」の背景色を変更し、見た目を整えていきます。
CSSに以下のコードを追加してください。

/*---------------------.entryの見た目を整える-------------------*/
#homemain .entry{
	background-color: #ffffff; /*背景色 */
	border:1px solid #cccccc;
	width:590px; /*カードの幅 */
	padding:20px;

	-moz-box-shadow: 0px 3px 3px rgba(0, 0, 0, .4); /*シャドウ */
    -webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, .4); /*シャドウ */
    box-shadow: 0px 3px 3px rgba(0, 0, 0, .4); /*シャドウ */
}

背景色やシャドウはご自身で調整して好みのものに仕上げてください。
今回はこちらのサイトのものを参考にさせていただきました。
(Web Design RECIPES)

以上で今回のカスタマイズは終了です。このようになっていれば成功です。

完成!

まとめ

今回はシンプルに浮いているようなデザインにしましたが、CSSを少し変更するだけで見た目を大きく変えることができます。
ぜひご自身でお好みのものを見つけてください。

さらに全体をクリック可能にしたいよ、という方はこちらをお読みください。
【関連】どこを押しても記事ページに移動!記事一覧全体をリンク化しよう

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

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

Comment

  1. […] Stingerカスタマイズ!カード型記事一覧で差をつけよう! […]

  2. いてまえ より:

    関連記事と新着記事の一覧も同様にカード型にするには、
    どうやればよいですか?

  3. ふともも より:

    記事の切り分けもやりたかったので助かりました、
    なによりstingerの仕組みがすごくわかりやすく解説してあったのですごく助かりました
    (自分はhtmlすらまともにかけない素人なので)

    • Jimon より:

      コメントありがとうございます^^
      そういって頂けるとありがたいです。

      お役に立ててなによりです

  4. shu より:

    はじめまして

    前からやりたかった「記事一覧をカード型にする方法」をわかりやすく説明してあるページにたどり着きました。
    記述通りに修正したところキチンと動作しました

    しかし、stringer3のトップページのスクロール広告が動作しなくなってしまいました。
    固定ページや記事のページだと動作するのですがトップページだけ動作しません

    原因がわかりますでしょうか?

    • Jimon より:

      ご報告ありがとうございます。
      base.js内を編集することで追尾広告が使えるようになります。詳細は記事内のStep1に追記させていただきました。

Message

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

PROFILE

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

About


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

PAGE TOP ↑