ブログ初心者が深みに陥るWordPressのデザイン〜後編〜

初心者が悩むWordPressデザイン

1. CSSでフッターエリアの背景色と文字色を変更すること
2. アイキャッチ右上にあるカテゴリーの色を変更すること
3. サイドカラムエリアのデザイン変更すること

CSSでフッターエリアの背景色と文字色を変更する

有料テーマ『THE THOR』の場合、フッターエリアの背景色と文字色は選択形式では、変更することができないみたいです。

もし時間があれば、googleで『THE THOR』と調べていくつか『THE THOR』で作ったブログを見てみて下さい。デフォルトの黒になっている場合が多いです。

ただ、個人的にはフッターに黒を使ってしまうと、どうしても他とのバランスが取りにくいなと思って変更することにしました。

【やり方】

①変更したい色を探す

カラーコードを検索できるサイトは色々あると思いますが、そのどれかを使って好きな色を見つけて下さい。

例）原色大辞典

詳細は割愛しますが、WEBサイトで好きな色を見つけた場合、chrome拡張機能である「ColorPick Eyedropper」でカラーコードを抽出することができます。

②CSSを変更する

『外観』⇒『カスタマイズ』⇒『追加CSS』

追加CSSにて以下のコードを入力/

.l-footer .bottomFooter{
	background:#a3b2c3;
}
.bottomFooter__copyright {
color: white;
}

①背景色は上記[#a3b2c3]部分を好きなカラーコードに変更

②コピーライトの部分は[white]の部分を変更

注意点は、上記コードをコピペした方がいいです。

CSSの知識がないと”半角空ける”とか”__”とか間違えてドツボにはまります。

アイキャッチ右上にあるカテゴリーの色を変更する

アイキャッチの右上にあるカテゴリーの色も元々、原色系の色だったので、薄い色に変えたいと思い変更致しました。

【方法】

①変更したい色を探す

カラーコードを検索できるサイトは色々あると思いますが、そのどれかを使って好きな色を見つけて下さい。

例）原色大辞典

詳細は割愛しますが、WEBサイトで好きな色を見つけた場合、chrome拡張機能である「ColorPick Eyedropper」でカラーコードを抽出することができます。

②色を変更する

・『投稿』⇒『カテゴリー』と進み、変更したいカテゴリーの編集ボタンをクリック

・『カテゴリーの編集』のイメージカラーを変更する

この作業をすることで、色を変更することができます。

サイドカラムエリアのデザイン変更する

①編集部分まで移動

『外観』⇒『カスタマイズ』⇒『共通エリア設定』⇒『サイドカラムエリア設定』と移動

②サイドカラムエリア設定

ウィジェット見出しデザイン設定の部分を変更することで、デザインが変更されます。

ここでの注意点は、通常、「ボトムボーダー」から「はみ出すボーダー」に変更するとすぐに、右側の画面のデザインが変更されるかと思いますが、なぜか変更されません。

一度、『公開』を押して、再度ブログにアクセスすることで、変更されたデザインを見ることができます。

私の場合、変わっているはずなのに変わっていないと勘違いを起こしてしまい深みに陥りました。

まとめ

【関連内容】

ブログ運営中の方も、ブログの維持費を下げる事ができます。