はじめに
皆さんこんにちは。
今回、ブログの見出しのデザインを変えてみました！！
どうでしょうか。前よりもいい感じになっていますか？
私は良くなったと思います！！笑
※2018/10/13 ：自分のやりたいことがある程度見えてきたので、Lightningとは別の有料のデザインを購入しました。
今回は、Wordpressにおけるデザインの変更方法を記録に残したいと思います！！
思い起こせば、もうすぐブログを始めて5ヶ月が経ちます。
webの知識がないのにも関わらず、勢いで始めたこのブログ…。
「デザインをもう少し自分らしくカスタマイズしたい！！」「ここの色をこの色に変えたい！！」など、自分らしさを表現したくなってきました。
ブログを始めてから、"HTML" や "CSS"といったプログラミング言語の勉強も始めました。
ようやくどういう仕組みで構成されているのか、全体を把握できてきたので、デザインのカスタマイズを実施しました！！
まず、変更前の見出しのデザインはこちらです。
そして、変更後のデザインはこちらです！！
（"h1"、"h5" は変更していないです）
いい感じじゃないですか？(ﾟ∀ﾟ)
読者の方が読みやすいデザインにしたいと思い、シンプルで区切りが分かりやすい見出しを意識しました。
私はとても気に入っています！
それでは、変更方法を纏めます。
準備するもの
子テーマを作成
まずは、子テーマを作成します。
子テーマを作成する理由は、親テーマをバージョンアップしたときに、デザインがリセットされないためです。
もし、子テーマを作らず、WordpressのCSSを直接編集したとします。
その場合、Wordpressのテーマのバージョンアップしてしまうと、自分がカスタマイズしたデザインが消えてしまいます。
そのため、子テーマを作成し、子テーマでデザインをカスタマイズすれば、たとえ親テーマをアップデートしても、子テーマは消えず、自分の好きなデザインを継続して使用できます。
Lightningからサンプルをインストール
まずは下記の "Lightning" のサイトから、"Lightning"の子テーマ サンプルをインストールします。
任意の場所に、Zip形式で保存します。
WordPressで取り込み
①.Wordpressの編集画面から、「外観」→「テーマ」をクリックします。
②.続いて下記の「新規作成」をクリック。
③.「テーマのアップロード」をクリック。
④.ポップアップが出るので、先ほどダウンロードしたZipファイルを読み込ませます。
⑤.その後、子テーマを有効化します。
以上の工程を終えると、「外観」→「テーマの編集」→「スタイルシート」をクリックすると子テーマのCSSが表示されます。
ここに好きなデザインのCSSを書き込むと、サイトに反映されます。
デザイン決め
私は、下記サイトのデザインを参考にさせて頂きました。
自分が「素敵！！」と思ったデザインをコピーして、先ほどの子テーマのstyle.cssに貼り付けた後、 "色" や "文字" をカスタマイズしました。
新しいデザイン
色や、サイズを微調整しました。
Excelで色合いを調べて、この色がいい！！という色を探しました。
それをコードに記載して出来上がり！！
トラブル内容
上手くいかなかった箇所、苦労した箇所を記載します。
CSSが反映されない
CSSファイルを書き換えて、更新をしても、サイトのデザインに反映されませんでした…。orz
だいぶ苦労しましたが、ブラウザのキャッシュが残っていることが原因でした。
ブラウザのキャッシュを削除してから表示することで、私の画面でも正常にデザインが反映されました！！
ホーム画面に反映されない
各記事についてはデザインが反映されたのですが、ホーム画面は昔のデザインのままでした。
これは、子テーマに書いたCSSが優先順位が低く、優先順位の高い親テーマのデザインが適用されてしまっているためです。
「F12」キーを押して、対象の見出しの "Class"、"id" を調べて、詳細まで指定することで、ホーム画面も無事反映することができました！！！
さいごに
今まで、デフォルトのデザインを使用してきました。
デフォルトのデザインも悪くはないんですが、自分の好きなデザインにすると気分が上がりますよね。
これからも、またちょくちょくと変更していくかもしれません。笑
デザインに拘る暇があったら、記事を多く書いたほうが良いってもう一人の私が言っていますが…。
今後ともたくさんの人に見て頂けるグログを目指します！！！
以上、「CSSを使ってサイトの見出しを変更しました！Lightningのテーマをカスタマイズした方法を纏めます！」でした！！！