当サイトはアフィリエイト広告を利用しています

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の選択画面

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

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

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

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

ところで『追加CSS』とは?

はい、詳しい事はわかりませんので、ぼんやりと説明します…。
style.cssに記入するのと効果は同じです。
(書き込まれる場所は違うらしいよ)
style.cssと追加CSSの両方に書き込んだ場合、追加CSSの方が優先されます。
(これは実験してみたよ)

テーマを変更すると反映されなくなるそうですが、テーマを変える時はデザインをガラッと変えたい時だから問題なさそう。
自分はお試し用として利用するので、style.cssに保存したら追加CSSは削除して、次のカスタマイズ用にまっさらにしておこうと思います。

もし、メチャクチャにしてしまっても消せば良いので(大元はテーマ内に残っている)、初心者でも気軽に挑戦できます。

なんてったって、プレビュー画面を見ながら変更できるのが最高!

もちろん、追加CSSをメインのカスタマイズ場所にするのも有りですよ。

「追加CSS・親テーマ・子テーマ」
それぞれの場所にCSSカスタマイズするメリット&デメリットは、ぱるさんのブログがわかりやすく説明してくれています。
ありがとうございます。

ぱるさんの『ぱるろぐ|WordPressでCSSを追加する3つの方法と各メリット・デメリット』へ

WordPressでCSSカスタマイズデビューできました

自分と同じ初心者の皆さん!
追加CSSを使えば、気軽に見た目のカスタマイズができます。

自分は調子に乗って、即、タグクラウドもカスタマイズしてしまいました。
太さを変えるにはこの一文追加かな?やっぱり枠線は無しにしようかな?やっぱ今の無し!などなど、お気軽にね。

まずは、追加CSSにコピペでチャレンジしてみるのはいかがですか?

パソコンでCSSカスタマイズする猫

コメントは優しくどうぞ

タイトルとURLをコピーしました