賢威でサイドバーの背景・見出し・文字の色を変更するカスタマイズ方法


メインカラムの背景色とサイドバーの背景色を統一させたい場合など、サイドバーのカスタマイズをしたい時があると思います。

<賢威6.2> <賢威7>
賢威サイドバー背景見出し文字色変更画像1 賢威7 サイドバーコンテンツ

なので、この記事では、賢威7と賢威6.2のサイドバーの背景・見出し・文字の色を変更する方法について解説します。

尚、サイドバーは2カラムのサイトを想定して解説します。

また、賢威7でサイドバー全体の背景色を変更する方法に関しては、以下の記事で解説しています。

賢威7でサイドバー全体の背景色を変更する方法

賢威7でサイドバーの見出しの背景色を変更する方法

まずは、賢威7でサイドバーの見出しの背景色を変更する方法について解説します。

賢威7でサイドバーの見出しの背景色を変更するには、

ワードプレスのダッシュボード→外観→テーマの編集→base.css

の順にクリックし、以下のコードを探します。

賢威7 base.css サイドバー見出し

.sub-conts .section-wrap .section-in .section-title,
.sub-conts .section-wrap .article-header .section-title{
margin: 0 -20px 30px;
padding: 0 0 11px;
border-bottom: 1px solid #ccc;
font-weight: normal;
font-size: 1.125em;
}

こちらのコードが賢威7のサイドバーの見出しをデザインしているCSSコードになります。

このコードの中に、以下の背景色を指定するCSSコードを書き加えます。

background-color: #○○○;

上記コードの『#○○○』となっている部分が色を指定するコードになりますので、『#○○○』となっている部分を好みのカラーコードに書き換えます。

カラーコードは以下のようなサイトの色見本を参考にします。

→色見本

