WordPress初心者のカスタマイズは追加CSSで試すと良さげ

ワードプレスでブログを始めて1ヶ月の初心者MUTSUnicです。
HTMLやCSSでカスタマイズなんてまだまだ先の予定でした。
んがっ、デザイン上どうしても気になる点が…。

初めてのCSSカスタマイズは文字の色

カスタマイズはゆ〜っくり、ゆ〜っくり進めるつもりでしたが、どうしても気になって仕方がなかった本文のフォント色、真っ黒100％。

ブラウザはGoogle Chromeで編集していて、他のブラウザよりコントラストがキツイのはわかっています。
スマホやタブレットで見た時はそれほど感じないのですが、パソコンの画面では気になる…。

気にしながら他のサイトを見ると、やはり、皆さん文字色をグレーにしています。
CSSで早めにカスタマイズしなければ！

初心者が安全に文字色だけ変更するには

失敗したらログインできなくなるとか、グチャグチャになって戻すのに1日かかったとか、皆さんの恐怖体験がネット上には書かれているので、調べまくったところ、『追加CSS』という秘密の場所を発見したのです。

えーと、秘密ではないです、意味がわからなかったので存在を無視していただけです。

簡単＆わかりやすく

利用しているテーマは『Simplicity2』です。
コピペでOKな情報は溢れていますので、多くのブロガーさんの記事を参考にさせて頂いております。

その中で見つけた、ゆずゆさんのブログがシンプルで、初心者でも何を書いているのかすぐわかり、本文、H2、H3…と、別々の色にする方法もすぐ理解できました。
ありがとうございます。
他のカスタマイズ方法も、とても参考になりますよ。

ゆずゆさんの『ゆずゆろぐ|【Simplicity2】記事や見出しのフォントカラーを変える方法』へ

bodyが本文で、

/* フォントカラーを変更する */
body {
color:#333333 !important;
}

見出しはh2、h3、…と必要に応じて変更ですね。
色は＃◯◯◯◯◯◯ の色コード部分を変更して好きな色に。

/* 見出しのフォントカラーを変更する */
.article h3 {color: #333333;}

これを書き込むと、過去の記事にも同じ色で修飾されます。
尚、個別の記事内で変更した色は、CSSでの指定より優先されています。
という事は、必要に応じて過去記事に戻って修正しなければ…。

できるだけ失敗したくない

失敗したら恐ろしいですね。（実際はとても簡単でした）
まずはバックアップをとりましょう。

ワードプレス初心者ですが、バックアップ用プラグインは真っ先にインストールしてありますよ。
プラグインを利用して今すぐバックアップ！
（FTPソフトも導入したのですが、まだ良くわからないので眺めてるだけ…。）

さあ、コピーして、
『ダッシュボード→外観→テーマの編集→style.cssに書き込む』
が通常の手順ですが、ここで初心者で小心者は予防線を張りました。

『追加CSS』で試してみる

『ダッシュボード→外観→カスタマイズ→追加CSS』
というのがありますね。
ここに記入する事でもカスタマイズ可能なのです。
ただ、大半のテーマ編集では、子テーマでのカスタマイズが推奨されています。
もちろん、『Simplicity2』でも子テーマを利用していますし、今後もそうするつもりです。

追加CSSの素晴らしい点は、リアルタイムでプレビュー画面が見える事。
これを利用しない手はないでしょう。

本文用、見出し用、それぞれの分を追加CSSに記入。
何度も色コードを試してみて、OKになったら全体をコピペして、ダッシュボードからstyle.cssに書き込んで保存。
バッチリ成功！

プレビューを見ながら変更することで、「数字は半角にしないとダメなんだ〜」などがわかりました。（超初心者の発言）
ココはおかしいよ〜というのを親切に教えてくれるんですよ〜。