コピー＆ペーストだけでかっこいい見出しが作れます！
記事の更新に慣れてくると、記事のデザインをカッコよくしたいという欲が出てきます。
しかしCSSもHTMLも勉強していないため、デフォルトのままで来ていました。
分からなくてもカッコよくしたいのです！
なら勉強をすればいいと思われそうですが、勉強は大変なので後回しにしたいです・・・。
ということで、前回は知識なしで何とかする方法はないかと調べたのでした。そしてCSSを自動で作成してくれるサイトを見つけました。
詳しくはこちらのページをご覧ください。
CSSを書けなくてもコピー＆ペーストだけでサイトに組み込むことに成功しました。
実は貼り付け先がどこか分からず、小一時間悩んでやっとうまくいきました。
私と同じ超初心者の方用に、やり方を記録しておきます。
CSSジェネレーターで好みのデザインを作成する
今回は「WEB道」さんで作成させていただきました。
とても簡単に見出しのデザインを作ることができます。
こちらが「WEB道」さんのCSS見出しジェネレータの設定画面です。
見ての通り、本当に見た目を選んでいくだけです。
自分で難しいプログラムなどを書く必要は一切ありません。
色を表す部分が難しそうですが、クリックするとこうなります。
パレットみたいなものが出てくるので、やっぱり選ぶだけでOKです。
不器用さんに親切です！
自分の好みになるようにポチポチと選んでいきます。
選び終わったら、一番下の「ジェネレート」ボタンをクリックします。
私は吹き出し型で、今使っているテーマに合う緑系の色にしました。
クリックすると、設定した見出しの見本が作成されます。
無事に見出しのデザインが完成しました！
見本が見られるのはありがたいですね。
自分のサイトで公開する前に、気に入ったデザインになっているか確認できます。
見本の下にはCSSとHTMLが自動で作成されていますので、確認してみてください。
自分でこれを書けなくても、コピー＆ペーストするだけで見本と同じ見出しになります。
＜追記＞
少しでも勉強をしてから・・・という方はこちらの本がおすすめです。
私のような超初心者にもわかりやすく書かれていました。
分からないところは、詳しい人に質問してみると良いと思います。周りに詳しい人がいない場合は、質問サイトを活用しましょう。
こういうパソコン系の疑問のときにおすすめの質問サイトはteratail（テラテイル）です。メールアドレスのみで簡単に登録ができます。
関連：プログラム系質問サイト「teratail（テラテイル）」が初心者に優しすぎてスゴイ
初心者だと分かるように初心者マークを付けて質問すると、優し丁寧に回答してくれます。知恵袋のような意味のない回答や高圧的な感じの人も見かけませんので、安心して使うことができるのが嬉しいですね。
CSSを編集する前の注意点
ここからWordPressでの作業になりますが、必ず守ってほしい注意点があります。
CSSを編集するときは必ずバックアップを取ってください。
CSSを編集することでサイトが表示されなくなる可能性もあるそうです。
サイトのバックアップを取る方法は以下のページをご覧ください。
関連：＜プラグイン＞UpdraftPlusでサイトのバックアップを取る
いきなり本番のサイトで試すのが不安な場合は、Instant WordPressで試すと良いと思います。
私は知識もなく不安だったので、一度試してからこのサイトに組み込みました。
Instant WordPressで練習環境を作る方法は、以下のページをご覧ください。
関連：「Instant WordPress」を導入し練習環境を作る
＜追記＞
Instant WordPressは、ローカルで動かせる分動作が少し遅いです。
すでに独自ドメインを持っている方は、サブドメインでテストサイトを作って試す方が快適です。
準備ができましたら、いよいよCSSを編集していきます！
スタイルシートのCSSを編集する
WordPressの「外観」からCSSを編集できます。
右のメニューの「外観」から「テーマの編集」をクリックします。
するとなんだか難しい画面に移ります。
スタイルシート（style.css）を編集していきます。
こうなっていれば、貼り付け先はあっていますので、一番下までスクロールしましょう。
違っていた場合は、右のメニューからスタイルシートを選びましょう。
下の方にあるはずです。
スタイルシートの一番下に、先ほど「WEB道」さんで作成したCSSを貼り付けていきます。
貼り付けたらファイルを更新しておきましょう。
以上でスタイルシートの編集は終了です。
貼り付ける場所さえ分かっていれば簡単でしたね。
記事のHTMLを編集する
HTMLコードもCSSコードと一緒に作成されています。
こちらは記事を作成する際に使用するものです。
いつもは記事を書くときは「ビジュアル」タブで行っているかと思います。
HTMLを編集するときは「テキスト」タブを使用します。
テキストの方に「WEB道」さんで作成したHTMLを貼り付けます。
「ビジュアル」タブに戻って見出しができていればOKです！
ちなみに私は出来ませんでした・・・
見出しの見た目が変わらない場合
調べると、ブラウザのキャッシュというものを削除するとうまくいくそうです。
以下のサイトに詳しく書いてありました。
WordPressでCSSを修正したけど反映されないときに確認すべきこと｜ラブグアバ
私の場合、スーパーリロードを試すとうまくいきました！
ブラウザはChromeを使用しているので、「Shiftキー」を押しながら「F5キー」で更新です。
今回のまとめ
無事CSSとHTMLの知識なしでも見出しのデザインが変更できました。
自分で自由にデザインできた方が楽しそうですが、初心者にはハードルが高いです。
しかし、不器用に優しい素晴らしいサイトがたくさんあるので、ありがたいですね。
もしわからないときでも、teratail（テラテイル）質問しながら進めれば何とかなります。
関連：プログラム系質問サイト「teratail（テラテイル）」が初心者に優しすぎてスゴイ
世の中には便利なサイトと親切な人がいて良かったです。私のような超初心者＆不器用さんにも優しいのでありがたいです。
＜追記＞
CSSを勉強してみて、サイトを作るなら知っていた方が良いと強く感じました。
まずはCSSが何なのかイメージが持てない方は、こちらにまとめましたのでご覧ください。
ここまでお読みいただき、ありがとうございました。
関連：知識ゼロからホームページ作成・公開するまでの手順と公開後の作業まとめ＜画像付き＞
