サポート » 使い方全般 » カテゴリー毎にヘッダ画像をCSSで変更したい

  • 解決済 zen73

    (@zen73)


    カテゴリー毎にヘッダ画像をCSSで変更する方法 をみてやってみたのですがヘッダー画像に何の変化もみられませんでした。

    ブログは初めてのことでありphpもcssも全く経験がありませんで、エビスコム著「レッスンブック」を頼りに勉強を始めたばかりの者です。

    どのようにしたら画像を表示できるようになるのでしょうか?。お教え願います。

    ========= header.php ==================================

    <!-- ヘッダー -->
    <div id="header">
    <h1><a href="<?php echo home_url(); ?>">
    <?php bloginfo('name'); ?></a></h1>
    <p id="desc"><?php bloginfo('description'); ?></p>
    
    <?php if(!(is_page('ホーム'))): ?>
    <p id="image"><img src="<?php bloginfo('template_url'); ?>/header.jpg" alt="*" width="760" height="200" /></p>
    
    <!-- ここから追加した部分 -->
    <?php elseif( is_month() ) : // 月別ページの場合 ?>
    <?php else : // それ以外の場合
    $cat = get_the_category();
    $cat = $cat[0];
    ?>
    <div class="cat-<?php echo $cat->cat_ID; ?>"></div>
    <!-- ここまでが追加した部分 -->
    
    <?php endif; ?>
    </div>

    =========== style.css ==============================

    /* ヘッダー */
    div#header h1	{font-size: 1em;
    		margin-top: 0px;
    		float: left;
    		margin-bottom: 3px}
    div#header h1 a	{text-decoration: none;
    		color: #00008b}
    
    div#header p#desc	{font-size: 0.94em;
    			color: #444444;
    			margin: 0;
    			float: right;
    			margin-top: 5px}
    
    div#header	{border-bottom: none;
    		padding-bottom: 0px;
    		margin-bottom: 0px}
    div#header p#image	{margin: 8px 0 0}
    
    /* ここから追加 */
    .cat-1 {
    background:url(Biei1.jpg) no-repeat;
    width: 760px;
    height: 200px;
    }
    .cat-6 {
    background:url(Biei2.jpg) no-repeat;
    width: 760px;
    height: 200px;
    }
    .cat-7 {
    background:url(Biei3.jpg) no-repeat;
    width: 760px;
    height: 200px;
    }

5件の返信を表示中 - 1 - 5件目 (全5件中)
  • <?php if(!(is_page('ホーム'))): ?>
    <p id="image"><img src="<?php bloginfo('template_url'); ?>/header.jpg" alt="*" width="760" height="200" /></p>
    
    <!-- ここから追加した部分 -->
    <?php elseif( is_month() ) : // 月別ページの場合 ?>
    <?php else : // それ以外の場合
    $cat = get_the_category();
    $cat = $cat[0];
    ?>
    <div class="cat-<?php echo $cat->cat_ID; ?>"></div>
    <!-- ここまでが追加した部分 -->

    ということで

    <?php if(!(is_page('ホーム'))): ?>
    「ホーム」以外のときの処理です。
    よって、ホーム以外では
    <p id="image"><img src="<?php bloginfo('template_url'); ?>/header.jpg" alt="*" width="760" height="200" /></p>
    となります。

    意図した内容がどういうものかわかりませんが、提示いただいたソースから察すると、
    <?php if(!(is_page('ホーム'))): ?>

    <?php if((is_page('ホーム'))): ?>
    よすれば良いのかな?という気がします。

    トピック投稿者 zen73

    (@zen73)

    Kevexさん、ありがとうございます。

    <!– <?php if(!(is_page(‘ホーム’))): ?> –>
    <?php if((is_page(‘ホーム’))): ?>

    としましたところ、以下のようなエラーになってしまいました。

    Parse error: syntax error, unexpected $end in /home/sites/chicappa.jp/users/chicappa.jp-zen73/web/k5s/wp-content/themes/chapter6/header.php on line 53

    <!-- -->はhtml用のコメントアウト方法なので、この間に書かれているphpのコードはそのまま実行されてしまいます。なのでif分が2つになってしまってエラーが発生しているのでこの書き方は間違っています。

    あと、kvexさんのおっしゃっていることもあながち間違いじゃないのですが、<!-- ここから追加した部分 -->を見る限り空のdivを作成しそこにカテゴリごとの画像を配置しようとしているようです。

    ですので、まずは

    やってみたのですがヘッダー画像に何の変化もみられませんでした。

    に関して・・・
    1.もちろんkvexさん曰く「ホーム以外のときの処理」なので、ページ名「ホーム」以外では反映されませんよ。
    2.さらに<?php elseif( is_month() ) : // 月別ページの場合 ?>なので、月別ページの場合でも反映されませんよ。

    上記から考えると・・・

    ページ名が「ホーム」で、かつ月別ページではなく、かつカテゴリーIDが取得できるページの場合のみカテゴリー別のヘッダー画像が表示される(もちろんcssで指定している場所に画像があることが前提です)ということになると思います。

    こんにちは、
    どのようなテーマをお使いか解らないので、確たる事は言えないのですが

    ワードプレスでは、body エレメントに body_class()という関数が使えます
    (テーマファイルによっては、使っていない場合もあります。その場合は、自力で追加しましょう)

    例えば以下のようなクラスを自動的に設定してくれます。

    <body class="archive category category-blog category-117 ">

    category-blog 等カテゴリ名のついたクラスが、自動付与されるのでこれをうまく利用すれば、CSSだけで、カテゴリに対応した画像を表示できると思います。

    テンプレートは、

    <?php if(!(is_page('ホーム'))): ?>
    <p id="image"><img src="<?php bloginfo('template_url'); ?>/header.jpg" alt="*" width="760" height="200" /></p>
    
    <!-- ここから追加した部分 -->
    <?php elseif( is_month() ) : // 月別ページの場合 ?>
    <?php else : // それ以外の場合
    $cat = get_the_category();
    $cat = $cat[0];
    ?>
    <div class="cat-<?php echo $cat->cat_ID; ?>"></div>
    <!-- ここまでが追加した部分 -->
    
    <?php endif; ?>

    を以下のように書き換えて

    <p id="myimage" style="width:760px;height:200px;"> </p>

    スタイルシートには以下を記述します。表示が必要なカテゴリ分スタイルを指定します

    .category-カテゴリ名 p#myimage {
    background:url(Biei1.jpg)!important;
    }

    テスト用のスタイル指定なので、うまくいったときには、!importantを出来るだけ外してください。

    試していないので、うまくいかないときには許してください

    トピック投稿者 zen73

    (@zen73)

    kvexさん、shokun0803さん、nobitaさん、アドバイスありがとうございました。

    kvexさんにご指摘いただいてif文の構成を考え直した結果、カテゴリー毎にヘッダー画像が指定の画像に変化することが確認することができました。

    ただ、2点の不具合が残っていますので、新しいスレッドで質問させていただくことにしてこのスレッドは閉じさせていただきます。

    nobitaさんがお教えくださった方法は、現在の方法が終了したときに確認させていただきます。

5件の返信を表示中 - 1 - 5件目 (全5件中)
  • トピック「カテゴリー毎にヘッダ画像をCSSで変更したい」には新たに返信することはできません。