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

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

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

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

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

なにをするの?

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

すべて白塗り

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

#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構造早見表 -トップページ編-

    あとがき

    僕がカスタムする中で、一番思い通りにできる形がこれでした。これからカスタマイズをはじめるよ!という方はぜひ設定してみてください。

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

    jimon


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

    Comment

    1. ミツロック より:

      はじめまして。とてもわかりやすく、参考にさせていただいております。
      質問なんですが、記事一覧でカテゴリごとに背景の色を変えることはできますでしょうか?
      それと、上手く言えないかもしれませんが・・・こちらのように記事一覧の記事全体がボタンのように?するにはどうすればいいんでしょうか?続きを読むというのを消して同じようにしたいと思っているのですが、cssについて全くといっていいほどわからないもので・・・。もし、教えていただけるようでしたらご教授お願いいたします。

    2. ミツロック より:

      返信ありがとうございます。参考サイトまで教えていただいて感謝しております。
      早速、紹介していただいたサイトを参考にやってみます。
      ありがとうございました!

    3. ミツロック より:

      いつも参考にさせていただいております。実際にやってみて感じたんですが・・・header.phpの

      トップページ→「#homemain」
      アーカイブ →「#archivemain」
      記事本文  →「#singlemain」
      その他の部分→「#main」

      と4つに分類するということですが、コードにはsinglemainがなくてmainが2つありますがどちらを変えても問題はないでしょうか?

      • Jimon より:

        ご連絡ありがとうございます。
        < ?php elseif(is_single()) : ?>が記事ページヘの分岐を表しているのでそちらを変更してください。

        記事中のコードも修正致しましたので参照ください。

    4. […] スラッグは「投稿」→「カテゴリー」で作成する時にURL用につける名前って書いてあるやつですね。これは意味もわからずに記入済(笑)このままいきましょう。 問題はここからです・・・。phpを変更していくみたいなんですが、全く分かりません。 が! これまでにカスタムをしてきた中で、これは!ログさんが推奨する「#mainを分岐する」が使えるのかもしれない・・・。 […]

    5. […] Stingerカスタマイズ!導入直後の下準備、まずはじめにこれをやろう!「#ma… […]

    Message

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

    PROFILE

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

    About


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

    PAGE TOP ↑