今回は例として、青色(#4169e1)に変更します。

背景色を指定するコードを書き加えると以下のようになります。

賢威7 サイドバー見出し 色変更

サイドバーの以下のように、見出しの色だけが変わります。

賢威7 サイドバー見出し 色変更-1

これで見出しの背景色の変更は完了です。

賢威7でサイドバーの見出しの文字色を変更する方法

賢威7でサイドバーの見出しの文字色を変更方法は、先と同様に

ワードプレスのダッシュボード→外観→テーマの編集→base.css

の順にクリックし、以下のコードを探します。

賢威7 base.css サイドバー見出し

.sub-conts .section-wrap .section-in .section-title,
.sub-conts .section-wrap .article-header .section-title{
margin: 0 -20px 30px;
padding: 0 0 11px;
border-bottom: 1px solid #ccc;
font-weight: normal;
font-size: 1.125em;
}

そうしましたら、今度はこちらのコードの中に、文字色を指定する以下のコードを書き加えます。

color: #000;

こちらの先と同様で、『#000』の部分は好みのカラーコードを入力します。

上記コードを書き加えると、以下のようになります。

賢威7 サイドバー見出し 文字色

今回は例として、白色(#fff)のカラーコードを書き加えましたので、見出しの文字色は以下のようになります。

賢威7 サイドバー見出し 文字色 変更

これで、見出しの文字を白色にすることができました。

賢威7で見出しのフォントサイズ(文字の大きさ)を変更する方法

賢威7で見出しのフォントサイズ(文字の大きさ)も、先と同様のコードを編集しますので、

ワードプレスのダッシュボード→外観→テーマの編集→base.css

の順にクリックし、以下のコードを探します。

賢威7 サイドバー見出し フォントサイズ

.sub-conts .section-wrap .section-in .section-title,
.sub-conts .section-wrap .article-header .section-title{
margin: 0 -20px 30px;
padding: 0 0 11px;
border-bottom: 1px solid #ccc;
font-weight: normal;
font-size: 1.125em;
}

そうしましたら、今度は上記コードの中にある

font-size: 1.125em;

こちらのコードを編集します。

『1.125em』となっている部分が文字の大きさを表わせ数値になりますので、この数値を大きくしたり、小さくしたりすることで、フォントサイズ(文字の大きさ)が変わります。

今回は例として、文字を大きくしますので、『1.125em』となっている部分を『2em』に変更します。

コードを書き換えると、以下のように見出しの文字の大きさのみ変わっていることが分かります。

賢威7 サイドバー見出し フォントサイズ 変更

ここまでが、賢威7でサイドバーの見出しの背景色・文字色・フォントサイズ(文字の大きさ)を変更する方法です。

続いて、賢威6.2での変更方法について解説します。

賢威6.2でサイドバーの背景色を変更する方法

まずは、サイドバーの背景色です。

サイドバーの背景色を変更するには、design.css内の次の箇所を探して下さい。

賢威サイドバー背景見出し文字色変更画像2

ここに背景色を指定するため、次のコードを書き足します。

background-color: #dcdcdc;

背景色を指定する「background-color:」とその色「#dcdcdc;」ですね。分かりやすくするため、例として「#dcdcdc;」の色にしました。

実際に書き足すとこうなります。

賢威サイドバー背景見出し文字色変更画像3

出来たら保存してトップページで確認してみます。

賢威サイドバー背景見出し文字色変更画像4

このようになればOKです。

ただし、この状態では見出しの色も同じように「#dcdcdc;」になってしまっているので、見出しの背景色も変更します。

賢威のサイドバーの見出しの色を変更する方法

見出しの色を変更するには、こちらも「background-color: 色のコード」を書き足します。

design.css内の次の箇所を探して下さい。

賢威サイドバー背景見出し文字色変更画像5

ここに、先ほどと同じようにコードを書き足します。

賢威サイドバー背景見出し文字色変更画像6

「#4169e1;」はお好みで変えて下さい。出来たら保存してトップページで確認してみます。

賢威サイドバー背景見出し文字色変更画像7

このようになればOKです。

しかし、今度は見出しの文字の色が少し分かりにくくなりましたので、文字の色を変えます。

賢威のサイドバーの見出しの文字の色を変更する方法

見出しの色を変えたところのコードに、見出しの文字の色を指定しているコードがあります。

賢威サイドバー背景見出し文字色変更画像8

ここですね。ちゃんと「/*見出し文字の色*/」と指示されていますが、ここの「color:」のコードを変えれば、文字の色を変更させることができます。

賢威サイドバー背景見出し文字色変更画像9

試しに「color: #fff;」にしてみました。保存してトップページで確認してみます。

賢威サイドバー背景見出し文字色変更画像10

このようになればOKです。各色の色合いやバランスなどを確認しながら変更して下さい。

サイドバーの色の変更については以上です。

今回の記事はお役にたてましたでしょうか?

もし、今回の記事を読んで感想や分からない事などありましたら、下のフォームよりお伝え下さい。

些細な事でも構いません。

おそらく、あなたが抱いた疑問は、これからこの記事を読む方も抱く疑問です。

そういった疑問を1つ1つ解決していきます。

コメントして頂ければ気づき次第、すぐに回答いたします。



総合案内

著者情報
著者情報
年収1000万円まで守る2つの事
読者さまの声
読者さまの声
もくじ
もくじ
超初心者講座
超初心者講座
ブログ基礎講座
ブログ基礎講座
トレンドブログ講座
トレンドブログ講座
パワーブログ講座
パワーブログ講座
マインドセット
マインドセット
コピーライティング
コピーライティング
ブログアフィリエイト
ブログアフィリエイト
トレンドアフィリエイト
トレンドアフィリエイト
ネットビジネス
ネットビジネス
SEO
SEO
コラム
Googleアドセンス
Googleアドセンス
与える事に徹する
与える事に徹する
先生の選び方
先生の選び方
Googleアドセンスの始め方
Googleアドセンスの始め方
賢威カスタマイズ
賢威カスタマイズ
このブログについて
このブログについて
女性のブログアフィリエイト
女性のブログアフィリエイト
そもそものステップが違う
そもそものステップが違う
中高年の方はシンプルな方法がお勧め
中高年の方はシンプルな方法がお勧め

このページの先頭へ