ワードプレスのデザイン変更 CSS(スタイルシート)どの部分を編集すればいいか簡単にわかる方法

ワードプレスを使っていて、デザインを変更したい時に、デザインの変更したい部分は、CSSのどの部分を編集すればいいか、すぐに分からないことがよくあります。
初心者の方だと、編集部分を探すが面倒になりあきらめる事も・・・

今回は、そんな時に使える「Google chrome developer tools」を紹介します。

Google chrome

まず初めに「Google chrome developer tools」を使用するには、Google chromeがパソコンにインストールされていることが必須になります。
下記のリンク先からダウンロードできます。
https://www.google.co.jp/chrome/browser/desktop/index.html

Google chromeで変更したいサイトを開く

ワードプレスのデザイン変更 CSS(スタイルシート)どの部分を編集すればいいか簡単にわかる方法
まずGoogle chromeでデザインを変更したいサイトを開きます。
開いたら「F12キー」を押すと上のような画面になります。

ワードプレスのデザイン変更 CSS(スタイルシート)どの部分を編集すればいいか簡単にわかる方法
次に変更したい部分にカーソルをもっていきます。
今回は例として、記事の見出しを使います。

ワードプレスのデザイン変更 CSS(スタイルシート)どの部分を編集すればいいか簡単にわかる方法
次にカーソルが乗っている状態で、右クリックして「要素の検証」を選択します。

ワードプレスのデザイン変更 CSS(スタイルシート)どの部分を編集すればいいか簡単にわかる方法
画面の下の部分が変わります。

ワードプレスのデザイン変更 CSS(スタイルシート)どの部分を編集すればいいか簡単にわかる方法
画面右下部分に注目してみます。

先ほど、「要素の検証」を選択した部分の「CSSのどこの部分が適用」されているかが表示されています。
矢印部分の数字「316」はスタイルシートの316行目部分という意味です。

これで、316行目を変更すれば、「記事の見出し部分」が変わる事がわかります。

ワードプレスのデザイン変更 CSS(スタイルシート)どの部分を編集すればいいか簡単にわかる方法
何行目かを探すのは、テキストエディタを使えば簡単です。
上の画像はテキストエディタの「terapad」で開いているところです。
terapadはこちらから無料でダウンロードできます

以上、最後まで読んでいただきありがとうございました。

The following two tabs change content below.
AKIRA

AKIRA

上尾市在住の、リサイクルショップで働くサラリーマン。 Twitter・Facebookやってます。 小心者なので、誰か声かけてくれると嬉しいです。
スポンサーリンク
スポンサーリンク
スポンサーリンク

コメントをどうぞ

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