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


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

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

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

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

まずは、ワードプレスのダッシュボード→外観→テーマの編集→design.cssに行って下さい。

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

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

サイドバーの背景色を変更するには、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です。各色の色合いやバランスなどを確認しながら変更して下さい。

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

次ページ

12次

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

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

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

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

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

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

このブログは、

・アフィリエイト開始初月から9万円のネット収入が得られた秘密

アフィリエイト開始2ヶ月目で以前勤めていた会社からの給料と
 同額
のネット収入を確保した方法

・5ヶ月目で月収120万円を達成した最先端テクニック

・これから流行り始めるブログマネタイズの新しい思考法

などを書いています。

只今、ブログの内容をより体系的にまとめたビジネス教科書を
無料でプレゼントしています。

以下のフォームに教科書を受け取るメールアドレスと、
あなたの苗字を記入してプレゼントをお受け取り下さい。





記事一覧


著者:ヒデアキ
現在は、毎月100万円の収入を得ているブログアフィリエイトの知識を活かして「新たな収入源を手に入れ大切な人を守りたい」と真剣に考えている方を全力でサポートしています。
更に詳しいプロフィールはこちら


このページの先頭へ