サポート » 使い方全般 » CSSで指定した背景色を、カテゴリごとに読み分ける設定をしたい

  • 解決済 yzk

    (@yzk)


    おはようございます、大変お世話になっております。
    フォーラムのバックナンバーと、皆さまのあたたかなアドバイスのおかげで、WPのサイトが仕上がってきており、本当に感謝しております。
    本日はもうひとつ教えていただけましたら嬉しいです。
    どうぞよろしくお願い致します!

    教えていただきたいのは、CSSとカテゴリーの記載をベースにして、サイトの背景色を分ける方法です。

    具体的な説明をお許しください。
    サイトの視覚的な見やすさ……今、どの特集の中にいるのか分かりやすくするため……に、特定のグループ(カテゴリ)の時に、背景色を変えたいと考えています。

    具体的には、

    カテゴリworkshopの中にいる時はAという背景色をリンクして
    カテゴリbooksの時にはB
    カテゴリstoreの時にはC
    それ以外の時には背景色なし

    という風な指定をCSSで書いて、そのカテゴリが選択された時に、CSSで指定したclassの背景を読ませたいと考えています。
    読み分ける必要があるのは背景色だけですので、背景色を違えたスタイルシートを複数作って分岐設定で読み分ける方法ではなく、1枚のスタイルシートの中で分けた複数のclass指定を、カテゴリごとに読み分けるやり方を希望しています。

    いろいろ調べましたら、フォーラムの
    http://ja.forums.wordpress.org/topic/1589?replies=6
    (カテゴリごとにヘッダーを使い分ける)

    の記事の考え方が、イメージにいちばん近いと思いましたので、やってみました。
    そして結果、最後の式の設定と場所が分からないので、ぜひ教えてください!
    よろしくお願いします。

    まずやったことは、メインCSSファイルの背景色を想定カテゴリごとに分けたことです。
    背景を設定する項目のCSSをコピペで追加・分岐し、以下のようにclass分けをしました。

    body{
    margin: 0;
    background: url(#) #fff center top;
    text-align: center;
    }

    body-books{
    margin: 0;
    background: url(images/bg/maki.gif) #fff center top;
    text-align: center;
    }

    body-workshop{
    margin: 0;
    background: url(images/bg/drop2.gif) #fff center top;
    text-align: center;
    }

    貼られたリンク画像が実際に読み出せる(リンク切れになっていない)ことも確認しました。

    次に読み出し先の設定なのですが、最終的に

    〜のカテゴリが指定された時には、CSSで指定された背景色の〜class指定を読み出す

    という式を書いて反映させたいと思っています。
    そして、ここからがいろいろ分からないので、ぜひ教えてください。
    よろしくお願いします。

    参考にしたフォーラムの記事
    http://ja.forums.wordpress.org/topic/1589?replies=6

    私が最初に示したのはこんなに複雑なことをやる内容ではなくて、

    (1)
    <div class=”cat-<?php echo $cat->cat_ID; ?>”></div>

    こう記述しておくだけで実際には
    (2)
    <div class=”cat-1″></div>
    などのように変換されて表示されるので、あとはcssで

    (3)
    .cat-1 {
    background:url(“img/header.gif”) no-repeat;
    }
    を必要なだけ記述でよろしいのでは?ということです;)

    という箇所がありました。(番号は私がふりました)
    (3)は済みましたので、次に(1)(2)の箇所ですが、フォーラムの方はヘッダー画像を変えたいというご依頼でした。
    私の場合は背景色を変えるのですから、書き込み先はsingle.phpなどのファイルでよいのでしょうか。

    single.php, index.php, search,phpにそれぞれ

    <body>
    <!– container Start –>
    <div id=”container”>
    <!– /container Start –>

    という式がありますが、上の(2)(3)に当たるところは、ここなのかなあと思っています。

    またheader.phpにも

    <link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); ?>” type=”text/css” media=”screen,tv,print” />

    という記載があります。

    複数のスタイルシートをがっつり読み分けるのなら、ここで分岐設定をした方がよいと、テンプレート制作者の方にアドバイスをいただきました。
    でも今回の場合、スタイルシートは1枚だけで、その中のclass指定を読み出すので、該当箇所はここではないのかなあ……と思っております。

    そこで重ねてご質問です。
    私の望むやり方の場合、式を書き込むファイルと場所はどこになるのでしょうか? 
    私の知識の限界線は、PHPの手前で止まっていますので、教えていただけますと幸いです。

    また、自分では合っていると思っているのですが、やり方全体の方向性が間違っていましたら、それもぜひ教えていただけますと幸いに思っています。
    どうぞよろしくお願い致します。

