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

関連記事

Stinger-minimum

Stinger3子テーマ「Stinger-minimum」のスマホテーマ対応をしました!

今回このスマホ用「Stinger-minimum」を作りました。 子テーマ「Stinger-min

記事を読む

top_niji

ブログのデザインを変更しました!そのとき考えたこと思ったこと

実は元のデザインを最新のStingerのバージョンに対応しようと思っていたのですが、なんだか新しいの

記事を読む

トップページキャプチャ

Stinger3の子テーマ「Stinger-minimum」を2/11リリースします。【予告】

タイトルで言い切ってしまっていますが、近日中にStinger3の子テーマ「Stinger-minim

記事を読む

image

少しの手間をかけて抜粋部分を表示する。だってそれは読んでほしいから!

この抜粋部分に意図しないものが入ってしまい読んでほしいブログが残念な感じにならないように。 抜粋は

記事を読む

piyo

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

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

記事を読む

コメントを残す

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年5月
    « 12月    
    1234567
    891011121314
    15161718192021
    22232425262728
    293031  
電子書籍ストア BookLive!
PAGE TOP ↑