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

1 min 30 views
akira

akira

2006年にうつ病を発症し会社を退職。1年で回復し社会復帰できましたが、2018年1月に人生2回目のうつ病を発症し、その年の6月に会社を退職。現在Youtube、ブログアフィリエイト、バイトと貯金で生活しています。人生山あり谷あり。早く寛解したいです。
>>ブログで収入を得る方法は無料で公開しています

FOLLOW

ワードプレスを使っていて、デザインを変更したい時に、デザインの変更したい部分は、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はこちらから無料でダウンロードできます

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

カテゴリー:
ブログで月5万円収入を得る方法

アルバイトはしていますが、僕は現在定職にはついていません。ブログとYoutubeのアフィリエイト収益で生計をたてています。アフィリエイトでお金を得るのは決して楽なことではありませんが、調子の悪いときは休んで、調子の良い時だけ仕事をするという自分のペースで作業をすることも可能です。以下のリンク先ではブログで収益を得る方法を紹介しています。少しでも興味のある方は読んでみてください

関連記事

コメントを残す

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