ブログ

【WordPress 初心者】簡単!CSSをスタイルシートに追加する方法

こんにちは!テンパです。

WordPressでブログを作り始めたときって、使い方や用語など、わからないことだらけですよね?

その中でも、ブログのデザインの変え方を調べると必ずといっていいほど、厄介な単語「CSS」、「スタイルシート」。

それって何?
どうやって使うの?

そんなWordPressでブログを始めたばかりの初心者の方に、今回はCSSをスタイルシートに追加する方法を紹介します。

テンパ
テンパ
テンパも今のブログにするまで、スタイルシートを編集したり、いろいろ悪戦苦闘してきました!

 

CSSとは何?

Webサイトを作る上で、HTMLという言葉は聞いたことがあるかと思います。
HTMLとは、ページの構成などを定義する言語です。
簡単なところで言うと、見出し(hタグ)や段落(pタグ)などですね。

それに対して、CSSとは、HTMLで記述した文書に装飾をするための言語です。
色を変えたり、ボタンを作ったり、などができます。

じゃあ、CSSにはどんなものがあるのか?
・・・それについては、今回の記事では紹介しません。(すみません・・・)

でも、Webで探せばおしゃれに装飾できるコードを紹介しているサイトがたくさんあるので、最初はそれをコピー&ペーストして使うことをオススメします。

チー
チー
詳しくはWebなの!

 

何でスタイルシートにCSSを追加するの?

先ほど説明したCSSを使う方法として、簡単に言うと2つのパターンがあります。

① テキストエディターに直接、CSSを入力する方法

この方法は装飾をしたい箇所に毎回CSSを打ち込む方法ですが、CSSは色や大きさなどを指定するため、コードが長く、毎回となるとすごく手間がかかります。

テンパ
テンパ
慣れていて早く入力できるならいいけど、毎回打ち込むのは初心者には難しいよね~

 

② スタイルシートと呼ばれる、外部CSSファイルにCSSを打ち込み、使いたい時に読みだす方法

この方法が最もポピュラーな方法で、WordPressで何らかのテーマをインストールすると、「style.css」というスタイルシートが用意されています。
そのファイルにCSSを登録しておきます。
記事でその登録したCSSを使いたい場合は、それを呼び出すコードを入力するだけで、そのCSSを使うことができます。

テンパ
テンパ
登録さえしておけば、いろいろな記事から簡単にそのCSSを利用できるよ!

つまり、毎回CSSを打ち込むの大変、その手間を省くためにスタイルシートにCSSを登録するのです!

 

 スタイルシートにCSSを追加する方法

スタイルシートを編集する際は、必ずバックアップをとるようにしよう。
スタイルシート内には、ページを構成しているデータも含まれるため、下手にいじるとページが表示されなくなってしまいます。

WordPress初心者におすすめ!プラグインで簡単バックアップ方法ブログやサイトのバックアップを取ることはとても大切です。プラグイン UpdraftPlus を使えばWordPress初心者でも、、ほぼ1クリックでバックアップとその復元が可能です。今回は UpdraftPlus のおすすめポイント、導入、使い方について、詳しくご紹介します。...

 

では、スタイルシートにCSSを追加します。

 

1.
WordPressの ①「外観」 → ②「テーマの編集」 

 

2.
③「スタイルシート(style.css)」の中にCSSを追加します。
貼りつける場所は一番下で大丈夫です。

最後に ④「ファイルの更新」をクリックして、完了です。

テンパ
テンパ
やってみると意外と簡単だよ!

 

追加CSSが便利!

その他にも、スタイルシートにCSSを追加する方法があります。

WordPress4.7以降のバージョンでは、「追加CSS」という機能が使えるようになっています。「付随のCSSエディタ」という言い方もします。

 

1.
WordPressの「外観」 → 「テーマの編集」 → 「スタイルシート(style.css)」を開き、画面上の「付随の CSS エディター」 をクリック

 

2.
すると、「カスタマイズ中の追加CSS」というページが画面左に表示されるので、そこにCSSを追加しよう。完了したら、「公開」をクリック。

※カスタマイズ画面からも、「カスタマイズ中の追加CSS」に行くことができます。

 

なぜ、この追加CSSが便利かというと・・・

上で紹介したスタイルシート(style.css)の中にCSSを直接追加する方法は、「ファイルを更新」を押して実際のページを見に行くまで、ちゃんと変更が反映されているか確認することができません。

確認のためにページを行ったり来たりすることになるので、慣れないうちはただただ時間と気力を消耗します。

しかし、追加CSSを使えば、変更がキチンと反映されるかを、画面の右側で確認しながらカスタマイズをすることができるんです。

しっかり反映されていることが確認できたら、忘れずに「公開」を押して、完了です!

 

まとめ

いかがでしたでしょうか。

WordPress初心者の方でも、簡単にスタイルシートにCSSを追加できる方法をご紹介しました。

Webで素敵なデザインのCSSを見つけたら、コピー&ペーストして、ぜひお試し下さい。
自分のブログを理想に近づける第一歩です!

参考になれば幸いです。

こんな記事もおすすめ