ワードプレス

jinテーマ追加cssで自由にカスタマイズ【カテゴリーリスト】

jinテーマ自由にカスタマイズしよう

有料テーマはHTMLCSSなどの知識がなくても、カスタマイズが自由に出来るように設計されていますが、自身のサイトに「オリジナリティを出したい」「もっと細かくデザインしたい」時は、多少の マークアップ言語の知識が必要になってきます。

今回はトップページの色の変更、カスタマイズなど、有料テーマのカスタマイズ機能だけでは出来ない変更方法を紹介します。

追加CSSに記述するコードですので間違ってもテーマ自体のコードは触らないのでサイト自体が壊れる心配はありません。

プル

自分のイメージ通りにカスタマイズ出来るようになると、コーディングや記事を書いていくのも少しずつ楽しくなってきますので、いろいろ試していきましょう。

カテゴリーリストの色変更

カテゴリーリプレイ
カテゴリーリプレイ

トップページのカテゴリーリストはカスタマイズでどの項目を選択しても、テーマで設定した色が適用されています。

そこでカテゴリーで選択した色とテゴリーリストの色を同じにしたい時の、追加CSSの書き方について解説します。

参考例として【New|最新記事】はテーマカラーで【WEB|ウェブ】はカテゴリーと同じ色にします。

テーマカラー
テーマカラー

まずはカテゴリーリストのところに、マウスを乗せて右クリックします。その後に検証をクリック。

検証
検証

検証ツールに実際どのCSSが適用されているのかが、一目でわかります。

idとclass確認
idとclass確認
#tab-3:checked ~ .tabBtn-mag li [for="tab-3"] {
    background-color: #3b5d82!important;
}

上記のコードが適用されているのが確認できました。

後は、追加CSSに同じidclassを指定してあげて、自分が指定したいカラーコードを上書きしてあげれば、変更できます。

コードを追加CSSに記述

#tab-2:checked ~ .tabBtn-mag li [for="tab-2"] {
    background-color: #00c4cc!important;
}
CSS上書き

後は同じ要領で残り2つとも変更していきます。
#tab-3#tab-4と指定すidは数字が変わっているだけです。

#tab-3:checked ~ .tabBtn-mag li [for="tab-3"] {
    background-color: #36a8ff!important;
}
#tab-4:checked ~ .tabBtn-mag li [for="tab-4"] {
    background-color: #e49c22!important;
}

サイドバーにカテゴリーを配置した場合の変更方法についても解説します。

カテゴリーリスト
カテゴリーリスト
:hoverにチェック
:hoverにチェック

カテゴリーには!importantの記述がなかった為!importantなし追加CSSに記述が出来ます。

css確認
css確認

wordpress管理画面外観カスタマイズ追加CSSidclassを指定してカラーコードを入力します。

.widget_categories ul li a:hover .count {
    background-color: #3b5d82;
}
.widget_categories ul li.cat-item-4 a:hover .count {
    background-color: #00c4cc;
}
.widget_categories ul li.cat-item-8 a:hover .count {
    background-color: #e49c22;
}
.widget_categories ul li.cat-item-3 a:hover .count {
    background-color: #36a8ff;
}
カテゴリーID
カテゴリーID

↓下記本は自身がこの1冊でWordPressのカスタマイズが身についたお勧めの本です。

一歩先にいくWordPressのカスタマイズがわかる本
一歩先にいくWordPressのカスタマイズがわかる本

▪一歩先にいくWordPressのカスタマイズがわかる本
WordPressの入門書を読みながら一度サイトを制作した方でも、もっと「ああしたい」「こうしたい」というときになって、よくわからなかったり、うまくいかなったりして困った方が意外と多いと思います。自社のサイトを制作するWeb担当者も、お客様の要望に応えるWebデザイナーも、読めば得する一冊です。

今回は中のカラーのみを変更しましたが、同じ要領で周りの線などの色も変更できます。

↓下記本はWordPressのカスタマイズにプラスデザインも学びたいと思って勉強した本です。

WordPressデザインブック HTML5&CSS3準拠
WordPressデザインブック HTML5&CSS3準拠

WordPressデザインブック HTML5&CSS3準拠
レスポンシブWebデザインでレイアウトを操るためのボックスのレイアウト手法を身につける。「ブログ・ニュース系サイト」を構築し、テンプレート、ウィジェット、プラグインを使いこなす。「スマートフォンなど多様なデバイス」に柔軟に対応できるWordPressのデザイン、設計テクニックが身につく本です。

プル

自身のサイトを少しでも変更加えたりすることで、モチベーションが上がったりするので、遊び感覚でいろいろ試してみましょう。カスタマイズが好きなプルより。

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA