無料でwordpressでサイトを作りたいけど、有料テーマとか有料プラグインとかで結局お金がかかるじゃん…
初めてWordpressでサイトを作ったとき、こんな風に思っていました。皆さんもこうした経験はないでしょうか？
- 無料テーマでできることはかなり限られている
- 無料でプラグインを入れたら、機能が全然使えなかった
- 有料テーマやプラグインが結構多い
初めて使ったときはプログラミングのこととかも何も知らなかったので、有料のテーマやプラグインに頼るしかありませんでしたが、現在はエンジニアとして働いているのもあり、当サイトもすべて無料テーマ・プラグインで作成しています。（2023年1月現在）
カスタマイズできることは大量にありますが、今回はその中でもテーマのデザインを変える方法を解説します！
- 初心者でも簡単に見た目が変えられる！
- 他のサイトのデザインを真似することができる！
- HTML, CSSがざっくり理解できる！
そもそもHTML, CSSって何なの？
わからない人のために説明すると、HTMLはぬいぐるみ、CSSはぬいぐるみに着せる服だと思うとわかりやすいと思います。
HTMLはぬいぐるみ
世の中にはクマのぬいぐるみ、パンダのぬいぐるみなどたくさんの種類がありますよね。それを同じで、サイトにもたくさんの種類のものがあります。
例えば、上の「HTMLはぬいぐるみ」という部分は “h3” ですし、今この文章は “p” というものになります。
ぬいぐるみ自体が違うと、それぞれの役割や印象が変わるように、HTMLの中身を変えると、大きな枠組みが変わる、とイメージしておいてください。
CSSはぬいぐるみに着せるコスチューム
同じぬいぐるみでも、服によって違う印象を出すことができますよね？例えばクマのぬいぐるみに、パーカーを着せるのと、スーツを着せるのでは印象が全く変わると思います。
それと一緒で、同じ枠組みでも、CSSに書く内容によって、見た目やデザインの部分を変えることができるようになるのです！
CSSで見た目を変更してみよう
プログラミングは実際にやってみて、書いた通りに動くことが楽しいので、実際に経験してもらおうと思います！
今回は、記事で使われる見出しを今使用しているようなデザインに変更したいと思います！
WordPressの管理画面で「外観 > カスタマイズ」に移動します。移動したら、サイドバーにある「追加CSS」のメニューをクリックしてください。すると、こんな画面が出てくると思います。
この画面で、CSS（ぬいぐるみの服）のコードを入力すると、実際に見た目が変わるんです！では、実際にやってみましょう。以下のコードをコピペしてみてください。
h2 {
font-size: 1.625rem !important;
line-height: 35px;
padding: 1rem;
border-top: 6px double #fff;
border-bottom: 6px double #fff;
background: #364f6b;
color: #fff !important;
}すると、この記事のような見た目に変更されたと思います！
コードの解説
もう少し詳しく知りたい方のために、コードがどうなっているのかを解説します。まずは、緑色の部分に注目してください。これは、「どの部分の見た目を変えたいです」と宣言している部分になります。
今回変更したいのは「見出し２」と呼ばれる部分で、英語だと”heading 2″、略してh2なので、h2と書いています。
その後ろの { } は、「 { } の中身の指示に従ってね」と、h2の変更を施すのはどこまでの部分なのか、その範囲を宣言するためのものになります。
括弧の中身の部分、これらが、実際にどういった見た目にしたいかを宣言している部分になります。
すべて解説はしませんが、例えば一番上のfont-sizeはフォントの大きさを変更し、paddingは文字の周りの余白を定義するものです。
CSSのコードを無理に覚える必要はない
こうした解説をしていると、たまにこんな人がいます。
よし！本を買ってCSSのコードを片っ端から覚えるぞ！
何を隠そう、私です。変なところにこだわりを持っていた私は、初心者の時はコードがたくさん載っている本を買って最初から読み進めたり、覚えるために紙に書いていたりしました。
コードは調べたら出てくるので、暗記する必要もないですし、最初から全部を理解するのはかなり大変です。そんなことしてたら途中で力尽きてしまいます。
「こういった見た目にしたい」と思ったら、その都度ググって調べる。出てきたコードをコピペして、上手くいかなかったほかのコードを試してみる
最初から全部覚える必要はありません。大事なコードは見る頻度も多いので、自然と覚えていくものです。勉強よりも、やりたいことに合わせて覚えていった方が楽しいと思います！
参考サイト
だったらコピペできるまとめ記事みたいなのはないの？
ここで、僕も実際に使っている見出しのデザインに役立つサイトを紹介します！
まとめ
今回はCSSで見出しの見た目を変更する方法を解説してみました。
ぜひこの知識を活用して、自分のサイトを素敵なものにしてください！