スタイルシート(CSS)の仕組みと簡単に編集する方法を紹介！

スタイルシートは一見難しく見えますが仕組みはシンプルです。

「どの場所」を「どのように弄るか」だけです。

練習したり何かを覚える必要はありません。(必要最低限でOKです)

やり方さえわかればあとはコピペでどうにかなります。

今回はなるべく簡単にスタイルシートの編集方法を紹介します。

この記事を読めばどのWordPressテーマであってもスタイルシートを編集できるようになります。

ただ、大事なことは「サイト内の何をどうしたいのか(例えば記事タイトルを中央に寄せたい)」など小さな目標を持って取り組んでください。

決してスタイルシートをマスターしたいと思わないでください。

面倒になって挫折します。

「少し文字を大きくしたい、影をつけたい」など変更したいポイントだけを編集するために最短ルートで進みましょう！！

スタイルシートの名称・構成

「スタイルシートをマスターしようとするな」とは言ったものの基本的な名称と構成くらいは覚えておきましょう。

名称は覚えなくてもいいですが、構成だけは覚えておかないとせっかく編集したスタイルシートが反映されなくなってしまいます。

それではさっそく本題に入ります。

「ルクセリタステーマで記事タイトルを中央寄せにする方法」をスタイルシートで書くと以下のようなコードになります。

これを参考にして解説していきます。

セレクタ

セレクタとは「場所」のことです。

上記の例でいくと、セレクタは一番上の行に書いてある「 .entry-title, #front-page-title」の部分になります。

つまり記事タイトルのセレクタは 「 .entry-title, #front-page-title」 になります。

プロパティ

セレクタの下に書いてある「text-align」がプロパティと呼ばれるものです。

プロパティには属性・性質という意味があります。

ここでは「text(文字)-align(揃える)」というプロパティ(性質)をどうするか決めることができます。

値

プロパティ横の文字が値になります。ここでは「center」です。

プロパティと値をどのように設定するかでデザインが変わり、サイトにオリジナリティを出すことができます。

スタイルシートの構成

スタイルシートは　セレクタ{プロパティ:値;}　の形が基本構成になります。

実際にはわかりやすくするためか{}が改行されて記述されています。

上記のような感じで書いてあります。

プロパティ横の「：」と値の横の「；」の書き忘れに注意してください。

以上踏まえて以下のような構成になるわけです。

セレクタを見つける方法

あとはセレクタさえ見つけることができれば、どこの箇所でも編集できるようになります。

セレクタを見つける方法は簡単です。

パソコンからGoogleChromeを開いて、「スタイルシートを編集したい箇所」を右クリックします。

「検証」を押します。

すると意味不明なウィンドウが出てくると思いますが、そこにスタイルシートがすべて書いてあります。

今右クリックをしたところのスタイルシートが画像右下に表示されています。

一番上に書いてあるのがセレクタになります。

セレクタがわかれば、あとは自分の好きなようにプロパティと値を編集すればオリジナルのデザインが出来上がります。

スタイルシートはどこで編集するのか？

ルクセリタステーマだとスタイルシートは「子テーマの編集」から編集します。

他のテーマであれば、「外観」→「テーマエディター」→「テーマを選択」→「スタイルシート」から編集することが可能です。

ここにスタイルシートを追記する形になります。

難しそうに見えるかもしれませんが、簡単です。何回か試してみれば慣れてくると思います。

まとめ

今回は主にセレクタの見つけ方をメインに紹介しました。

私もスタイルシートをマスターしたわけではないので試行錯誤の連続です。

類似箇所のセレクタもたくさんあり、どれが本物かわからないこともあります。動作を確認しながら日々勉強中です。

プロパティや値についてはGoogle検索で「css　文字に影」などで検索すればすぐにわかります。

スタイルシートの編集は面白くてこだわってしまうとなかなか完成しないので、ある程度で見切りをつけるのがコツかなと思います。

以上です。あなたの参考になればと思います。

またわからないことがありましたらお気軽にメッセージください。