WordPressでカテゴリーごとにデザインを変更する方法【Stingerカスタマイズ】

カテゴリー:WordPress    |    タグ:

WordPressでカテゴリーごとにデザインを変更する方法【Stingerカスタマイズ】

表題についてお問い合わせを頂きましたので、ブログにてご返答させて頂こうと思います。

今回は、エントリーがズラーっと並んでいるページ(1番初めに表示されるページhome.php)をカスタマイズしていきます。

また、投稿者でのデザイン変更なのかな?と思ったのですが、文脈からカテゴリごとに。。で大丈夫かな?と思ったのでカテゴリでここから進めていきたいと思います。もし違っていましたらまたご一報くださるとありがたいです。

カテゴリーごとにデザインを変更する

幾つか方法があります。
パッと思いついたのがこの2つ。

  • カテゴリ毎にテンプレートを呼び出す
  • デザインを変更したい箇所にカテゴリIDクラスをつけてCSSで装飾する

で、今回は装飾だけで大丈夫そうなので、下のデザインを変更したい箇所にカテゴリIDクラスをつけてCSSで装飾する方法を書きます。

① カテゴリIDを調べる

まずはカテゴリのIDを調べましょう!
これは、メニューのところにあるカテゴリーで調べることができます。

catID

今回、「WordPress」というカテゴリを調べました。
このカテゴリは48というIDであることがわかります。

これはあとで、CSSを書くときに必要になるので、どのカテゴリがどのIDなのかをメモしておいてください。

② home.phpにコードをかこう!

Stingerの構造についてはここでは割愛しますが、今回は、home.phpのサムネイルや抜粋があるところをの背景を変更していくカスタマイズ。

home.phpを何かエディタで開き、<div class="entry>の部分を以下に変更します。

この上記のコードをそのままコピペ!!

すると、HTMLのコードがこんな感じになります。

クラスにcatID-48が加わりました。

あとは、CSSで装飾すればOK!

ざっくり完成図

catID1

上記の図の上の部分がカテゴリID 48 のところです。
わかりやすくCSSで背景をグレーにしてみました。

ちょっとざっくり過ぎてアレですが、このあたりはお好みでCSSで変更してみてください。

さいごに

かなりダダダーッツと書いたので、わかりづらいかもしれません。。。。が
これがお役に立てれば幸いです。

ADVERTISEMENT

  • Pocket
  • このエントリーをはてなブックマークに追加

published:2014/07/30    Written by:
カテゴリー:WordPress,      タグ:

最後まで読んでくれた方へ。

閲覧頂きありがとうございました!
お気に召しましたら是非RSS登録やフォローをお願いします!

Twitter

関連記事

piyo

子テーマ「Stinger-minimum」の全貌を備忘録+CSS3のtext-shadow

子テーマ「Stinger-minimum」をリリースしてから早いくとせ。。経ちました最近ブログにお問

記事を読む

memotonewsp

【Stinger3カスタマイズ】だいぶ落ち着いたのでこのブログで変更したところを書き留めておく備忘録 #2

前にも書いたのですが、書き忘れていたものがあったので第二弾。 前のものはこちら、【Stinger3

記事を読む

ohajiki

ol要素をCSSで装飾(デザイン)する方法を実践したみたので備忘録

サイドバーの所に、WordPress Popular Postsを使ってランキングを表示させてみた際

記事を読む

mac

WordPressの自動挿入されるpタグを削除する方法

WordPressにはpタグを自動挿入してくれる機能(auto paragraph)というものがあり

記事を読む

h2

ブログの見出しデザインに困ったのでこのジェネレータを使ってみた『 CSS見出しジェネレーター | Web道』

このブログは、Stinger3というテーマをもとにゴニョゴニョ…カスタマイズしているのですが、見

記事を読む

コメントを残す

2件のコメント

  • ミツロック
    2014年7月31日 2:40 AM

    とてもとても参考になりました。感謝仕切りです。これからも参考にさせていただきます。ありがとうございました。

  • mami
    2014年7月31日 6:39 AM

    ミツロックさん
    コメントありがとうございます(o´∀`o)

    このかたちで大丈夫そうでよかったです!
    お役に立てたようでとても嬉しく思います。

1件のトラックバック

ADVERTISEMENT
nijisan

Written by niji_sansan

生まれ落ちた地は神戸。
鉄成分入ってるものに興味あり!
キイロイトリが好き!
感動すると「ほぅ」と言いますw

  • 2017年7月
    « 12月    
     12
    3456789
    10111213141516
    17181920212223
    24252627282930
    31  
電子書籍ストア BookLive!
PAGE TOP ↑