ワードプレス初心者【コピペで簡単！】サイドバーに背景色をつける
この記事は、私がワードプレス【Lightning】でサイトを作成するにあたり、わからなかったこと・調べたこと・変更したことなどを、備忘録として残しています。
私と同じようなワードプレス初心者のみなさまに、少しでも参考になりましたら幸いです。
サイドバーに背景色をつけたい！
サイドバーに背景色をつけると、メイン記事がはっきりするので、より見やすくなります。
このサイトのように、かなり薄い背景色だとしても全体の見やすさに差がでます。
初心者でも簡単！
ムズカシそうだけれど、初心者でもできるのかな・・・？
大丈夫！簡単です。
【追加CSS】に下記コードをコピペするだけで変更できます。
公開までの流れ
- ダッシュボードを開く
- 「外観」から「追加CSS」をクリック
- 下記コードをコピペ → 公開をクリック
たったこれだけ(*^_^*) 早速やってみましょう。
追加CSS欄に何かコードか入っている場合は、先にメモ帳などにデータをコピーし、失敗しても元のデザインに復元できるよう必ず対策をしてから、ご自身の責任で行ってください。
早速やってみましょう！ 操作手順は①～⑤
①ダッシュボードを開く
②外観 → 追加CSSを選ぶ
③編集画面が出る
④下記コードをコピペする
下記をコピペし、赤色部分のコードを変えると、好きな色に変更できます。
ご参考までに、このサイトのサイドバー背景色は【#f9f9f9】です。
●
/* サイドバー背景色 */
.sideSection {
background-color: #f9f9f9;
}
⑤貼り付けて、公開する
色のコードはこちら
色は、原色大辞典さんから探すのがおススメです。
たくさんの色見本がありますので、ご希望の背景色が探せるはずです。
背景色が変わらない場合
公開して確認してみると、間隔が変わっていない場合があります。その際は
- ブラウザの更新ボタンを押してみる。
- 編集画面で、色コードだけを何回か変更していると変わらない場合があるので、再度、全コードをコピペし直してみる。
私の場合は、上記で解決できましたので、同様にお困りの場合は一度やってみてください。
まとめ
コピペ→貼り付け→実行するだけなので、初心者でも簡単にできますよ(*^_^*)
よかったらチャレンジしてみてくださいね。
追加CSS欄に何かコードか入っている場合は、先にメモ帳などにデータをコピーし、失敗しても元のデザインに復元できるよう必ず対策をしてから、ご自身の責任で行ってくださいね。
