テーマ編集方法

WordPressテーマのCSS編集をGoogleChromeで簡単にする方法

初心者でもテーマCSSを安全・簡単に 編集してオリジナリティを出す方法

どれだけ素敵なWordPressテーマを使っていても、こんなことを思ったことありませんか?

  • 記事のタイトルの色は薄い青色に変更したい
  • 日付部分のフォントサイズを大きくしたい
  • ボタンの色は、濃い赤にしたい

など、少し気になる部分が出てきますよね!

私は、どんなテーマを使っていても変更したい箇所が出てきます(笑)

そんな時に、WordPress初心者だと、テーマCCのどこをどう触ればいいのかわからない!
けど、CSSを編集したい!
さらに贅沢をいうと、どう変わるのかを確認しながらできるとうれしい!

そう、そんなわがままな願いを簡単に叶えたいと思います!

GoogleChromeを使ったWordPressテーマのCSS編集の手順

  1. Google Chromeをインストール(すでに入っている場合は省略)
  2. Google Chromeで編集したいWordPressサイトを開く
  3. Google Chromeのデベロッパーツールを表示させる
  4. デベロッパーツールでCSSを編集していく
  5. 編集したCSSをコピーする
  6. WordPress管理画面でCSSを貼り付けて反映させる

では、一つひとつ作業を確認してみましょう。

Google Chromeをインストール(すでに入っている場合は省略)

Google Chromeはコチラから

ここの説明は、省略します。

Google Chromeで編集したいWordPressサイトを開く

Google Chromeで、自分のWordPressサイトを開きます。

Google Chromeのデベロッパーツールを表示させる

サイトを開いたら上部メニューより《表示》→《開発/管理》→《デベロッパーツール》をクリックします。
Google Chromeのデベロッパーツールを表示させる_001
※画面はMacです。

すると画面のように、デベロッパーツールが表示されます。
Google Chromeのデベロッパーツールを表示させる_002

デベロッパーツールの表示位置は《ウインドウアイコン》をクリックすることで変更することができます。表示位置は、以下の3つから選ぶことができます。
1.ウインドウ下
2.ウインドウ右
3.別ウインドウ
Google Chromeのデベロッパーツールを表示させる_003

デベロッパーツールでCSSを編集していく

では、デベロッパーツールを使っていきましょう。
まずは、変更したい箇所を開いておきます。
そして、ツール内の《虫眼鏡アイコン》をクリックします。
Google Chromeのデベロッパーツールを表示させる_004
クリックするとアイコンが「青く」なります。

この状態でサイトの「変更したい箇所にカーソルを重ねてクリック」します。
選択部分は、青いマーカーで表示されます。
Google Chromeのデベロッパーツールを表示させる_005

するとデベロッパーツールで選択した部分のCSSが赤い四角の部分に表示されます。
Google Chromeのデベロッパーツールを表示させる_006

このままでは見づらいので、デベロッパツールを「別ウインドウ」に変更したり
以下の赤いライン辺りにマウスを重ねると表示領域を変更できるので、自分で見やすいように調整してみましょう。
デベロッパーツールでCSSを編集していく_007

選択している箇所のCSSが表示されています。
デベロッパーツールでCSSを編集していく_007_008

そこで、変更したい属性をクリックすると編集ができるようになります。
デベロッパーツールでCSSを編集していく_009

好きな色に変更してみましょう。
色については、数値の左にある《カラーピッカー》をクリックすると色が選べます。
デベロッパーツールでCSSを編集していく_010

現在、<a>の要素を選択しているので
<h3>要素を選択してみます。
虫眼鏡で選択してもいいのですが、ここは左のソースを選択してみましょう。

をクリックすると、右のCSSも変わります。
デベロッパーツールでCSSを編集していく_011

font-sizeがありますね。今度は、フォントの大きさを変更してみましょう。
デベロッパーツールでCSSを編集していく_012

大きくなりましたね!
この数値は、「Shift+↑」を押すと10pxずつ増えます。
1pxずつ増やす場合は「↑」を押しましょう。

デベロッパツールでは、いろいろと変更して試せるのでいいですね!
ちょっと無駄に大きくしてみましょう(笑)
60pxです!

デベロッパーツールでCSSを編集していく_013

でかっ!!!(笑)

デベロッパーツールを使えばどうなるか確認しながら変更できるので便利ですね。
60pxにすると2行になった場合に、文字が重なりますね。
と、いうことはこれは「line-height」を調整しないといけないですね。
60pxに変更してみました。
デベロッパーツールでCSSを編集していく_014

おぉーキレイに表示されましたね!

 

これでCSSを編集する方法は、わかりましたね。

続いて、ここまで編集したCSSをWordPressに反映するにはどうすればいいのかを説明します。

★ここで1つ注意が必要です★
デベロッパツールでCSS編集中に《ページの再読み込み》をすると、編集したCSSはリセットされます。
CSS編集が完了した場合は、再読み込みをしないようにしましょう。
逆に、CSSをリセットしたい場合は、再読み込みをする

編集したCSSをWordPressへ

CSSの右に、どのCSSファイルを編集しているのかが表示されているのでクリックします。
この場合は、テーマ内の「style.css 434行目」を編集しています。
編集したCSSをWordPressへ_015

style.cssが表示されるので全て選択してコピーします。
編集したCSSをWordPressへ_016

WordPress管理画面の《外観》→《テーマの編集》を開きます。
テーマの編集するファイル名を確認し(3)、CSSを貼り付けます(4)、《ファイルを更新》をクリックします(5)。

WordPress管理画面でCSSを貼り付けて反映させる_017

確認すると、無事CSSが反映されましたね。
WordPress管理画面でCSSを貼り付けて反映させる_018

これで無料テーマを使っても、オリジナリティを出すことができますね^^

まとめ

WordPress初心者でも見た目を変更したいのに、我慢している人も多いかと思います。

Google Chromeを使えば、初心者でも簡単にCSSを編集することができます。

  • 見た目を確認しながら、CSSを編集できるのでわかりやすい
  • 編集したい場所を選択するだけなので簡単
  • すでに公開しているWordPressのCSSを安全に編集できる
  • 変にCSSを編集して、崩れたまま公開してしまうリスクを避けられる
  • なんといっても、無料テーマでも自分らしいデザインに変更ができる

と、うれしいメリットがたくさんあります。
ぜひ、Google Chromeのデベロッパーツールを活用してみてください!

この記事が気に入ったら
いいね!しよう

ABOUT ME
WordPressラブ管理者 ウマちゃん
ウマちゃんと申します。 PHPとか詳しくない自分でも見た目がいいホームページが作れたことに感動したので「初心者のためのWordPress勉強サイト WordPressラブ」を作ってみました。 ぜひ、WordPress初心者の方のお役に立てればうれしいです。