12件の返信を表示中 - 16 - 27件目 (全27件中)
  • umbrella_processさん、おはようございます。

    レスをいただき、ありがとうございました!
    レスを拝読したかぎりですと、私の方の操作が、umbrella_processさんのイメージと違っていたようです。具体的にはソースの削り方や、ソースを足す位置などです。

    いただいた2つのアドバイスを参考に、もう一度丁寧にやってみますね。
    どうもありがとうございました!

    そして重ねて、じかにソースも見ていただけない状況で、皆さまに、このようにアドバイスをいただいていること自体が本当にありがたいです。
    アドバイスを下さる側にとっては、まさに手探りの状況だと思いますし。
    本当にありがとうございます。

    では、再チャレンジしたいと思います! 作業をしたらまたご報告させてください。
    どうぞよろしくお願い致します。

    umbrella_processさん、こんにちは!

    ご返信が遅くなりまして恐縮です。
    さっそく作業をやってみました。その結果、ぶじコードの設置が終わりましたのでご報告させてください。

    行いました作業は、以下の通りです。まずはご報告から申し上げます。

    いただいたアドバイス
    1. <body>がある全てのテンプレートから<body>を削除してください。
    2. <div id=”container”>は消してはいけません。

    にしたがいまして、

    single.php, index.php, page.php,archive.php, serach.php
    の5ファイルから
    <body>
    </body>
    を取りました。
    (この時点で、表示は「がったん」とおかしくなっていません)

    次にした作業です。

    footer.phpファイルのいちばんうしろに、</body>をつけ加えました。
    この段階でも、レイアウトは崩れていません。

    ちなみに、

    これもよく分かりませんね…。
    通常footer.phpの末尾は</html>であると思いますが。
    特殊な作りのテーマなんでしょうか。

    といただきましたが、やはりいちばん後ろは</div>です。
    上記5ファイル……single.php, index.php, page.php,archive.php, serach.phpのいちばん後ろが</html>となっていました。

    footer.phpのソースは、ちなみにこんな感じです。

    <div id=”footer”>

    <!–address–>
    (*ここにリンクが入っています)
    <!–/address–>

    <!–copyright–>
    <div id=”copyright”>
    Copyright (C) 2009 “><?php bloginfo(‘name’); ?> All Rights Reserved.  
    当サイトのテキスト・画像等すべての転載転用ならびに商用販売は著作権法により禁じられています  

    <!–この行は削除しないでください。–>
    <?php wp_footer(); ?>
    <!–/この行は削除しないでください。–>
    </div>
    <!–copyright–>

    </div>
    </body> ←付け加えました

    こんな感じです。

    最後に、

    headrer.phpのファイルに、いただいた式

    <body <?php body_class(); ?>>
    を加えてみました。
    表示を見てみましたが、この段階でも表示は「がったん」となっていません。

    やった!!!

    やはり、私がコードを書く位置を間違っていたみたいです。
    まずはここまで作業が終わりましたので、ご報告を申し上げました。

    そして、コードがどこに吐きださているのかな……? といろいろ見てみましたが、位置がいまいち分かりません。
    すみません初心者なものですから、吐き出されたコードを探すのにも時間がかかりそうです。恐れ入りますが、今しばらくお待ちください。

    そして、重ねてありがとうございます。
    おかげさまで、まずは1つ前進です!

    なるほど、少し変わったテンプレートですね…
    タグを追加したのであれば、<body>タグにclassが全ページ追加されているはずですがいかがでしょうか?

    umbrella_processさん、こんにちは!

    お世話になっております。レスをいただきまして、ありがとうございました。
    ホントです。きっと、変わったテンプレートなのですよね(笑)。

    そして……。
    umbrella_processさんのおっしゃっている意味が、分かりました。
    <body>タグを見ればいいんですね?

    ためしにbooksというページの、投稿(post/single)のソースを見てみました。
    そうしたら、ありました。多分これだと思います。

    <body <?php body_class(); ?>>

    の式を加えたらしきところに、

    <body class=”single postid-513 logged-in”>

    が吐き出されていました。
    ポストの513番という意味ですね?
    我々のお目当ての式は、これで宜しいでしょうか。

    ちなみに以前umbrella_processさんが例として挙げてくださったソース(こんなのが吐き出されるよ)は、

    <body class=”single postid-3 category-books”>

    でしたよね。

    まずはご報告をお許しください!

    コンバンハ! 
    本当にひとつひとつでスミマセン。
    次のことが考えられるようになりました。

    無事セッティング段階まで成功しましたので、次は教えていただいていた

    そこで、CSSをこのように指定すればカテゴリごとに表示が変更できますね。

    .category-books #container {

    }
    ここまで完了したら投稿の対応を追加します。
    初期では投稿の場合の<body>タグは次のように表示されるはずです。

    <body class=”single postid-3″>

    つまり、カテゴリは含んでいません。
    しかし、body_class()に追加で表示してほしいクラス名を追加することができますので、
    <body <?php body_class(); ?>>の部分を次のコードに変更してください。

    <?php
    if( is_single() ){
    $cat = get_the_category(); $cat = $cat[0];
    $class = “category-” . $cat->category_nicename;
    }
    ?>
    <body <?php body_class( $class ); ?>>
    shokun0803さんのコードを応用したものです。

    にチャレンジしたいと考えております。
    これはつまり、二つのことをする必要があると理解しました。
    (間違いだったら教えていただけると嬉しいです。よろしくお願い致します)

    (1)式を入れ替える

    header.phpの該当箇所を

    <?php
    if( is_single() ){
    $cat = get_the_category(); $cat = $cat[0];
    $class = “category-” . $cat->category_nicename;
    }
    ?>
    <body <?php body_class( $class ); ?>>

    に置き換えればいいのですよね?
    PHP素人の私は、おそらくこれを「もしAのカテゴリの時は、BのCSS(背景)を読み出す」という式にしたいのだと想像しています。
    そして「if」とついているということは、ここが一種の分岐設定になっているのでは? と想像します。
    (PHPが日本語みたいに滑らかに読めないので、想像です。)
    「もしAを」をそもそも入れる必要があるのか? …..やっぱりあるよね……。といった感じで、今でも五里霧中です。
    もしよろしければ、どこの部分にAとBを入れたらいいのか教えていただけると嬉しいです。
    一生懸命考えたのですが、分かりませんでしたので、重ねてどうぞよろしくお願い致します。

    (2)
    同時にすることは「BのCSSを読み出す」のBの方のセッティングで、それがこの部分

    .category-books #container {

    }

    だと想像しています。
    それに対して現在の私のCSSは

    body-books{
    margin: 0;
    background: url(images/bg/maki.gif) #fff center top;
    text-align: center;
    }

    こうなっています。
    どこに、背景をセッティングするのが正解でしょうか?
    たとえば「カテゴリーbooksの時は、#containerの部分にBを表示する……みたいな理解で、こんな感じ

    category-books(←ここは、こっちでつけているカテゴリ名ではなく、最初の式をセッティングしたことにより吐き出された、WP的に正式なカテゴリ名を入れる、で正解ですか?) #container {
    margin: 0;
    background: url(images/bg/maki.gif) #fff center top;
    text-align: center;
    }

    の理解でいいですか?

    あらぬ方向に走っていってしまっておりましたら、止めていただけると嬉しいです。
    どうぞよろしくお願い致します。

    それでは、まずは一度投稿してみます!
    お忙しい中、いつも本当にありがとうございます。

    ついしん+ わたくしごとなのですが、今日は仕事で500キロ弱運転をいたしました。
    (トラック運転手さんとかではないのですが……^-^)
    休憩の合間にセッティングにチャレンジしたのですが、おかげさまで表示がきちんとできた瞬間は、感動でした。

    <body <?php body_class( $class ); ?>>

    <?php
    if( is_single() ){
    $cat = get_the_category(); $cat = $cat[0];
    $class = "category-" . $cat->category_nicename;
    }
    ?>
    <body <?php body_class( $class ); ?>>

    に入れ替える。何も変えなくていいです。
    is_single()とget_the_category()の意味はCodexで調べてみてください。

    こんにちは、大変お世話になっております。

    教えていただいた設定を何度かやってみて、まだ背景を表示する手前で止まっています。
    (覚えが遅くてスミマセン……)
    ここまできたら何としてでも表示したいので、ぜひ教えてください!
    よろしくお願い致します。

    現在済んでいる作業と、不明点をまとめさせてください。

    現在済んでいる作業は2つです。

    (1)single.php, index.php, page.php,archive.php, serach.phpの5ファイルから<body></body>タグの位置を(それぞれheader.php, footer.phpへ)ずらし、

    header.phpの
    <body <?php body_class( $class ); ?>>

    <?php
    if( is_single() ){
    $cat = get_the_category(); $cat = $cat[0];
    $class = “category-” . $cat->category_nicename;
    }
    ?>
    <body <?php body_class( $class ); ?>>

    に入れ替えました。その結果、class名はちゃんと吐き出されています。

    (2)基本のCSSファイルのの式を変えました。

    つまり以前は
    body{
    margin: 0;
    background: url(#) #fff center top;
    text-align: center;

    でしたが今は

    category-books #container {
         
margin: 0;

    background: url(#) #fff center top;

    text-align: center;

    }

    となっています。#の部分には、ちゃんとリンク先が入っています。

    ここで質問があります。
    たとえば、とあるファイルのソースを覗いてみると、クラス名が

    <body class=”single postid-513 logged-in category-books”>

    と吐き出されています。
    おなじファイルのソースを、アーカイブ表示から覗いてみると、クラス名は

    <body class=”archive category category-books logged-in”>

    と吐き出されています。
    そのページをシングルとして覗くのか、アーカイブとして覗くのかの差ですから、この表記は正しいと思います。

    そしてこのクラス名をCSSに反映させたいのだと思いますが、その場合のCSSの表記は

    category-books #container {
       
margin: 0;

    background: url(#) #fff center top;

    text-align: center;

    }

    archive category category-books #container {
         
margin: 0;

    background: url(#) #fff center top;

    text-align: center;

    }

    などが正しいでしょうか?

    それとも、キホン<body class=……>と吐き出されているので、

    body category-books{
    margin: 0;
    background: url(#) #fff center top;
    text-align: center;

    などとなるのが正しいですか?
    それとも両方間違っているでしょうか。

    classはしっかり吐き出されていますので、CSSのclass設定のところが間違っている気がします。
    せっかくここまで設定しましたから、正しいclassを設定できると嬉しいです。
    お忙しいところとは思いますが、どうぞよろしくお願い致します!

    yzk(投稿者)です。
    ひとつ前の投稿に加え、不明点をもう一度まとめさせていただきましたので、どなたかご教示願えますと嬉しいです。

    各ページ(single.php,archive.phpなど)のソースとして

    例1)
    <body class=”single postid-513 logged-in category-books”>

    例2)
    <body class=”archive category category-books logged-in”>

    と吐き出されてくるクラスと、CSSの指定の関係がよくわかりません。

    この場合、ベースとなるCSSの背景指定(もともとデフォルトの背景が1つ設定されていました)の

    body{
    margin: 0;
    background: url(#) #fff center top;
    text-align: center;

    だったものの

    body{

    の部分をどう設定してあげれば、上記のようにソースとして吐き出されたクラスの背景(#の部分)を読み出せるのでしょうか。

    なお、それに際して

    <body class=”archive category category-books”>

    そこで、CSSをこのように指定すればカテゴリごとに表示が変更できますね。

    .category-books #container {

    }

    とアドバイスをいただいているのですが、このシンプルなはずのことがなかなか難しく、反映に至っていません。
    (ちなみに、アタマの「.」などを忘れたりはしていないのを確認しました。)

    どなたか、<body class=……>とCSS記載の関係が解る方、アドバイスをいただけると嬉しいです。
    どうぞよろしくお願い致します。

    ソースが<body class="archive category category-books logged-in">となっている場合、
    「archive category category-books logged-in」というひとつのクラス名なのではなくて、
    「archive」「category」「category-books」「logged-in」という4つのクラス名が設定されているということになります。

    これ以上はWordPressの使いかたを越えますので…
    ぜひ「css 子孫セレクタ」で検索してみてください。

    こんにちは、大変お世話になっております。

    上記内容に従って、それぞれのページのソースの吐き出され具合を見てみました。
    その結果

    <body class=”page page-id-1726 page-template page-template-default logged-in”>

    たった1枚のページですらこのカテゴリ数です。
    総ページ数(ポスト数)は150以上ありますから、このいちいちにこの調子でclass指定をするのは、大変現実的ではないと自覚しました。

    また念のためCodexで「CSS 子孫セレクタ」で検索してみましたが、ヒットはありませんでした。
    googleでもほぼ同様です。
    初心者には大変厳しい検索結果です。

    大変残念ですが、この方法はどの方向から見ても現実的ではないので、あきらめます。
    いろいろアドバイスをいただきまして、どうもありがとうございました。

    たった1枚のページですらこのカテゴリ数です。
    総ページ数(ポスト数)は150以上ありますから、このいちいちにこの調子でclass指定をするのは、大変現実的ではないと自覚しました。

    非常に勘違いされているようですね。

    ちなみに、

    <body class="page page-id-1726 page-template page-template-default logged-in">

    この吐き出された結果は、以前の、

    <body class="single postid-513 logged-in category-books">

    とずいぶん変わってしまいましたね。カテゴリーが吐き出されていないようです。何かコードを書き換えましたか?ちなみに、「ページ」にはカテゴリーがないのでカテゴリーは吐き出されないとは思いますが・・・「ページで」という指定はありましたっけ?

    で、カテゴリのクラスが吐き出されていることを前提に説明しますと、cssは単純に

    body.category-books {
      background:#300;
    }

    などとすればカテゴリー「books」が適用されている記事が表示されているbody全体の色が変わりますね。その下のdivだけを変更したいなら、

    body.category-books div#container {
      background:#300;
    }

    とすれば良いはずです。(分かりやすくするためcssの記述を細かく書いています。省略形などはご自由に)

    もちろん、カテゴリstoreの時の指定も、

    body.category-store div#container {
      background:#030;
    }

    と続けて書けば良いでしょう。bodyタグにcategory-××が吐き出されていないとどれも適用されないので、このコードではページで適用はされないと思います。

    また念のためCodexで「CSS 子孫セレクタ」で検索してみましたが、ヒットはありませんでした。
    googleでもほぼ同様です。

    cssの基礎の問題です。つまりWrodPressなどのシステムを使っているか否かに関わらず、ホームページを作成する上で必要となる知識です。ちなみにCodexには載っていません(当然ですが・・・)
    ホームページ作成の初心者サイトなどはいくらでもありますので、探して見ましょう。あまり特定のサイトを紹介もできないので、Googlの検索結果でも貼っておきます;)

    あきらめないでください、もったいない!
    投稿の場合はこれまでのカスタマイズでカテゴリーがclassに出力されるようになったはず。
    ページの場合はページテンプレートをいくつか用意すれば、それぞれデザインを変えることはできますよ。
    たとえば、page-template-defaultというクラス名はデフォルトのページテンプレートを使っていることを意味しています。
    WordPressページテンプレートを作ってみよう
    ぜひチャレンジしてみてください。

    また、「CSS 子孫セレクタ」でググればたくさん出てくると思いますよー。
    shokun0803さんも仰っているように、CSSの基礎でここを飛ばしてはサイト制作はできません。
    調べてみてくださいね。

12件の返信を表示中 - 16 - 27件目 (全27件中)
  • トピック「CSSで指定した背景色を、カテゴリごとに読み分ける設定をしたい」には新たに返信することはできません。