Stinger3カスタマイズ！導入直後の下準備、まずはじめにこれをやろう！「#mainを分岐する」

Stingerのカスタマイズ楽しまれてますか？
カスタマイズをより楽しく進めるためにも導入直後の下準備は大切です。

今回はStingerをカスタマイズしていく上できっと役立つ下準備をご紹介します。
僕もまだまだ初心者ですが、これからカスタマイズをはじめる初心者の方にはぜひ試していただきたいです。

なにをするの？

デフォルトのStingerではトップページ、アーカイブ、記事本文に至るまでページのメインとなる部分はすべて白塗りになっています。

この部分のクラス構造をみると、すべてのページで「#main」が割り当てられています。

この#mainがCSSで白くなるよう設定されているので、真っ白な背景になっているんですね。

このままでも十分見やすいんですが、カスタマイズに凝ってくるとトップページだけ別の色にしたり、記事と記事の間に隙間を開けたりといろいろしたくなってきます。そんなときすべてが同じ「#main」で管理されていると個別に変更することができないんです。
そこで今回は「#main」をトップページ、アーカイブ、記事本文ページで分岐してしまいたいと思います。

カスタマイズ内容

header.phpをカスタマイズ

ではカスタマイズしていきます。「#main」の指定はheader.phpで行われているのでここを変えていきましょう。

今回は

トップページ→「#homemain」

アーカイブ　→「#archivemain」

記事本文　　→「#singlemain」

その他の部分→「#main」

のように分岐していきます。

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 elseif(is_single()) : ?><!-- 記事ページは#singlemain -->
    <div id="singlemain">
  <?php elseif(is_archive()) : ?><!-- アーカイブページは#archivemain -->
    <div id="archivemain">
  <?php else :?><!-- その他のページは#main -->
    <div id="main">
  <?php endif; ?>
<?php } ?>

これでidを分岐できました。
※スマホ版では分岐しない仕様にしています
※20140721一部修正

CSSを設定

つづいてCSSを調整します。
今の状態だと新しく設定した「#homemain」「#archivemain」「#singlemain」にCSSが設定されていないので、ぐちゃぐちゃの見た目になってしまっています。
以下のコードをCSSの一番下に追加してください。

/*-----homemain再設定------*/
#wrap #wrap-in #homemain {
	float: left;
	width: 550px;
	padding-right: 39px;
	padding-left: 39px;
	padding-top: 20px;
	border: 1px solid #ccc;
	background-color: #FFF;
	border-radius: 4px 4px 4px 4px;
	padding-bottom: 20px;
}

/*-----archivemain再設定------*/
#wrap #wrap-in #archivemain {
	float: left;
	width: 550px;
	padding-right: 39px;
	padding-left: 39px;
	padding-top: 20px;
	border: 1px solid #ccc;
	background-color: #FFF;
	border-radius: 4px 4px 4px 4px;
	padding-bottom: 20px;
}

/*-----singlemain再設定------*/
#wrap #wrap-in #singlemain {
	float: left;
	width: 550px;
	padding-right: 39px;
	padding-left: 39px;
	padding-top: 20px;
	border: 1px solid #ccc;
	background-color: #FFF;
	border-radius: 4px 4px 4px 4px;
	padding-bottom: 20px;
}

#container #wrap #wrap-in #singlemain .post .sumbox02 #topnews div dl dd .basui .motto a {
	font-weight: normal;
	text-decoration: none;
	font-size: 12px;
	color: #666666;
}

#container #wrap #wrap-in #singlemain .post .entry .entry-content .motto .more-link {
	font-size: 12px;
}

#container #wrap #wrap-in #singlemain .post .sumbox02 #topnews div dl dd .basui .motto a:hover {
	color: #FFF;
}

#container #wrap #wrap-in #singlemain .post .entry .entry-content .dami {
	margin-top: -10px;
}

#singlemain .post .sumbox02 #topnews div dl dd {
	padding-left: 130px;
}

#singlemain .post .sumbox02 #topnews div dl dd .motto a {
	color: #666;
}

#wrap #wrap-in #singlemain .post .sumbox02 #topnews div dl dd .saisin {
	background-color: #FFF;
	margin: 0px;
	padding: 0px;
}
#wrap #wrap-in #singlemain .post .sumbox02 #topnews div dl dd .basui {
	font-weight: normal;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 0px;
}
#wrap #wrap-in #singlemain .post .sumbox02 #topnews div dl dd .basui a {
	color: #06C;
	text-decoration: underline;
	font-weight: bold;
}
#wrap #wrap-in #singlemain .post .sumbox02 #topnews div dl dd .basui a:hover {
	color: #900;
}

以上でカスタマイズは完了です。
各ページを個別に設定できるようになるとカスタマイズの幅が広がりますね。

▼#main以外のクラス構造はこちらをご覧ください。
【関連】Stingerカスタマイズ！あると嬉しいclass,id構造早見表 -トップページ編-