CSSを使ってサイトの見出しを変更しました!Lightningのテーマをカスタマイズした方法を纏めます!

はじめに

皆さんこんにちは。

今回、ブログの見出しのデザインを変えてみました!!

どうでしょうか。前よりもいい感じになっていますか?

私は良くなったと思います!!笑

 

今回は、Wordpressにおけるデザインの変更方法を記録に残したいと思います!!

思い起こせば、もうすぐブログを始めて5ヶ月が経ちます

webの知識がないのにも関わらず、勢いで始めたこのブログ…。

 

「デザインをもう少し自分らしくカスタマイズしたい!!」「ここの色をこの色に変えたい!!」など、自分らしさを表現したくなってきました。

ブログを始めてから、”HTML” や “CSS”といったプログラミング言語の勉強も始めました。

ようやくどういう仕組みで構成されているのか、全体を把握できてきたので、デザインのカスタマイズを実施しました!!

 

まず、変更前の見出しのデザインはこちらです。

Lightning見出し

そして、変更後のデザインはこちらです!!

(”h1″、”h5″ は変更していないです)

Lightning見出し変更後

いい感じじゃないですか?(゚∀゚)

読者の方が読みやすいデザインにしたいと思い、シンプルで区切りが分かりやすい見出しを意識しました。

私はとても気に入っています!

 

それでは、変更方法を纏めます。




準備するもの

子テーマを作成

まずは、子テーマを作成します。

子テーマを作成する理由は、親テーマをバージョンアップしたときに、デザインがリセットされないためです。

もし、子テーマを作らず、WordpressのCSSを直接編集したとします。

その場合、Wordpressのテーマのバージョンアップしてしまうと、自分がカスタマイズしたデザインが消えてしまいます。

 

そのため、子テーマを作成し、子テーマでデザインをカスタマイズすれば、たとえ親テーマをアップデートしても、子テーマは消えず、自分の好きなデザインを継続して使用できます。

Lightningからサンプルをインストール

まずは下記の “Lightning” のサイトから、”Lightning”の子テーマ サンプルをインストールします。

子テーマでのカスタマイズ

任意の場所に、Zip形式で保存します。

WordPressで取り込み

①.Wordpressの編集画面から、「外観」→「テーマ」をクリックします。

 

②.続いて下記の「新規作成」をクリック。

テーマ取り込み

 

③.「テーマのアップロード」をクリック。

テーマをアップロード

 

④.ポップアップが出るので、先ほどダウンロードしたZipファイルを読み込ませます。

⑤.その後、子テーマを有効化します。

 

以上の工程を終えると、「外観」→「テーマの編集」→「スタイルシート」をクリックすると子テーマのCSSが表示されます。

ここに好きなデザインのCSSを書き込むと、サイトに反映されます。

子テーマ

デザイン決め

私は、下記サイトのデザインを参考にさせて頂きました。

自分が「素敵!!」と思ったデザインをコピーして、先ほどの子テーマのstyle.cssに貼り付けた後、 “色” や “文字” をカスタマイズしました。

CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選

新しいデザイン

色や、サイズを微調整しました。

Excelで色合いを調べて、この色がいい!!という色を探しました。

色の指定

それをコードに記載して出来上がり!!




トラブル内容

上手くいかなかった箇所、苦労した箇所を記載します。

CSSが反映されない

CSSファイルを書き換えて、更新をしても、サイトのデザインに反映されませんでした…。orz

だいぶ苦労しましたが、ブラウザのキャッシュが残っていることが原因でした。

ブラウザのキャッシュを削除してから表示することで、私の画面でも正常にデザインが反映されました!!

ホーム画面に反映されない

各記事についてはデザインが反映されたのですが、ホーム画面は昔のデザインのままでした。

これは、子テーマに書いたCSSが優先順位が低く、優先順位の高い親テーマのデザインが適用されてしまっているためです。

「F12」キーを押して、対象の見出しの “Class“、”id” を調べて、詳細まで指定することで、ホーム画面も無事反映することができました!!!

さいごに

今まで、デフォルトのデザインを使用してきました。

デフォルトのデザインも悪くはないんですが、自分の好きなデザインにすると気分が上がりますよね。

これからも、またちょくちょくと変更していくかもしれません。笑

デザインに拘る暇があったら、記事を多く書いたほうが良いってもう一人の私が言っていますが…。

 

今後ともたくさんの人に見て頂けるグログを目指します!!!

以上、「CSSを使ってサイトの見出しを変更しました!Lightningのテーマをカスタマイズした方法を纏めます!」でした!!!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です